微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

Flex移动应用程序开发的技巧和窍门——第三部分

分类：Flex作者：编程之家AI导航网

这是关于 Flex 移动应用程序开发的技巧和窍门系列文章的第三部分内容。第一部分内容主要集中讨论了视图之间以及应用程序执行之间切换时的数据处理。第二部分则主要涵盖了应用程序动作条和标签组件风格化方面的内容。在这一部分中，你将会学到如何控制动作条和标签组件的可见性，以及如何把标签组件移动到应用程序的顶端。

动作条和标签的隐藏

在使用基于 TabbedViewNavigatorApplication 的Flex移动应用程序的过程中，你可能需要隐藏 动作条组件或 标签组件。例如，在特定视图下，你可能想获取更大的屏幕空间，或者，你只是想根据个人喜好设置显示界面。在这些情况下，你可以使用 View 类中的两个有效的道具： actionBarVisible 以及 tabBarVisible，来达到预期的效果。

为了说明 actionBarVisible 和 tabBarVisible 究竟是如何工作的，我创建了一个简单的基于TabbedViewNavigatorApplication 的移动应用程序。如果你想查看完整的源代码，并亲自调试这个应用程序，下载这篇文章中用到的样本文件，并把项目导入到 Adobe Flash Builder 中去。

（这个应用程序的）代码中含有三个视图：View1，View2和View3。在第一个视图中含有控制ActionBar和TabBar可见性的按钮。

正如你在下面 View1 代码中看到的那样，你可以通过设置 actionBarVisible 和 tabBarVisible 为真或假来控制它们的可见性：

[java] view plain copy print ?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
  3.         xmlns:s="library://ns.adobe.com/flex/spark" title="View1">  
  4.    
  5.     <fx:Script>  
  6.         <![CDATA[  
  7.             protected function onActionBarClickHandler(event:MouseEvent):void  
  8.             {  
  9.                 if (actionBarVisible)  
  10.                 {  
  11.                     this.actionBarVisible = false;  
  12.                     b.label="Show ActionBar";  
  13.                 }  
  14.                 else {  
  15.                     this.actionBarVisible = true;  
  16.                     b.label="Hide ActionBar";  
  17.                 }  
  18.             }  
  19.    
  20.             protected function onTabBarClickHandler(event:MouseEvent):void  
  21.             {  
  22.                 if (tabBarVisible)  
  23.                 {  
  24.                     this.tabBarVisible = false;  
  25.                     b2.label="Show TabBar";  
  26.                 }  
  27.                 else {  
  28.                     this.tabBarVisible = true;  
  29.                     b2.label="Hide TabBar";  
  30.                 }  
  31.             }  
  32.         ]]> 
  33.     </fx:Script>  
  34.     <s:VGroup width="100%" height="100%" horizontalAlign="center" top="50">  
  35.         <s:TextArea text="This is View 1" editable="false"/>  
  36.         <s:HGroup>  
  37.             <s:Button id="b" label="Hide ActionBar" click="onActionBarClickHandler(event)"/>  
  38.             <s:Button id="b2" label="Hide TabBar" click="onTabBarClickHandler(event)"/>  
  39.         </s:HGroup>  
  40.     </s:VGroup>  
  41. </s:View> 

当通过（点击）标签或程序控制来实现不同视图之间的切换时，这些项目的可见性只在View1中有所改变（如图1所示）。

应用程序的开始界面（左），动作条隐藏界面（中）以及动作条和标签隐藏界面（右）

图1. 应用程序的开始界面（左），动作条隐藏界面（中）以及动作条和标签隐藏界面（右）

其他视图不受影响（如图2所示）。

点击 View1 中按钮时，View2 界面保持不变

图2. 点击 View1 中按钮时，View2 界面保持不变

这并没有包含如下的主应用程序的代码：

[java] view plain copy print ?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
  3.                                   xmlns:s="library://ns.adobe.com/flex/spark">  
  4.     <s:ViewNavigator label="View1" width="100%" height="100%" firstView="views.View1"/>  
  5.     <s:ViewNavigator label="View2" width="100%" height="100%" firstView="views.View2"/>  
  6.     <s:ViewNavigator label="View3" width="100%" height="100%" firstView="views.View3"/>  
  7. </s:TabbedViewNavigatorApplication> 

如果你亲自创建并测试这个应用程序，你会注意到，你隐藏了 ActionBar，切换到其他的视图，然后切换回 View1 时，动作条就会再次出现。之所以会有这样的情况出现，是因为当你再次把视图切换回来的时候，视图发生了重建。当你在特定的视图中，希望 ActionBar 一直处于隐藏状态，你可以通过几种不同的方法来实现。其中一种方法就是在视图中设置destructionPolicy="never"；这样 ActionBar 被隐藏之后就不会再自动重现，因为视图不会再自动重建。另一种方法是在根 View 标签中设置viewActivate="actionBarVisible=false" ，这样每次该视图被激活，ActionBar 都会处于隐藏状态。但是，使用这种方法存在的一个问题是，当这个视图被激活的时候，用户都会在视图隐藏之前，看到 ActionBar 短暂的出现，这可能是我们所不希望看到的。第三种方法是，在你的根选项卡应用程序文件中加入如下的代码，来设置 tabbednavigatorIndexChangeEvent 上的 ViewNavigator 组件中的当前视图 actionBarVisible 属性为假：

[java] view plain copy print ?
  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"  
  3.                          xmlns:s="library://ns.adobe.com/flex/spark"      
  4.                          applicationComplete="onApplicationComplete(event)">     
  5. <fx:Script> 
  6. <![CDATA[ 
  7. import mx.events.FlexEvent; 
  8. import spark.events.IndexChangeEvent; 
  9. protected function onApplicationComplete (event:FlexEvent):void{ 
  10.     vn1.actionBar.visible=false;                
  11.     tabbednavigator.addEventListener(IndexChangeEvent.CHANGE,onChange);        
  12. } 
  13.              
  14. protected function onChange(event:IndexChangeEvent):void 
  15. { 
  16.     if (event.newIndex==0) 
  17.         vn1.activeView.actionBarVisible=false; 
  18.                  
  19. } 
  20.              
  21. ]]> 
  22. </fx:Script> 
  23.      
  24.      
  25.     <s:ViewNavigator id="vn1" label="View1" width="100%" height="100%" firstView="views.View1"/> 
  26.     <s:ViewNavigator label="View2" width="100%" height="100%" firstView="views.View2"/> 
  27.     <s:ViewNavigator label="View3" width="100%" height="100%" firstView="views.View3"/> 
  28. </s:TabbedViewNavigatorApplication> 

将标签定位到应用程序的顶端

正如你在本文第二个示例应用程序中看到的那样，默认情况下，Flex 4.5 TabbedViewNavigatorApplication 的标签按钮是位于（应用程序的）底部的（如图3所示）。

标签的默认位置

图3. 标签的默认位置

但是，有的时候你可能更希望你的应用程序标签位于屏幕的顶端。

按照如下步骤，移动标签到你的应用程序的顶端：

  1. 找到并复制 TabbedViewNavigatorSkin.as 类到你的 mobile 项目目录 skins中去。在我的 Mac 上，我可以在如下目录中找到这个皮肤类（对 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风格：
[java] view plain copy print ?
  1. <fx:Style> 
  2.         @namespace s "library://ns.adobe.com/flex/spark"; 
  3.         s|TabbedViewNavigator 
  4.         { 
  5.             skinClass: ClassReference("skins.TabbedViewNavigatorSkin"); 
  6.         } 
  7. </fx:Style> 


  1. 在你新复制的 TabbedViewNavigatorSkin 类中，更改类顶部的 package 命令来反映它在你本地 skins 文件夹中的新的位置；将 package 命令的第一行由 package spark.skins.mobile 替换为package skins。
  2. 滚动鼠标至皮肤类底端，找到 layoutContents() 函数。这个函数是用来设置标签条和内容布局的。这里的内容指的是你的 View 类的子元素，例如，应用程序中的 UI 组件以及结果 List 等。
[java] view plain copy print ?
  1. override protected function layoutContents(unscaledWidth:Number,unscaledHeight:Number):void 
  2. { 
  3.     super.layoutContents(unscaledWidth,unscaledHeight); 
  4.   
  5.     var tabBarHeight:Number = 0;  
  6.   
  7.     if (tabBar.includeInLayout) 
  8.     { 
  9.         tabBarHeight = Math.min(tabBar.getPreferredBoundsHeight(),unscaledHeight); 
  10.         tabBar.setLayoutBoundsSize(unscaledWidth,tabBarHeight); 
  11.         tabBar.setLayoutBoundsPosition(0,unscaledHeight - tabBarHeight); 
  12.         tabBarHeight = tabBar.getLayoutBoundsHeight();  
  13.   
  14.         // backgroundAlpha is not a declared style on buttonbar 
  15.         // TabbedViewNavigatorbuttonbarSkin implements for overlay support 
  16.         var backgroundAlpha:Number = (_isOverlay) ? 0.75 : 1; 
  17.         tabBar.setStyle("backgroundAlpha",backgroundAlpha); 
  18.     } 
  19.   
  20.     if (contentGroup.includeInLayout) 
  21.     { 
  22.         var contentGroupHeight:Number = (_isOverlay) ? unscaledHeight : Math.max(unscaledHeight - tabBarHeight,0); 
  23.         contentGroup.setLayoutBoundsSize(unscaledWidth,contentGroupHeight); 
  24.         contentGroup.setLayoutBoundsPosition(0,0); 
  25.     } 
  26. } 


在这里，关键是 tabBar.setLayoutBoundsPosition(x,y) 函数。如果你修改（这个函数）代码中的 y 值为 0，标签就会被置于应用程序的顶端：

[java] view plain copy print ?
  1. if (tabBar.includeInLayout) 
  2. { 
  3.     tabBarHeight = Math.min(tabBar.getPreferredBoundsHeight(),unscaledHeight); 
  4.     tabBar.setLayoutBoundsSize(unscaledWidth,tabBarHeight); 
  5.     tabBar.setLayoutBoundsPosition(0,0); 
  6.     tabBarHeight = tabBar.getLayoutBoundsHeight();  
  7.   
  8.     // backgroundAlpha is not a declared style on buttonbar 
  9.     // TabbedViewNavigatorbuttonbarSkin implements for overlay support 
  10.     var backgroundAlpha:Number = (_isOverlay) ? 0.75 : 1; 
  11.     tabBar.setStyle("backgroundAlpha",backgroundAlpha); 
  12. } 
  13. if (contentGroup.includeInLayout) 
  14. { 
  15.     var contentGroupHeight:Number = (_isOverlay) ? unscaledHeight : Math.max(unscaledHeight - tabBarHeight,0); 
  16.     contentGroup.setLayoutBoundsSize(unscaledWidth,contentGroupHeight); 
  17.     contentGroup.setLayoutBoundsPosition(0,0); 
  18. } 


标签置于顶端的应用程序

图4. 标签置于顶端的应用程序

如果你想去掉动作条来制造更大的屏幕空间（如图5所示），你只需要进入 View 类并设置 actionBarVisible 为 假；例如：

[html] view plain copy print ?
  1. <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
  2.         xmlns:s="library://ns.adobe.com/flex/spark" title="Search Location..." actionBarVisible="false" xmlns:json="com.adobe.serialization.json.*" > 

标签位于顶端且没有动作条的应用程序

图5. 标签位于顶端且没有动作条的应用程序

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

css display:flex 属性
一：display:flex布局display:flex是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵
display:flex 布局详解2
1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何垂直居中对齐，方法有很多，但是在学习了flex布局之后，垂直居中更加容易实现HTML代码：1<divclass="demo">2<divclass="inner">3<p>这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试</p>4</div
移动端开发
移动端开发知识点pc端软件和移动端apppc端软件是什么，有哪些应用。常见的例子，比如360杀毒，photoShop，VisualStudioCode等等移动端app是什么，有哪些应用。常见的例子，比如手机微信，手机qq，手机浏览器，美颜相机等等PC端与移动端的区别第一：PC考虑的是浏览器的兼容性，移动端考
grid布局笔记
最近挺忙的，准备考试，还有其他的事，没时间研究东西，快周末了，难得学点东西，grid是之前看到的，很好奇，讲的二维的布局，看起来很方便，应该很适合移动端布局，所以今天抽时间学一学，这个当是笔记了。参考的是阮老师的博客。阮一峰：CSSGrid网格布局教程http://www.ruanyifeng.com/blog/2019/03/g
盒模型
display:flex;把容器设置为弹性盒模型（设置为弹性盒模型之后，浮动，定位将不会有效果）给父元素设置的属性：（1）display：flex---把容器设置为弹性盒模型。（2）flex-direction---设置弹性盒模型主轴方向默认情况下主
javascript – Flex禁用Safari键盘快捷键
我在网页上运行了一个Flex应用程序,我想使用Command←组合键在应用程序中触发某些操作.这在大多数浏览器上都很好,但在Safari上,浏览器拦截此键盘事件并导致浏览器“返回”事件.有没有办法,通过Flex或通过页面上的其他地方的JavaScript,我可以告诉Safari不要这样做？解决方法:简短的
flex布局，flex-item
flex布局，flex-item1<template>2<viewclass="container">3<viewclass="greentxt">4A5</view>6<viewclass="redtxt">7B8<
c# – 大屏幕多点触控交互式应用程序设计
我应该设计一个大型多点触控屏幕的应用程序.从大到大,我的意思是新闻广播员(大约55英寸及以上).该应用程序是一个交互式地图.我的问题是：开发应用程序的技术.我的第一个想法是在AdobeFlex中制作,但是HTML5也是如此……必须有一些非常棒的Java库用于触摸交互,但是在Windows平台上
左图有文字的一些CSS样式
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible&quo
弹性盒模型：flex多行多列两端对齐，列不满左对齐
【1】需求：  【2】解决方案：最近遇到布局上要求item两端对齐，且最后一行在列不满的情况下要求左对齐，使用flex的justify-content:space-between;实现时发现最后一行不能左对齐，而是两端对齐方式。 不是项目上想要的效果#网上查了一些资料，有两种方法可以实现效果：**1.
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native