这是关于 Flex 移动应用程序开发的技巧和窍门系列文章的第三部分内容。第一部分内容主要集中讨论了视图之间以及应用程序执行之间切换时的数据处理。第二部分则主要涵盖了应用程序动作条和标签组件风格化方面的内容。在这一部分中，你将会学到如何控制动作条和标签组件的可见性，以及如何把标签组件移动到应用程序的顶端。
动作条和标签的隐藏
actionBarVisible 以及
tabBarVisible，来达到预期的效果。
为了说明 actionBarVisible 和 tabBarVisible 究竟是如何工作的，我创建了一个简单的基于 TabbedViewNavigatorApplication 的移动应用程序。如果你想查看完整的源代码，并亲自调试这个应用程序，下载这篇文章中用到的样本文件，并把项目导入到 Adobe Flash Builder 中去。
（这个应用程序的）代码中含有三个视图：View1，View2和View3。在第一个视图中含有控制ActionBar和TabBar可见性的按钮。
正如你在下面 View1 代码中看到的那样，你可以通过设置 actionBarVisible 和 tabBarVisible 为真或假来控制它们的可见性：
<?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>
其他视图不受影响（如图2所示）。
这并没有包含如下的主应用程序的代码：
<?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 一直处于隐藏状态，你可以通过几种不同的方法来实现。其中一种方法就是在视图中设置 destructionPolicy="never"；这样 ActionBar 被隐藏之后就不会再自动重现，因为视图不会再自动重建。另一种方法是在根 View 标签中设置 viewActivate="actionBarVisible=false" ，这样每次该视图被激活，ActionBar 都会处于隐藏状态。但是，使用这种方法存在的一个问题是，当这个视图被激活的时候，用户都会在视图隐藏之前，看到 ActionBar 短暂的出现，这可能是我们所不希望看到的。第三种方法是，在你的根选项卡应用程序文件中加入如下的代码，来设置 tabbednavigator IndexChangeEvent 上的 ViewNavigator 组件中的当前视图 actionBarVisible 属性为假：
<?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>
将标签定位到应用程序的顶端
但是，有的时候你可能更希望你的应用程序标签位于屏幕的顶端。
按照如下步骤，移动标签到你的应用程序的顶端：
<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);
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
