Flex mobile bottom and top tabbed views on the same view
I want to add both bottom and top tab bars on the same view - its a flex mobile view. I tried this with but when I create two tab bars on a view only one of them is viewed - the bottom one. But if I delete the bottom one it displays the upper tab bar. Any suggestions on displaying both of them in the same screen?
<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>
And here is my 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);
}
}
I want to achieve a view like the below:
I don't think you can do what you want using two out of the box TabbedViewNavigator components. The main reason being that each one wants to mangage it's own stack of View's.
Perhaps you could achieve use the mx:ViewStack component, and drive it with two ButtonBar components.
So your View looks something like this:
<View>
<ButtonBar />
<ViewStack>
<NavigatorContent>
<MyView/>
</NavigatorContent>
...
</ViewStack>
<ButtonBar />
</View>
Now, you programmatically control the selected state of the view stack w/the button bars. Note you can't set both button bar's as the dataProvider of the ViewStack, but you can manage it's state w/the selectedIndex property.
You could add two ButtonBars with Adobe's TabbedViewNavigatorTabBarSkin - at the top="0" and at the 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>
This seems to work for me: Styling ButtonBar font in Flex mobile app - with screenshot attached
链接地址: http://www.djcxy.com/p/34656.html上一篇: Flex移动使用欧芹