Flex移动应用程序开发的技巧和窍门——第三部分
这是关于 Flex 移动应用程序开发的技巧和窍门系列文章的第三部分内容。第一部分内容主要集中讨论了视图之间以及应用程序执行之间切换时的数据处理。第二部分则主要涵盖了应用程序动作条和标签组件风格化方面的内容。在这一部分中,你将会学到如何控制动作条和标签组件的可见性,以及如何把标签组件移动到应用程序的顶端。 动作条和标签的隐藏actionBarVisible 以及
tabBarVisible ,来达到预期的效果。
为了说明 (这个应用程序的)代码中含有三个视图:View1,View2和View3。在第一个视图中含有控制ActionBar和TabBar可见性的按钮。 正如你在下面 View1 代码中看到的那样,你可以通过设置 <?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="View1"> <fx:Script> <![CDATA[ protected function onActionBarClickHandler(event:MouseEvent):void { if (actionBarVisible) { this.actionBarVisible = false; b.label="Show ActionBar"; } else { this.actionBarVisible = true; b.label="Hide ActionBar"; } } protected function onTabBarClickHandler(event:MouseEvent):void { if (tabBarVisible) { this.tabBarVisible = false; b2.label="Show TabBar"; } else { this.tabBarVisible = true; b2.label="Hide TabBar"; } } ]]> </fx:Script> <s:VGroup width="100%" height="100%" horizontalAlign="center" top="50"> <s:TextArea text="This is View 1" editable="false"/> <s:HGroup> <s:Button id="b" label="Hide ActionBar" click="onActionBarClickHandler(event)"/> <s:Button id="b2" label="Hide TabBar" click="onTabBarClickHandler(event)"/> </s:HGroup> </s:VGroup> </s:View> 当通过(点击)标签或程序控制来实现不同视图之间的切换时,这些项目的可见性只在View1中有所改变(如图1所示)。
图1. 应用程序的开始界面(左),动作条隐藏界面(中)以及动作条和标签隐藏界面(右)
其他视图不受影响(如图2所示)。
图2. 点击 View1 中按钮时,View2 界面保持不变
这并没有包含如下的主应用程序的代码: <?xml version="1.0" encoding="utf-8"?> <s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <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:TabbedViewNavigatorApplication> 如果你亲自创建并测试这个应用程序,你会注意到,你隐藏了 ActionBar,切换到其他的视图,然后切换回 View1 时,动作条就会再次出现。之所以会有这样的情况出现,是因为当你再次把视图切换回来的时候,视图发生了重建。当你在特定的视图中,希望 ActionBar 一直处于隐藏状态,你可以通过几种不同的方法来实现。其中一种方法就是在视图中设置 <?xml version="1.0" encoding="utf-8"?> <s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" applicationComplete="onApplicationComplete(event)"> <fx:Script> <![CDATA[ import mx.events.FlexEvent; import spark.events.IndexChangeEvent; protected function onApplicationComplete (event:FlexEvent):void{ vn1.actionBar.visible=false; tabbedNavigator.addEventListener(IndexChangeEvent.CHANGE,onChange); } protected function onChange(event:IndexChangeEvent):void { if (event.newIndex==0) vn1.activeView.actionBarVisible=false; } ]]> </fx:Script> <s:ViewNavigator id="vn1" 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:TabbedViewNavigatorApplication> 将标签定位到应用程序的顶端正如你在本文第二个示例应用程序中看到的那样,默认情况下,Flex 4.5 TabbedViewNavigatorApplication 的标签按钮是位于(应用程序的)底部的(如图3所示)。
图3. 标签的默认位置
但是,有的时候你可能更希望你的应用程序标签位于屏幕的顶端。 按照如下步骤,移动标签到你的应用程序的顶端:
<fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; s|TabbedViewNavigator { skinClass: ClassReference("skins.TabbedViewNavigatorSkin"); } </fx:Style>
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,unscaledHeight - tabBarHeight); 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,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,0); }
图4. 标签置于顶端的应用程序
? 如果你想去掉动作条来制造更大的屏幕空间(如图5所示),你只需要进入 View 类并设置 <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="Search Location..." actionBarVisible="false" xmlns:json="com.adobe.serialization.json.*" >
图5. 标签位于顶端且没有动作条的应用程序
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |