[转]文字竖排TabBar

最新推荐文章于 2024-06-27 17:14:07 发布

原创最新推荐文章于 2024-06-27 17:14:07 发布 · 220 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Blog #HTML

FLEX 专栏收录该内容

72 篇文章

订阅专栏

本文介绍了一种使用ActionScript实现垂直排列TabBar的方法。通过自定义VerticalTabBar类，继承TabBar，并调整内部Button布局和样式，实现了按钮垂直显示的效果。

[url]http://uh.9ria.com/space-12147-do-blog-id-668.html[/url]


package
{
    import mx.controls.Button;
    import mx.controls.ButtonLabelPlacement;
    import mx.controls.TabBar;
    import mx.core.IFlexDisplayObject;
    import mx.core.UITextField;
    import mx.core.mx_internal;
    import mx.events.FlexEvent;

    use namespace mx_internal;
    public class VerticalTabBar extends TabBar
    {
        public function VerticalTabBar()
        {
            super();
            addEventListener(FlexEvent.CREATION_COMPLETE,createCompleteEvt);
        }

        override  protected function createNavItem(label:String,icon:Class = null):IFlexDisplayObject{
            var button:Button=(super.createNavItem(label,icon) as Button);
            button.addEventListener(FlexEvent.UPDATE_COMPLETE,buttonUpdateComplete);
            return button;
        }

        private function buttonUpdateComplete(event:FlexEvent):void{
            var button:Button=event.currentTarget as Button;
            button.getTextField().y=(button.height-button.getTextField().textHeight)/2;
        }

        private function createCompleteEvt(event:FlexEvent):void{
            for each(var button:Button in getChildren()){
                button.labelPlacement= ButtonLabelPlacement.TOP;
                var text:UITextField=button.getTextField() as UITextField;
                text.explicitHeight=text.textHeight+5;
            }
        }

    }
}