0

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

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

我想实现如下视图：

在此处输入图像描述

4

2 回答 2

0

您可以使用 Adob​​e 的 TabbedViewNavigatorTabBarSkin添加两个ButtonBartop="0" - at和 at 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 字体样式 - 附有屏幕截图

于 2013-07-31T08:53:41.040 回答
0

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

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

所以你的视图看起来像这样：

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

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

于 2012-04-02T01:14:02.120 回答