Гибкие нижние и верхние вкладки с нижним и верхним вкладками на одном и том же представлении

Question

Я хочу добавить нижние и верхние панели вкладок на одном и том же представлении - его гибкий мобильный вид. Я пробовал это, но когда я создаю две панели вкладок, на просмотр только один из них просматривается - нижний. Но если я удалю нижний, он отобразит верхнюю панель вкладок. Любые предложения по отображению их обоих на одном экране?

<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> 

А вот мой 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); 
    } 
} 

Я хочу, чтобы достичь вид, как ниже:

Answer 1

Я не думаю, что вы можете делать то, что вы хотите используя два из компонентов TabbedViewNavigator. Основная причина заключается в том, что каждый из них хочет управлять своим собственным пакетом View's.

Возможно, вы могли бы использовать компонент mx: ViewStack и управлять им двумя компонентами ButtonBar.

Так ваш взгляд выглядит примерно так:

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

Теперь вы программно контролировать выбранное состояние стека вид ж/кнопки баров. Обратите внимание, что вы не можете установить обе панели кнопок как dataProvider из ViewStack, но вы можете управлять состоянием w/selectedIndex.

Answer 2

Вы можете добавить два ButtonBars с Adobe, TabbedViewNavigatorTabBarSkin - на top="0" и в bottom="0":

<s:ButtonBar requireSelection="true" 
      width="100%" 
      bottom="0" 
      skinClass="spark.skins.mobile.TabbedViewNavigatorTabBarSkin"> 
    <s:ArrayCollection> 
     <fx:Object label="View1" /> 
     <fx:Object label="View2" /> 
     <fx:Object label="View3" /> 
     <fx:Object label="View4" /> 
     <fx:Object label="View5" /> 
    </s:ArrayCollection> 
</s:ButtonBar> 

Это, кажется, работает для меня: Styling ButtonBar font in Flex mobile app - with screenshot attached