Гибкое мобильное нижнее и верхнее представления с вкладками в одном представлении - PullRequest
Новая
       55

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

0 голосов
/ 25 марта 2012

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

<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);
    }
}

Я хочу получить вид, подобный приведенному ниже:

enter image description here

Ответы [ 2 ]

0 голосов
/ 31 июля 2013

Вы можете добавить две 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>

Мне кажется, это работает: СтилизацияШрифт ButtonBar в мобильном приложении Flex - со скриншотом

0 голосов
/ 02 апреля 2012

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

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

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

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

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

...