在同一视图中Flex移动底部和顶部选项卡式视图

我想在同一个视图中添加底部和顶部的标签栏 - 它是一个灵活的移动视图。 我试过这个，但是当我在视图上创建两个标签栏时，只有其中一个被查看 - 最下面的那个。 但是如果我删除最下面的那个，它会显示上方的标签栏。 有关在同一屏幕上显示它们的任何建议？

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

我想要获得如下所示的视图：

---

我不认为你可以使用两个开箱即用的TabbedViewNavigator组件来做你想做的事。 主要原因是每个人想要制作自己的视图堆栈。

也许你可以实现使用mx：ViewStack组件，并用两个ButtonBar组件驱动它。

所以你的View看起来像这样：

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

现在，您以编程方式控制视图堆栈的w /按钮栏的选定状态。 请注意，您不能将这两个按钮栏都设置为ViewStack的dataProvider，但您可以通过selectedIndex属性来管理它的状态。

---

您可以添加两个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>

这似乎适用于我：在Flex移动应用程序中设置ButtonBar字体 - 附带屏幕截图

链接地址: http://www.djcxy.com/p/34655.html

上一篇: Flex mobile bottom and top tabbed views on the same view

下一篇: Flex for mobile: Is it possible to make list items transparents?