Flex 4.6 TabbedViewNavigator - TabBar with indicat

2019-09-07 02: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: enter image description here

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

0条回答
登录 后发表回答