Flex mobile bottom and top tabbed views on the same view

Question

I want to add both bottom and top tab bars on the same view - its a flex mobile view. I tried this with but when I create two tab bars on a view only one of them is viewed - the bottom one. But if I delete the bottom one it displays the upper tab bar. Any suggestions on displaying both of them in the same screen?

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark"
            xmlns:mx="library://ns.adobe.com/flex/mx"
            title="">

    <s:TabbedViewNavigator id="tb_hastaUp" width="100%" height="100%" skinClass="skins.TabbedViewNavigatorSkin">
        <s:ViewNavigator label="view1" width="100%" height="100%" firstView="views.view1" />
        <s:ViewNavigator label="view2" width="100%" height="100%" firstView="views.view2" />
        <s:ViewNavigator label="view3" width="100%" height="100%" firstView="views.view3" />
    </s:TabbedViewNavigator>



    <s:TabbedViewNavigator id="tb_hastaBottom" width="100%" height="100%" skinClass="spark.skins.mobile.TabbedViewNavigatorSkin">
        <s:ViewNavigator label="view1" width="100%" height="100%" firstView="views.view1"/>
        <s:ViewNavigator label="view2" width="100%" height="100%" firstView="views.view2" />
        <s:ViewNavigator label="view3" width="100%" height="100%" firstView="views.view3" />

    </s:TabbedViewNavigator>

 </s:View>

And here is my TabbedViewNavigatorSkin:

override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
{
    super.layoutContents(unscaledWidth, unscaledHeight);

    var tabBarHeight:Number = 0; 

    if (tabBar.includeInLayout)
    {
        tabBarHeight = Math.min(tabBar.getPreferredBoundsHeight(), unscaledHeight);
        tabBar.setLayoutBoundsSize(unscaledWidth, tabBarHeight);
        tabBar.setLayoutBoundsPosition(0, 0);
        tabBarHeight = tabBar.getLayoutBoundsHeight(); 

        // backgroundAlpha is not a declared style on ButtonBar
        // TabbedViewNavigatorButtonBarSkin implements for overlay support
        var backgroundAlpha:Number = (_isOverlay) ? 0.75 : 1;
        tabBar.setStyle("backgroundAlpha", backgroundAlpha);
    }

    if (contentGroup.includeInLayout)
    {
        var contentGroupHeight:Number = (_isOverlay) ? unscaledHeight : Math.max(unscaledHeight - tabBarHeight, 0);
        contentGroup.setLayoutBoundsSize(unscaledWidth, contentGroupHeight);
        contentGroup.setLayoutBoundsPosition(0, tabBarHeight);
    }
}

I want to achieve a view like the below:

enter image description here

I'm not sure; but your skin does not reference either of your TabbedViewNavigator instances for positioning or sizing. IF you aren't sizing or positioning either of them, that could be a reason their display is not showing properly. Wouldn't they both be positioned at 0,0 right on top of each other? Since both tab bars are positioned at 100% height, it seems logical that one is covering the other. — JeffryHouser
Yes, you're right! only the last TabbedViewNavigator is displayed sitting on the top of another..But there's no success if I give it a height as TabbedViewNavigator is being created starting from the top of the screen and the same scenario.. But how can I change that? — Zaur Guliyev
In this case I want to merge the top and bottom ones to make them compatible to be placed in the same view... Or there's another solution to create the same tabbarnavigator on each view to give that top and bottom tab bars effect. — Zaur Guliyev

Sunil D. Sunil D. · Accepted Answer · 2012-04-02T01:14:02

I don't think you can do what you want using two out of the box TabbedViewNavigator components. The main reason being that each one wants to mangage it's own stack of View's.

Perhaps you could achieve use the mx:ViewStack component, and drive it with two ButtonBar components.

So your View looks something like this:

<View>
  <ButtonBar />
  <ViewStack>
    <NavigatorContent>
      <MyView/>
    </NavigatorContent>
    ...
  </ViewStack>
  <ButtonBar />
</View>

Now, you programmatically control the selected state of the view stack w/the button bars. Note you can't set both button bar's as the dataProvider of the ViewStack, but you can manage it's state w/the selectedIndex property.

Flex mobile bottom and top tabbed views on the same view

2 Answers