Flex 4.6 TabbedViewNavigator - TabBar with indication of more items

痴心易碎 提交于 2019-12-12 02:46:16

问题


I would like my TabBar to have the ability to show if there are more menu items on either the left or the right. Else the user may not know that more options exist. Something like either arrows to indicate more items or even some sort of beveled effect on the last visible tab item so that it suggests more options are off screen. This is how my TabBar looks like with an arrow showing how the other items are just cut off:

Here is the code of the TabBarSkin:

public class ScollingTabBarSkin extends TabbedViewNavigatorTabBarSkin
{
    public var scroller:Scroller;

    /**
     *  Override createChildren() to create a Scroller and add the DataGroup
     *  as its viewport.
     */
    override protected function createChildren():void
    {
        super.createChildren();

        // use a standard HorizontalLayout instead of a specialized layout
        var tabLayout:HorizontalLayout = new HorizontalLayout();
        tabLayout.useVirtualLayout = false;
        tabLayout.gap = 0;
        tabLayout.variableColumnWidth = false;
        tabLayout.columnWidth = 400;

        dataGroup.layout = tabLayout;

        scroller = new Scroller();
        scroller.setStyle('interactionMode', InteractionMode.TOUCH);
        scroller.viewport = dataGroup;
        addChild(scroller);
    }

    /** 
     * Size and position the Scroller
     */
    override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
    {
        setElementPosition(scroller, 0, 0);
        setElementSize(scroller, unscaledWidth, unscaledHeight);
    }
}

Taken from:http://flexponential.com/2011/10/23/enable-scrolling-in-the-tab-bar-of-a-tabbedviewnavigator/comment-page-1/#comment-78685

来源:https://stackoverflow.com/questions/19939794/flex-4-6-tabbedviewnavigator-tabbar-with-indication-of-more-items

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!