0

同じビューに下部と上部の両方のタブバーを追加したい - そのフレックスモバイルビュー。これを試してみましたが、ビューに 2 つのタブ バーを作成すると、そのうちの 1 つだけが表示されます。しかし、一番下のものを削除すると、上のタブバーが表示されます。両方を同じ画面に表示するための提案はありますか?

<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

すぐに使用できる 2 つの TabbedViewNavigator コンポーネントを使用して、必要なことを実行できるとは思いません。主な理由は、それぞれがビューの独自のスタックを管理したいからです。

おそらく、mx:ViewStack コンポーネントを使用して、2 つの ButtonBar コンポーネントで駆動することができます。

したがって、ビューは次のようになります。

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

ここで、ボタン バーを使用してビュー スタックの選択状態をプログラムで制御します。両方のボタン バーを ViewStack の dataProvider として設定することはできませんが、selectedIndex プロパティを使用してその状態を管理できることに注意してください。

于 2012-04-02T01:14:02.120 に答える
0

Adobe の TabbedViewNavigatorTabBarSkin を使用して 2 つの ButtonBars を追加できます。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モバイルアプリのボタンバーフォントのスタイリング-スクリーンショットが添付されています

于 2013-07-31T08:53:41.040 に答える