Flex移动开发的提示和技巧——第三部分：隐藏和定位应用程序的选项卡及隐藏ActionBar

—要求

必备知识

如果您曾经利用Flex构建过应用程序——不一定是移动应用程序——则可以基本读懂本文。

用户级别  中级

所需产品  Flash Builder （下载试用版）

    关于Flex移动开发的提示和技巧有一系列文章，这是其中的第三部分。第一部分集中讲解如何在视图切换及应用程序操作切换之间处理数据。第二部分的内容是为移动应用中的ActionBar及选项卡组件设置样式。在本部分中，您将学会如何控制ActionBar和选项卡组件的可见性，以及如何把选项卡组件移动到应用程序的顶端。

隐藏ActionBar和选项卡

   当使用基于TabbedViewNavigatorApplication开发的Flex移动应用程序时，您可能发现自己需要隐藏ActionBar及选项卡。比如，您可能想为某一视图留出更多的屏幕空间，或者根据用户偏好简单地配置显示器。在这些情况下，您可以利用View类的两个可用属性来实现所要的效果：actionBarVisible和tabBarVisible。
   为了解释actionBarVisible和tabBarVisible是如何工作的，我基于TabbedViewNavigatorApplication创建了一个简单的移动应用程序。如果您想要查看完整的源代码并试用应用程序，下载本文中的示例文件，并将项目导入Adobe Flash Builder中。
  代码中有3个视图：视图1、视图2、视图3。第一个视图带有按钮，可以调节ActionBar和TabBar控件的可视性。
  从下面的视图1代码中可以看出，您是通过设置actionBarVisible和 tabBarVisible的真假值来控制它们的可视性：

切换视图时——不论是通过选项卡或者编程——那些项的可视性只有在视图1中才受影响（参看图1）。

图1 应用程序启动时（左）、ActionBar隐藏时（中）、ActionBar及选项卡隐藏时（右）

其他视图仍不受影响（参看图2）

      图2 当点击视图1中的按钮时，视图2未出现变化。

 从下面的代码可以看出，三者中无一包含主应用程序代码：

   如果您自己创建和测试该应用程序，您可能会发现在隐藏ActionBar、切换至另一视图又切换回来时，ActionBar会在您切换回第一视图时再次显示。之所以会出现这种情况是因为切换回来时，该视图重建了。如果您想要ActionBar在某一视图中始终不可见，您有几种不同的办法。其中一种是设置视图中destructionPolicy的值为“从不（never）”；这样一来，只要ActionBar被隐藏就不会再显示，因为不能重建视图了。还有一种办法是在根视图标签上设置viewActivate为"actionBarVisible=false"，从而实现每次激活视图时隐藏ActionBar。但是，使用这种办法会出现一个问题，即用户激活视图时，实际上仍会在ActionBar被移除之前瞥见它，这是我们不希望发生的。第三种办法是在您的根选项卡式应用程序文件中加入代码，以此设置被激活视图中actionBarVisible的属性值为假（false），这是针对tabbedNavigatorIndexChangeEvent 事件中的ViewNavigator组件。代码示例如下：

把选项卡定位至应用程序的顶端

  默认情况下，选项卡按钮在Flex4.5 构建的TabbedViewNavigatorApplication中是位于底部的，正如您在本文的第二个示例应用程序中所看到的一样（参看图3）。

      图3 选项卡的默认位置。

  但是，有时您喜欢把选项卡放置在屏幕的顶端。

  通过如下步骤，您可以把选项卡移至应用程序的顶端：
1.      找到类文件TabbedViewNavigatorSkin.as并将其拷贝至移动项目中名为skins的文件夹里。在我的Mac上，我在如下路径找到该skin类（Flash Builder 4.5.1的环境）：/Applications/Adobe Flash Builder 4.5/sdks/4.5.1/frameworks/projects/mobiletheme/src/spark/skins/mobile/TabbedViewNavigatorSkin.as。
2.     设置CSS样式，从而可以在主应用程序文件中（如下所示）或者外部样式表中使用该skin类：

3.      在新拷贝的TabbedViewNavigatorSkin类中，改变类顶部的包，从而显示它在本地skins文件中的新位置；把包的第一行语句中的package spark.skins.mobile替换为package skins。
4.     滚动至skin类的底部，定位到layoutContents()function。这就是决定选项卡栏和内容布局的地方。这种情况下的内容指的是View类的子组件，如UI组件和应用程序中的结果列表。

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

tabBar.setLayoutBoundsPosition(x,y) function在此处是关键。如果您修改代码，把y变量的位置设置为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 选项卡在顶端的应用程序

   现在如果您想要移除ActionBar以获得更大的屏幕空间（参看图5），您只需设定View类的actionBarVisible为假（false）；比如：

<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 选项卡在顶端且无AcitonBar的应用程序