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

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

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

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

введите описание изображения здесь


apache-flex flex4 flex4.5 flex-mobile
person Zaur Guliyev    schedule 25.03.2012    source источник
comment
Я обновил сообщение и добавил код ..   -  person Zaur Guliyev    schedule 25.03.2012
comment
Я не уверен; но ваш скин не ссылается ни на один из ваших экземпляров TabbedViewNavigator для позиционирования или изменения размера. ЕСЛИ вы не определяете размер или не позиционируете ни один из них, это может быть причиной того, что их дисплей не отображается должным образом. Разве они оба не были бы расположены на 0,0 точно друг над другом? Поскольку обе панели вкладок расположены на высоте 100%, кажется логичным, что одна закрывает другую.   -  person JeffryHouser    schedule 25.03.2012
comment
Да, ты прав! отображается только последний TabbedViewNavigator, расположенный поверх другого .. Но не будет успеха, если я дам ему высоту, поскольку TabbedViewNavigator создается, начиная с верхней части экрана и по тому же сценарию .. Но как я могу это изменить?   -  person Zaur Guliyev    schedule 25.03.2012
comment
В этом случае я хочу объединить верхний и нижний, чтобы сделать их совместимыми для размещения в одном представлении ... Или есть другое решение для создания одного и того же навигатора табуляторов в каждом представлении, чтобы придать эффект верхней и нижней панелей вкладок.   -  person Zaur Guliyev    schedule 25.03.2012
comment
Но даже это не даст такого эффекта ...   -  person Zaur Guliyev    schedule 25.03.2012
comment
Я не понимаю, какого эффекта вы хотите добиться; возможно, поможет скриншот или макет. Если вы хотите, чтобы что-то занимало весь экран; Я не уверен, что буду использовать TabbedViewNavigator.   -  person JeffryHouser    schedule 26.03.2012
comment
Я обновил пост и добавил изображение ... это было бы более объяснимо, чем любые слова   -  person Zaur Guliyev    schedule 26.03.2012

Ответы (2)


arrow_upward
0
arrow_downward

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

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

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

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

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

person Sunil D.    schedule 02.04.2012

arrow_upward
0
arrow_downward

Вы можете добавить две ButtonBar с помощью TabbedViewNavigatorTabBarSkin от Adobe - в 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 мобильное приложение - со скриншотом

person Alexander Farber    schedule 31.07.2013