Flex移动皮肤教程

Flex移动皮肤Flex4.5提供的移动增强的皮肤特性，支持触摸交互、性能优良，并且考虑到了内存占用问题,尽管目前市场上有不少性能优异的设备，但典型的Spark皮肤（包括Flex4引入的默认皮肤）却没有能够在移动设备上得到很好的应用。Adobe为移动优化过的皮肤在设计时就考虑到平衡两个对立的目标：性能优异却又容易创建。虽然MXML皮肤在某些情况下是有用的，但Adobe还是建议遵循以下简单的方针，确保Flex4.5移动应用程序能够同时满足开发者和最终用户的性能要求。这是介绍Flex4.5移动皮肤特性系列文章中的第一篇。本文将涵盖创建移动增强皮肤的基本知识，包括：Spark主题和Mobile主题的区别MoblleSkin基类中包含的性能优化用FXG替代MXML图形基FMobile主题的ButtonSkin类创建自定义的Button皮肤该系列文章中的余下几篇将会介绍更多高级主题，包括：基于Mob”eSkjn基类构建新的皮肤创建空间感知的皮肤，可以适应所有屏幕尺寸使用CSS媒体查询为每个平台创建自定义的主题比较Spark和MobiIe主题Mobile主题基本是Flex4弓|入的Spark主题功能集的一个子集Mobile主题专门针对性能和内存占用问题进行的优化。MobileSkin基类Spark皮肤通用需要继承Skin（它扩展了Group）或音SparkSkin（它扩展了Skin）.MobiIe主题里的皮肤使用一个新的基类MobileSkin,它扩展了UIComponent状态MobileSkin对状态的支持是它一项针对移动开发优化过的主要特性。一般情况3使用状态特性（在MXML或者ActionScript）都会带来额外的内存和性能消耗。而MobileSkin不再用State类及广类，而是手工的在代码里处理状态改变，例如SetProperty和AddChild布局因为MobileSkin不是一个Group,它不能使用Spark的基于约束的布局。例如HorizontaILayout,VerticalLayout和BasIcLayout...MobileSkin的内容在代码中人工的布局。MobileSkin力口入了新的生命周期方法layoutContents。，，它在updateDisplayList（）中被调用。这个方法用于放置皮肤的子元素。FXG和MXML图形Mobile主题中皮肤的图形由编译过的FXG和用于绘制的Actionscript代码构成。绘制代码仅用于琐碎的图形或者需要支持样式的时候。处于性能优化的考虑，所有其他图形都使用编译过的FXG。MobileSkin基类不选择使用MXML图形，除非他们都包含在一个Group当中。文本MobiIe主题在默认皮肤中不会使用FlashTextEngine(FTE)或者TextLayoutFramework(TLF)。这主要是基于性能的考虑，并且为了支持原生的文本输入和编辑。Flex4.5在mobilecomponerrts.swc中引入了一个新的StyleableTextField类。它扩展了TextFleld.并且加入了对样式的支持,它专门用于那些不准备与MXML结合使用的移动Actionscript皮肤和渲染器。在同时使用StyleableTextField和Label(基于FTE)时，开发者必须嵌入字体两次Label使用embedAsCFF=true,而TextField和StyleableTextField用embedAsCFF=faIse.Adobe不建议在移动项目中使用RichEditabieText组件.请用TextArea组件代替.MXML和ActionScrlpt由于MobileSkin删除「MXML皮肤的需嘤主要的申明性特性(状态、布局和MXML图形).Adobe建议用AcUonScript编写皮肤。没有这二个特性，用MXML做声明性的标识已经没有什么优势了。注意:在FlashBuilder中，可以指定库和主题的SWCs的代码或者编译过的ActionScrlpt皮肤，由设il视同渲染出MXML皮肤.但设计视图不能通过指定代码渲染Actionscript皮肤。不支持的全局样式由于上文提到限制,Mobile主题删除了一些样式，包括：rollOverColor-不支持，因为基础可触屏的界面是目前主要环境。borderAlpha,borderColor,cornerRadius-不支持，因为这些参数是编译过的FXG的属性，他们不会在运行时发生变化dropShadowVisibIe-不支持，为性能考虑，尽量减少过滤器的使用。FlashBuilder会根据当前选择的主题，在MXML和CSS编辑器中正确的显示或者隐藏样式属性Mobile中避免使用的组件由于各种原因，某些Spark组件在Mobile主题中没有皮肤。例如，有些组件在MobileUI下没有什么作用,或者它根本就不足Flex4.5版本的主要目标，可能在下一个发行版中专门为移动平台进行优化。这些组件包括：ComboBoxandDropDownListNumericStepperToggIeButtonVideoDisplayandVideoPlayerVSliderPanelTabBar(thecomponentusedinTabbedVaewNavigatorisactuallyaButtonBar)TitleWindowButton皮肤教程概述开始使用皮肤特性的最佳方式是，基T■默认的Buton皮肤，创建一个自定义的Button皮肤。为了止问题简单化，这个例子没有考虑到屏幕DPI的问题。笔者将在系列文章的其他篇幅讨论这些问题.首先，使用AdobeIllustratorCS5为Button图形创建•个FXG文件。这个文件将同时展现Button组件的up和down皮肤状态.因为这里主要针对触摸输入，所以没有创建over状态。其次，通过重载MobiIeSkin的drawBackground。方法，添加对'chromeColor样式的支持。或者，也可以手动在up和down的图形里添加固定的背景颜色，然后重载drawBackground()方法，不作任何事情。disabled状态仅仅会改变up状态的alpha值。移动ButtonSkin类已经默认包含这个功能。教程第一步：创建FXG图形根据自己的喜好，可以选择AdobeFlashProfessional、Adobe11lustrator或者AdobeFireworks构建FXG.你也可以在FlashBuiIder中手工编辑FXG,然后在MXML文件中移动这个FXG,再用设计视图消染它，可视化的检查结果。用Illustrator创建FXG这个例子用Illustrator创建一个药丸形状的Button图形..在11lustrator选择FiIe>New..为图形命名，例如RoundedButtonExport.设置NewDocumentProfiIe为FlashCatalyst.设置大小为典型的手机尺寸480pxx800px。.点击0K.用矩形工具新建一个由灰色笔触，渐变填充的矩形。.在Stroke面板中，找到AlignStroke.选择中间的AlignStrokeToInside选项。默认情况下，笔触都是居中对齐的。笔者将稍候介绍为什么最好避免使用这个默认值。.修改X和Y位置为0..选中矩形后，选择Effect>Stylize>RoundCorners：.指定角的半径为22px,.保存为没有私有数据的FXG..清理FXG导出FXG文件后，你可能希望清理一些不需要的标签，例如多余的Group标签或者私有的命名空间数据。这个步骤不是必须的，不过这样做可以让你的FXG更容易让人理解。RoundedButtonExport.fxg<?xmlversion="1.0'*encoding="utf-8M?><Graphicversion»M2.0°viewHeight="800"viewWidth="480*'ai:appVersion=M99"ATE:version=M1.0.0**flm:version='*1.0.O**d:using=,'MxmIns="/fxg/2008**xmIns:ATE=M/ate/2009"xmlns:ai="/ai/2009*'xmIns:d='*/fxg/2008/dt"xmlns:fIm="/fIame/2008"><GradientEntry<GradientEntry<GradientEntry<GradientEntry<GradientEntry<GradientEntry<GradientEntry<GradientEntry431989.8999021.5<GradientEntry<GradientEntry<GradientEntry<GradientEntry<Library/><Groupai:seqlD='T'd:layerType=''page"d二pageHeight="800"d;pageW】dth="480"cktype="layer“d二userLabel="ArtboardV><Groupai:seqlD=M2Md:type="layer'*d:userLabel=MLayer1M><Groupai:seqlD='*3MfIm:knockout="faIse"d:type="layer"d:userLabeIRoundedButton"><Groupai:seqlD='*4**fIm:knockout=MfaIse"><Pathx="0.5"y=Twinding«"nonZerovvai:seqlD=,,5,*data="M21.543C9.6450243033.355021.509.645029.64502021.50L197.50C209.35502199.6450221921.521933.355209.35543197.543L21.543Z”><LinearGradientx="109_5"y="0"scaleX="430rotation='>90,*>ratio="0'*color=,'#F0F0F0V>ratio="0.478788”coIor="#C8C8C8,,/>ratio="0.50303'*coIor="#BBBBBB”/>ratio="1Mcolor=M#FOFOFO'*/></LinearGradient></Path><Pathwinding="nonZero,*ai:seqlD="6"data="M1981C209.58121910.42042192221933.5796209.5843L2243C10.420443133.5796122110.420410.42041221L1981M1980220C9.8999009.8999022034.1001442244L19844C210.14422034.1001220222209.8999210.101980L1980Z"><SolidColorcolor=,,#DDDDDD',/></Path></Group></Group></Group></Group><Private/></Graphic>RoundedButtonCIeanup.fxg<?xmlversion="1.0Mencoding="utf-8,,?><Graphicversion='*2.0'*xmIns="/fxg/2008'>><Pathx="0.5"y=Twinding="nonZeroMdata=MM21.543C9.6450243033.355021.509.645029.645020L197.50C209.35502199.6450221921.521933.355209.35543197.543L21.543Z”><LinearGradientx="109.5"y="0'，scaleX=',43'*rotation=',90°>ratio="0Mcolor=*,#FOFOFO'V>ratio="0.478788"coIor=',#C8C8C8,,/>ratio='*0.50303”coIratio="1Mcolor="#FOFOFOM/></LinearGradient></Path><Pathwindingz='^nonZero"data=MM1981C209.58121910.42042192221933.5796209.584319843L2243C10.420443133.5796122110.420410.42041221L1981M1980220C9.8999009.8999022034.10019.8999442244L19844C210.14422034.1001220222209.8999210.101980L1980Z"><SolidColorcolor=M#DDDDDDV></Path></Graphic>测试FXG导出和清理FXG之后，你可以把它丢进一个MXML文件中，用设计视图预览，从而快速的验证它是否工作。尝试以下步骤：.在FlashBuilder中新建一个项目（可以命名为任何名字）。.在源代码文件夹中加入FXG文件。.切换到设计视图组件面板将会把FXG文件显示为•个自定义组件。.拖拽这个组件到设计区域.你可以看到FXG被渲染成原本的大小。.在设计视图中，尝试改变FXG的宽度。你将发现圆角在水平方向拉伸（见图1）,但你希望看到的应该是圆角的形状保持不变,而是让图形的中间部分拉伸。为此,需要为FXG加入伸缩网格信息。1回8aw»[ OwicK1回8aw»[ OwicK /1।Bin|||1WV,田田■二二=□|图.缺少伸缩网格数据手工添加scalegrids为让grid伸缩适当的伸缩，你需要添加网格的左、右、上和下的位置信息.因为使用（RoundComers风格化选项，我们知道当前的半径是22Px.有了这些信息，你可以打开FlashBuilder,对FXG文件做如卜修改：1.在＜Graphic＞根标签中添加scaleGridLeft="22''和scaleGridRight=''198px”（图形的完整宽度是220px）你还需要确保边界的笔锋没有伸缩。2.在同一个标签中，为这个图形添加scaleGr^dTop="1px"和scaleGridBottom="43px”（图形的完整高度是44px）注意:对于有些图熟很难找到任意路径上的精确起始点。这种情况卜；请使用Illustrator的选择工具去覆盖一个锚点，从而找到它的坐标（见图2九FileEditObjectTypeSelectEffectViewWindow>■FileEditObjectTypeSelectEffectViewWindow>■<、s/T\:j，/口夕二M・2..I图在Graphic根标签添加网格数据之后，置看一下设计视图中的新FXG,你会发现没有什么变化。因为路径信息并没有填满图形的全部尺寸，所以伸缩网格没有变化。.为了修复这个问题，如下所示，添加•个透明的Rect占据整个图形空间。.将刚做的修改保存为RoundedButton.fxg.RoundedButton.fxg<?xmlversion="1.0°encoding=*'utf-8M?><Graphicversion='*2.0MxmIns=,,/fxg/2008MscaleGridLeft=',22MscaleGridRight=,,198,,sealeGridTop="1"seaIeGridBottom=,,43,,><Pathx="0.5"y='T,winding^nonZero"data="M21.543C9.6450243033.355021.509.645029.64502021.50L197.50C209.35502199.6450221921.521933.355209.35543197.543L21.543Z”><fill><GradientEntry<GradientEntry<GradientEntry<GradientEntry<LinearGradientx=',109.5"y='，0"scaleX="43"rotation="90'，>ratio="0',color="#FOFOFO'V>ratio="0.478788"coIor="#C8c8c8”/>rati<GradientEntry<GradientEntry<GradientEntry<GradientEntry</LinearGradient></Path><Pathwinding=',nonZero"data='*M1981C209.58121910.42042192221933.5796209.584319843L2243C10.420443133.5796122110.420410.42041221L1981M1980220C9.8999009.8999022034.10019.8999442244L19844C210.14422034.1001220222209.8999210.101980L1980Z"><SolidColorcolor="#DDDDDD”/></Path><!--scalegridfix--><Rectx="0"y="0"width="220Mheight=',44M><SolidColorcolor='*#000000"alpha="0M/></Rect></Graphic>现在，设计视图中的Button应该伸缩自如了。（见图3）图3.添加了伸缩网格后的组件。教程步骤2：创建皮肤类基于现有的MobiIe主题，创建一个新的Button皮肤的过程氛围3个主要步骤。.新建•个spark.skins.mobile-ButtonSkfn的子类。.在构造函数中，设置FXG类的upBorderSkin和downBorderSkin属性。注意，这些是类实行，而不是FXG的实例。同样，为FXG的尺寸信息设置measuredDefaultHeight和measuredDefauItWidth属性(参考下面的代码片段)。.用CSS或者XML设置Button的skinClass属性。注意:这个项目的示例文件中包含RoundedButtonSkinProject.fxp您可以将这个文件导入FlashBuilder.杳看完整的应用程序(包括皮肤在内)是如何实现的.关于chromeColor样式，你有3个选择：不支持chromeColor重载drawBackground().不作任何事情绘制chromeColor,使其符合FXG图形-重载drawBackground(),用代码绘制chromeColor-并且为FXG添加alpha值，使得chromeColor可见。为chromeColor填色-垂载drawBackgroundO,用工具方法applyColorTransform。将FXG从基色转变为特定的chromeColor这个例广演示了第三种方法。卜面的代码是皮肤的最终实现。RoundedButtonSkin.aspackageskins(importskins.assets.RoundedButton;importspark.skins.mobiIe.ButtonSkin;publicclassRoundedButtonSkinextendsButtonSkin(privatevarcolorizedzBoolean=false;publicfunctionRoundedButtonSkin(){super();//replaceFXGassetclassesupBorderSkin=skins.assets.RoundedButton;downBorderSkin=skins.assets.RoundedButton;measuredDefauItHeight=44;measuredDefauItWidth=220;)overrideprotectedfunctiondrawBackground(unscaIedWidth:Number,unscaledHeight:Number):void{//omitcalItosuper.drawBackground()toapplytintinsteadanddon*tdrawfillvarchromeColorzuint=getStyle(MchromeColor°);if(colorized||(chromeColor!=OxDDDDDD)){//applytintinsteadoffi11applyColorTransform(border,OxDDDDDD,chromeColor);//ifwerestoretooriginalcolor,unsetcolorizedcolorized=(chromeColor!=OxDDDDDD);}}教程步骤3:测试卜面的代码将定制过的RoundedButtonSkin设置为Button的默认皮肤。为了演示chromeColor和CSS,作者在此为Buttondown状态加入了一些样式.<fx:Style>@namespaces"Iibrary:///fIex/sparkM;s|Button{skinCIass:CIassReference("skins.RoundedButtonSkin'f);)s|Button:down{chromeColor:#OOOOFF;color:#FFFFFF;textShadowColor:#000000;}</fx:Style>在应用程序中添加一些Button后，你应该能看到他们的新皮肤在弹起和按下时的不同状态（见图4）0down状态时的皮肤表明CSS样式己经起作用了。图4.拥仃新皮肤的ButtonFXG提示与技巧在处理FXG时，请记住卜列注意事项。路径vs原始图形路径信息并不总是很容易找到，但有些情况下，路径还可能与一些反锯齿的元素渲染在一起，你每次需要获得的路径信息总是不同的。当你在I"ustrator中难以获取路衿信息时，不要立刻就期望简化原始图形。blendMode图形元素的blendMode属性默认是设置为自动的°当它是aut。时候，FlashPlayer或者AIR运行时将会正确的判断出元素本身是否需要根据alpha值使用blendMode层。尽可能避免笔触通常情况下，笔触会横跨图形的边缘（例如，在Illustrator中使用”笔触居中对其”）举例来说，画保从（0,0）到（0,100）的条线，它有1个像素宽的笔触。该笔触将会从X轴的-.5延展到.5.但是由于在小数位的像素空间内无法绘制任何东西，Flash将会画一条反锯齿的2个像素宽的线，正好占据该小数宽度位置。为了消除反锯齿的干扰，画图形的时候使用奇数做为笔触大小，使得它能有半个像素的边界。例如，一个占据（10,10）位置的、1个像素宽的SolidColorStroke笔触，应该实际占位在（10.5,10.5）尽可能使用填充矩形，而非有邕触的矩形和线条。如果必须使用有笔触的填充矩形，那可以尝试把它分位两个填充矩形（假设填充万全不透明）。如果要画个条线，尝试把它转变为一个填充矩形，例如，如果要画一条水平直线，可以创建一个高度等同于线条笔触的填充矩形。伸缩网格在用FXG设计图形时，必须考虑到伸缩网格的一些局限。伸缩网格的值必须在图形的边界之内，并且不能，特性边界重合（也就是说，左边界scaleGridLeft<scaleGridRight<右边界）.如果图形包含Group元素，就不能用伸缩网格.如果元素使用了alpha属性，伸缩网格也不能使用。所以，只在量触和填充元素上应用alpha。FXG规范FXG的完整规范，请参考《FXG2.0-功能与设计规范》更多信息做为一名移动平台皮肤开发者，你应该花点时间去熟悉Flex4.5SDK源代码中的MobileSkin基类和默认的移动皮肤。可以在FlashBuilder的安装目录中找到源代码文件；例如，/AdobeFlashBuilder4.5/sdks/4.5.0/frameworks/projects/mobiIethemen这个系列文章的下一篇将介绍如何创建DPI感知的皮肤，以适应跨不同大小屏幕的要求。最后一篇文章将涉及基于目标平台使用CSS媒体查询创建自定义的主题.在这个讨论创建Flex移动skin的系列的第1部分中，我讨论了Flex团队在Mobile主题中所做的性能优化的原理，提供「一个以性能为主要关注点的简单Buttonskin示例。移动skin领域的下一个主要主题是，针对当今可用的各种移动屏幕调整应用程序的外观和感觉。Flex4.5增加了•些新特性以支持像素密度不同的移动设备：像素密度也称为每英寸像素数（PPI）或每英寸点数（DPI）U这些特性包括应用程序缩放、多DPI位图、基于CSS@media查询的样式规则和与DPI相关的Mobile主题。为什么要关注屏幕像素密度？如果您原来从事案面Flex开发，可能想知道为什么应该关注屏幕像素密度。当今的移动设备具有不同的大小和屏幕DPI（见表1）.在桌面环境中，屏驿大小也不一致，但是DPI值大体上是相似的。因此，通常根据像素尺寸设计（本机或基于浏览器的）桌面应用程序.表1.移动设备分辨率、大小和DPI值的示例生产商设备分辨率（px）屏幕对角线长度（in）DPIAppleiPhone4,iPod4960X6403.5326AppleiPad1,iPad2>1024x7689.7132BlackBerryPlayBook1024x6007170HTCEvo800X4804.3217MotorolaAtrix960x5404275MotorolaXoom1280x80010.1150SamsungGalaxyTab1024x6007170关键是一些设备在相同的物理空间中容纳的像素多得多。如果设计一个大小为80x80像素的按钮，这个按钮在160DPI的设备（比如BlackBerryPlayBook或SamsungGalaxyTab）上显示为边长大约0.5英寸的正方形。如果在DPI值更高的设备（比如iPhone4）上运行相同的应用程序，这个按钮的边长现在是0.25英儿很难通过触摸屏操作它.同样的原理也适用于字体大小选择、基于像素的布局、位图图像等方面。屏繇上任何元素的位置和大小都需要根据屏幕的DPI来设置。如果不解决屏幕像素密度问题，应用程序在许多移动设备上会太大或太小。Flex4.5引入了几个新特性以解决屏幕像素密度问题,开发人员可以使用方便的自动应用程序缩放，也可以使用与密度相关的图像和逻辑人工地管理设计保真度和控制能力.自动应用程序缩放Flex4.5支持DPI分类。设备的像素密度范围很宽，为了进行布局，有必要对它们分类；例如，238DPI或249DPI的屏幕基本上与240DPI的设备相当。Flex支持三个DPI类别：160、240和320。Application类及其子类中增加了新的applicadonDPI属性。当把这个属性设置为以上DPI类别之一时，应该针对这个DPI设计布局。如果应用程序在DPI类别不同的设备上运行，整个应用程序会自动地缩放,让UI在此设备上以大体相同的物理大小出现。本文的示例文件包含TwitterTrendsFinal.fxp.在这个示例项目中，applicationDPI设置为160.针对160DPI屏幕适当地确定了各个布局值的大小（比如TweetsView列表中的iconWidth和iconHeight以及UserInfoView中的padding/gaps）。在160DPI设备上（比如MotorolaDroidPro）,应用程序采用指定的大小。在240DPI设备上（比如DroidX或Droid2）,应用程序统•地放大50%c图1按绝对像素数对比160DPI屏幕与240DPI屏幕的大小.图2显示相同的屏幕截图，但是240DPI图像已经变小了，显示相近的物理大小。但是，在MXML和ActionScript代码中，所有的值还是原来针对160DPI的值：在stage级上应用缩放。图1.320x480160DPI（左）和480x800240DPI（右）上的实际像素TvdttorTrendsTwitterTrends图2.320x480160DPI（左）和480x800240DPI（右）上的物理大小注意，由于矢量绘制会产生痕迹，•般来说最好是放大而不是缩小。因此，最好针时低的密度(比如160DPI)进行设计，止应用程序在高密度设薪上放大。与密度相关的位图在使用applicationDPI根据不同的密度自动地缩放应用程序时，矢量缩放并不包括文本；而是缩放字体大小，从而以不同的大小配示保真度很高的文本-但是，位图会被缩没这并不好，因为放大位图通常会产生不可接受的痕迹为了缓解这个问题Flex4.5引入了新的MuItiDPIBitmapsource类。这个类有三个属性(soureel60dpi,source240dpi和source320dpi)o它根据实际的DPI为每个设备使用最合适的位图。例如，假设一个按钮图标在160DPI设备上应该是24x24,并不把一个图像直接指定为Button组件的icon属性，而是把icon属性设置为一个MultiDPIBitmapSource实例，这个实例还引用在240DPI上使用的36x36图标和在320DPI上使用的48x48图标.代码如下：<s:Button><s:icon><s:MultiDPIBitmapSourcesource160dpi=,,@Embed(•/assets/refreshl60.png・)”source240dpi='*@Embed("/assets/refresh240.png*)**source320dpi=',@Embed(•/assets/refresh320.png•)”/></s:icon></s:Button>维续以上场景,假设已经把applicationDPI设置为160,应用程序在320DPI设备上运行。尽管矢量会放大100%,但是如果指定了多DPI位图，Flex不会把160DPI位图放大100%：相反，会使用320DPI位图并对此位图进行适当的转换，让它以适当的大小出现，它的所有像素都不缩放。在能舔使用嵌入的或动态装载的图像引用的几乎任何地方，都可以指定Mu11iDPIBitmapSource对象 例如，作为Image的source属性或作为Button的icon属性。一个例外是，不能使用MuitiDPIBitmapSource对象作为应用程序的快闪屏；在这种情况下，需要指定高分辨率位图，让Flex对于低密度设备缩小它。应用程序缩放总结和考虑因素如果希望使用应用程序缩放，就需要：针对您指定的叩plicationDPI值，创建一套skin和视图/组件布晶Adobe建议使用160值，通过乘以1.5和2分别放大到240DPI和320DPI.对于在skin中或应用程序中其他地方使用的任何位图资产，创建多个版本并使用MultiDPIBitmapSource指定它们.如果使用应用程序缩放，skin中的矢量资产和文本不需要与密度相关联.忽略@media规则，因为应用程序只需要考虑一种目标DPL在不同密度的设备上测试应用程序，确认缩放后应用程序的外观在每个设备上都是可接受的。尤其是要检查需要:非整数的缩放I为广的设备。例如，如果applicationDPI是160,应该在240DPI设备上测试应用程序。在使用缩放时可能出现的缺陷是，可能有可以看出来的痕迹。当缩放因子不是整数时（例如160乘以1.5到240）,在某些情况下矢量资产上会出现可以看出来的痕迹。尤其是，根据线条宽度、线条对齐和FlashPlayer执行的像素snapping.线条可能出现模糊或略微偏移。文本和位图一般没问题。文本应该不会显示出任何痕迹，因为文本是通过缩放字体大小值缩放的，而不是通过缩放实际的矢量。如果使用MultiDPIBitmapSource为每个DPI指定适当的位图，位图应该不会显示出缩放痕迹。在实践中,Flex团队对比了使用放大到240DPI的160DPIskin与使用未缩放的240DPIskin的效果，只发现了非常小的可见差异。对于大多数应用程序，这种方法的效果应该很好，不需要改进了。但是，如果发现缩放产生了不可接受的痕迹，或者由于其他原因需要更细致地控制应用程序在不同密度的设符上的行为，那么可以按下•节中的说明人1：地管理密度。与密度相关的skin和样式如果没有显式地设置applicationDPI.它的值会设置为设备的DPI类别Flex4.5附带的MobiIe主题根据applicationDPI值选择适当的图像类，以及确定组件skin的位置和大小。对于不由skin控制的元素，比如布局元素，应用程序应该根据不同的密度自动地管理布局值。尤其是，应该在运行时根据applicationDPI动态地计算代码中的所有像素值（通过命令式代码或数据绑定），还应该对位图使用MultiDPIBitmapSource.通过CSS@fnedia查询实现与密度相关的样式Flex4.5引入了•套有限的CSS媒体直询功能，可以使用它们声明只应用于特定密度的CSS规则。例如，Mobile主题使用与DPI相关的规则指定ActionBar标题的默认字体大小：ActionBar#titleDisplay{fontsize:24pt;}@medaa（application-dpi:160）ActionBar#titleDisplay{fontsize:18pt;}@media(application-dpi:320){ActionBar#titleDisplay{fontSize:36pt;}第一个规则适用于240DPI：对于160DPI和320DPI,另两个规则箱盖第一个规则。用来匹配这些©media规则的DPI类别是应用程序当前的有效DPI。如果在ApplScation标记中设置了applicationDPL就使用它的值；否则.使用与设备的runtimeDPI对应的DPI类别。例如，如果appIicationDPI是160.而应用程序在320DPI设备上运行，就会选择application-dpi:160规则，这导致Flex把文本大小设置为18pt然后，文本大小自动地乘以2,所以最终显示的文本大小实际上是36pt在这里，实际上根本不会用到320DPI@media规则。但是，如果没有指定applicationDPI,应用程序在320DPI设备上运行，就会使用320DPI@media规则。与密度相关的skin和样式考虑因素如果通过不设置ApplicationapplicationDPI选择不使用自动缩放.应用程序就需要在运行时在skin和布局中读取applicationDPI值，从而判断设名的实际DPI类别。然后，蠹要使用以下技术实现与密度相关的skin和样式：针对每个运行时DPI类别，分别设计一套skin和视图/组件布局，或者设计一套根据不同密度动态调整的skin和布局Mobile主题skin采用后•种方法——每个skin类检查applicationDPI并适当地配置本身。使用@media根据设备的DPI类别选择CSS规则.通常，为每个DPI定制字体大小和padding值。对于在skin中或应用程序中其他地方使用的任何位图资产，创建多个版本并使用MultiDPIBitmapSource指定它仅如果使用应用程序缩放skin中的矢量资产和文木不需要与密度相关联.在不同密度的设备上测试应用程序，确认skin和布局会适当地调整.FlashBuilder4.5设备配置FlashBuilder4.5在DesignView中和在启动AdobeDebugLauncher(ADL)实用程序时支持与密度相关的Flex4.5特性。尽管在DesignView中预览或用ADL模拟既快乂简便，但是在设备I二启动应用程序会最精确地反映应用程序的外观。在FlashBuilder中创建新的移动项目当在FlashBuilder中创建FlexMobile项目时，可以在项目向导中启用自动缩放。创建项目之后，随时可以通过编辑应用程序文件添加(或删除)applicationDPI在FlashBuilder中编写应用程序FlashBuilder4.5还包含个新的DeviceConfigurations首选项页面，可以使用它为任意设备指定像素密度和分辨率。内置的配置已经为相应的设各指定了适当的像素密度和分辨率。这意味着，在DesignView中选择要预览的设备或者使用ADL在桌面上启动应用程序时，会适当地模拟在此设备上运行应用程序的情况。例如，如果applicationDPI是160并在DesignView中选择GoogleNexusS作为预览设备，那么DesignView会把应用程序放大50%.按NexusS的尺寸显示它。这意味着,Flex代码中的1像素现在对应于DesignView中的1.5像素（见图3）。图3.在DesignView中使用设备配置自动缩放并不影响在PropertiesView中做的编辑，因为这些编辑实际上修改底层代码。例如，在上面的场景中，如果在PropertiesView中把一个组件的宽度设置为100,它在DesignView中显示的宽度实际上是150像素，这符合在240DPI设备上的情况。同样，如果使用模拟NexusS的ADL在桌面上运行应用程序，也会把应用程序放大50%,按它在NexusS屏幕上的正确尺寸显示它。DesignView和ADL还会正确地显示©media查询和Mu11iDPIBitmapSource的效果。可以使用PropertiesView在支持的任何地方设置多分辨率位图。为此，选择一个组件（比如Button）£在PropertiesView中icon设置的旁边，浏览文件夹图标现在是一个下拉列表，可以通过它选择使用单一位图还是多分辨率位图。选择后者就会打开一个对话框，可以使用它为每个DPI类别指定位图（见图4）.、18S.juMCMMM/MmMMKW) ":》—)、 (CW«)C<MJ图4.MultiresolutionBitmap对话框测试如果您有像素密度不同的设名，可以自己试试这些密度独立特性.例如，如果您有MotorolaDroidPro或SamsungGalaxyTab(DPICIassification160)和更先进的Android手机(DPICIassification240).可以编写一个应用程序并把appIicationDPI设置为160,在两个手机上运行它.对比运行效果,应该会看到UI组件的大小在两个设备上很接近。(当然，GalaxyTab的屏幕史大，所以在这种情况下整个UI的大小比在手机上大。)如果没有像素密度不同的手机，通过使用FlashBuilder在桌面上运行应用程序，仍然可以试验这些特性。例如，FlashBuilder4.5现在有针对DroidPro的内置设％配置。只需在RunConfigurations(见图5)或DebugConfigurations对话框中选择这个设备配置。ADL会把设备配置中指定的屏幕像素密度传递给Flex应用程序，所以会模拟在此设备上应该出现的缩放行为。

图5.RunConfigurations对话框与密度相关的Buttonskin教程因为自动缩放需要做的工作很少，本文的教程主要关注编写与密度相关的skin所需的步骤，目标是在每个DPI上显示保真度很高的图像.因此，我们将使用一个按钮图像的三个版本一在本系列的第1部分中创建了一个圆痢的药片形状的按钮,但是本教程只使用老式的按钮图像.为了简单.这里省略Adobe11lustrator细节.步骤1：创建FXG图像对于本教程，可以使用DensItySpecificButtonTutorial.fxp示例项目中现成的图像（见图6%可以在skins.assets160包中找到这些FXG文件.Button图6.透明的圆角按钮我在第1部分中讨论过使用IllustratorCS5创建FXG文件的基本知识。为。密度相关的skin创建图像还需要做一些工作，包括：针对160、240和320DPI值，缩放原来的图像。先创建160DPI图像，然后在Illustrator中使用缩放因「转换它。为悠个DPI更新刻度网格信息。您可能想知道,既然可以在运行时通过程序缩放图像，为什么要在Illustrator中缩放”有两个原因：设计保真度——设计者可能会发现简单地缩放160DPI图像是不可接受的.对于更高的DPI,可能需要改进细的线条、角半径参数、像素snapping或形状详细信息。复杂性——同时应用缩放（对于DPI）和大小调整转换（使用刻度网格数据缩小/放大）会增加复杂性。可以使用更简单、更可预测的方式实现用刻度网格调整大小的与DPI相关的图像，在Illustrator中缩放图像非常简单（见图7）：图7.Adobe11lustratorCS5中的TransformPanel.在工具栏中找到TransformPanel.按缩放因子调整宽度和高度值。如果以160DPI图像为基础，对于240和320DPI分别乘以1.5和2、.检查图像并做必要的修改。在MobiIe主题库中，图像资产根据DPI值组织在包中。在mobiIetheme,swc中的spark.skins.assets16Qspark.skins.assets240和spark,skins.assets320包中可以找到图像资产。在实践中，为了通过设计检查，在缩放后需要做一些小的设计调整，尤其是对细线条的宽度。在缩放后可能不需要任何修改，但是最好检查-下。缩放看似很简单，但是也有要处理的问题。在缩放示例项目中的160DPI图像时，对于240和320DPI值，Illustrator会分别把外线条的x和y位置从半像素对齐（0.5,0.5）移动到（0.75,0.75）和（1,1）.如果希望细线条对于所有三个DPI值都保持像素snapping,必须把x和y位置调整回（0.5,0.5）并调整宽度和高度以便补偿。在开始处理Actionscriptskin代码之前，还需要重复第1部分中解择过的两个步骤：（可选）清理FXG以提高可读性删除组并更新刻度的格值步骤2：添加applicationDPI逻辑有了与DPI相关的FXG图像和包结构之后，可以根据applicationDPI的值调整skin中的图像MobileSkin基类作为属性公开applicationDPL.在构造函数中初始化图像类，如下所示publicclassTransparentRoundedButtonSkinextendsButtonSkin(publicfunctionTransparentRoundedButtonSkin()(super();switch(applicationDPI){caseDPICIassification.DPI_320:(upBorderSkin=skins.assets320.TransparentRoundedButton_up;downBorderSkin=skins.assets320.TransparentRoundedButton_down;break;}caseDPICIassification.DPl_240:(upBorderSkin=skins.assets240.TransparentRoundedButton_up;downBorderSkin=skins.assets240.TransparentRoundedButton_down;break;)default:{//defaultDPI_160upBorderSkin=skins.assetsl60.TransparentRoundedButton_up;downBorderSkin=skins.assetsl60.TransparentRoundedButton_down;break;}}})步骤3：为每个DPI类别添加CSS@media规则到目前为止，过程与第1部分中的skin实现过程差异不大。这是好消息！实现Buttonskin的最后•步是根据DPI类别选择适当的字体大小。mobiletheme.swcdefaults.css文件已经指定了一个全局样式，它设置默认的全局字体大小，如卜所示：160DPI-16240DPI-24320DPI-32要想覆盖默认的字体大小，应该在CSS文件或fx：style块中创建新的样式规则，例如：@media(application-dpi:160)(Button(fontSize:20;}}@media(application-dpi:240){Button(fontSize:30;}}@media(application-dpi:320)(Button{fontSize:40;})与密度相关的快闪屏教程Flex4.5框架引入了在移动应用程序启动时显示快闪屏的功能。这个特性让开发人员可以定制应用程序的启动体验，比如在Flex应用程序初始化时显示徽标等品牌信息。显示快闪屏很简单而且适用于所有FlexApplication类(Application,ViewNavigatorApplScation和TabbedViewNavigatorAppIication)u要想启用这个特性，只需在主AppIication文件中把spIashScreenImage属性设置为一个嵌入的图像。<?xmlversion4”.0"encoding="utf-8M?><s:AppIacationxmlns:fx="/mxmI/2009"xmlns:s=MIibrary:///fIex/spark"spIashScreenImage=,,@Embed(•assets/SpIashScreen.png*)"splashScreenMinimumDispIayTime=,,2000,,spIashScreenScaIeMode=,,zoom**></s:AppIication>上面的示例让应用程序在后动时显示SplashScreen.png图像应用程序完全装载之后，图像消失，用户可以开始使用应用程序。应用程序可以使用spIashScreenMinimumDispIayTime属性也快闪屏至少持续显示指定的时间。这样可以确保即使是在很快的设备匕图像也会显示一定的时间。正如本文中指出的,移动开发的主要难题之是，开发出的应用程序要能筋适应不同的设备。因为每种设备的特征不样，应用程序可能需要调整用户界面，才能产生理想的体验。设备的在要差异之一是屏幕分辨率。因为每种设备支持不同的屏幕分辨率，很难创建在所有设备上都恰当地显示的单一图像。为了帮助解决这个问题，快闪屏支持根据设备的分辨率调整本身大小的功能。开发人员可以使用splashScreenScaleMode属性选择快闪屏的缩放行为。有效值是：none（默认）：快闪屏不缩放，但是会居中。lettertxjx：快闪屏在保持高宽比的情况下缩放到设备的可用屏幕大小。stretch：快闪屏缩放到填满屏恭。不保持高宽比。zoom：快闪屏在保持高宽比的情况下缩放到完全填满可用的屏幕大小。因此，图像的一部分可能会超出屏繇的边界.定制快闪屏以支持DPI缩放快闪屏有助于在某些设备上产生很好的体验，但是如果屏幕之间像素密度不一样，仅仅改变图像大小不一定能够产生最好的效果。在某些设备上，缩放会导致图像太大、太小或扭曲。另外，缩放有时候会产生可见的痕迹和pixilation如果需要进•步控制，应用程序可能希望根据设备的像素密度显示不同的快闪图像。这会提供更精细的体验，产生更好的效果。通过编写定制的快闪屏预装载器，可以轻松地扩展框架以支持这个需求。预装载器可以决定在应用程序启动时要显示哪个图像。下面是实现过程：步骤1：创建一个扩展spark.preIoaders.SpIashScreen组件的定制对象并嵌入图像资产package{importspark.preIoaders.SpIashScreen;pubIicclassMu11iDPISpIashScreenextendsSplashScreen([Embed(source="assets/splash160.png")]privatevarSpIashImagel60:CIass;[Embed(source=**assets/spIash240.png*')]privatevarSpIashImage240:CIass;[Embed(source=**assets/spIash320.png*')]privatevarSpIashImage320:CIass;pubIicfunctionMu11iDPISpIashScreen()super();步骤2：覆盖getImageCIass方法并根据设备的DPI返回适当的嵌入资产package(importspark.preIoaders.SpIashScreen;importmx.core.DPICIassificataon;importmx.core.mx_internal;usenamespacemx_internal;publicclassMu11iDPISpIashScreenextendsSpIashScreen{[Embed(source="assets/spIash160.png*')]privatevarSpIashImagel60:CIass;[Embed(source=Massets/spIash240.png")]privatevarSpIashImage240:GIass;[Embed(source=^assets/spIash320.png*')]privatevarSpIashImage320:CIass;publicfunctionMu11iDPISpIashScreen(){super();}overridemx_internalfunctiongetlmageClass(dpizNumber,aspectRatio:String):Class{if(dpi==DPICIassification.DPI_160)returnSplashImagel60;elseif(dpi==DPICIassifScation.DPI_240)returnSplashlmage240;elseif(dpi==DPICIassification.DPl_320)returnSpIashImage320;returnnulI;步骤3：指定自己的定制快闪屏预装教器作为应用程序的预装教器<?xmlversion="1.0',encoding="utf-8,,?><s:AppIicationxmlns:fx="/mxmI/2009MxmIns:s=**Iibrary:///fIex/spark"preIoader="MuItiDPISpIashScreen,,></s:Application>当定制的预装载器运行时，它根据设备的DPI显示不同的联入资产。注意，在getImageCIass方法中还可以实现各种其他逻辑-例如，可以扩展上面的示例，使用aspectRatio参数和stage尺寸根据设备的方向和应用程序是否在平板电脑上运行显示不同的图像。后续内容在用Flex4.5设计多屏幕应用程序时，可以在方便与完美的像素控制之间做出选择。在构建应用程序之前，考虑屏幕像素箔度对设计的影响，尽可能使用Flex提供的工具。本系列的箜讨论主题的编写和与平台相关的skin在关于创建Flex移动皮肤系列文堂的第:部"里,我们讨论了屏幕密度(DPI)对组件皮肤以及移动应用布局所带来的影响。我还展示了如何使用缩放应用，特定密度的位图，以及CSS元媒介查询以调整和适应多种DPI值。除了屏幕尺寸，屏幕密度以及外形差异以外，Flex移动应用开发者必须在着聿于各个平台之间的不同点。除了Android系统以外，Flex4.5J以及FlashBuiIder4.5.1还支持两个目标为FlexMobile项目的平台：苹果的iOS以及黑莓的TabletOS。这些平台都有各自独特的外观，用户体验.UI图案，以及人机接口规范(HIG)oFlex4.5中的移动主题并不会偏向于任何一个特定的平台。就像Spark那样，移动主题具有中性的外观以及感觉，其设计元盍可以工作于各个平台。根据您的需求以及客户的需求，可以利用CSS样式快速而自由地改变应用程序的外观.或者您还可以使用更加高级的机制，比如自定义皮肤，FXG,或者特定于平台的皮肤，与其它原本的应用程序结合使用，从而获得更多的控制余地。显著的平台差异AIR所支持的每一个平台均具有独特的特点，特质以及挑战。Flex4.5.1占据了这些挑战中的一部分，并且让用户可以在必需的时候添加新的，特定于平台的行为。本部分将简单地涵盖那些将会影响应用程序的可视化设计以及行为设计的平台之间的主:要不同点。硬件按钮Android上的AIR添加了对Android硬件上键盘按钮的支持：主页键,返回键，菜单键以及搜索键.这些按钮可以是实实在在的硬件按钮，也可以是通过触摸屏显示出来的按钮。某些设备制造商可能会忽略搜索按钮.Android上的返回按钮用于导航回到上一个活动,即便该活动并非当前应用程序的一部分。iOS设备以及黑莓的PlayBook并不具备这样的返【可按车(相反，iOS和PlayBook的一个典型的应用可以在屏幕的左上方放置一个返回的软按健„对于这两个平台，返回键的导航功能是局限在每个应用程序本身的.Android上的菜单按钮将会打开一个选项菜单（即是Flex4.5上的ViewMenu移动组件）。选项菜单中会显示一个可用于当前活动的命令（作为按钮）列表.在iOS中功能最接近的组件应该就是活动表了。活动表能以列表的形式显示当前活跳或者当前已选择的条目的可用活动。黑莓的PlayBook配备有•个触控的边框，应用程序可以通过该边框显示•个包含任意控件的容曙。Android上的搜索按钮通常使用在应用程序上下文的数据搜索当中.比如，一个联系人应用程序就需要提供一个文本搜索功能，以筛选联系人的数据信息。Android上的搜索操作对于所有应用程序均具有一致的外观和感觉。iOS叮黑莓的Tablet操作系统均不具备针对于特定应用程序的搜索UI设计元素.可用的屏幕面积Android2.x以及80S在应用程序顶部仅显示有•个状态栏，当应用程序进入全屏模式时，该状态栏便会隐藏。在AndroGd3.xHoneycomb 屏幕底部的状态栏总是可见的，无论是否处T•全屏状态下.对于黑莓PlayBook上的应用程序，默认均运行在全屏模式下。从右上角滑下便可以显示系统状态栏，但这并不会重设AIR应用程序窗11的大小。活版印刷AIR中所使用的默认sansserif设备字体会根据设备的不同而有所不同,PlayBook将使用MyriadPro.而80S则使用Helvetica,Android使用DroidSans：为了清晰起见，即使在不同的设备上使用相同的字体尺寸以及相同的DPI.其字体度量也会因为所使用的字体不同而有所不同,在给定的面枳中,用户所能够放置的文本总量会因为屏林尺寸以及平台的不同而有所不同（参见图1）。RexDiaynoftks•M令 219PM ■FtoxDiagnosticsC»pab«Mi>• ..1c&20PMF・xDiagnosticsFullS<rwnRexDiaynoftks•M令 219PM ■FtoxDiagnosticsC»pab«Mi>• ..1c&20PMF・xDiagnosticsFullS<rwn，M»«4MtormstoMAMI 4MtNatrnwAppkcationn«Mv«A0p*cat>onrut*.t«noApplmoonjtionOFI240图1,左图为黑里的PlayBook（横向，cropped）,中图为苹果iPod第四代（portrait）,右图为三星GalaxyS（纵向）使用了Flex移动主题的默认样式.在各个平台上，单行的文本内容通常会中央上升（也就是说，不包括文本高度的卜行字母）.移动主题里的皮肤还会使用中央上升。软键盘全部三个平台的纵向以及横向情况下均支持使用软键盘。然而，许多Android手机拥仃一个固定的硬件键盘而不是软键盘（例如，摩托罗拉DroidPro）,而其它的一些Android手机具备可选的硬件键盘，可开启用于取代软键盘。Android「•机还允许使用第三方的软键盘。比如，Swype和SwiftKey键盘便nJ'以与AIR无缝集成。软键盘的尺寸随着平台，设备，甚至设备方位的不同而有所差异。但无论设备的方位如何,全部三个平台所使用的软键盘均与屏幕底部的边缘时齐。默认情况下，当软键盘被激活或停用时，在FlashBuilder中所创建的Flex移动项目均会自动配置以缩小或扩大应用程序的高度,文本输入在Android和黑港的PlayBook平台中，AIR应用程序的TextField以及新的StyleableTextField控件中的文本输入均可正常工作。然而，这些控件在iOS中的实现却是一个特例。为了能在iOS中获得功能齐全的纠错和文本选择功能，文本编辑将会包含在一个原生的覆盖于屏幕最上方的控件之中.当在10S中编辑TextField和StyleableTextField内容时，该技术会带来一些限制，包括：在编辑时是不支持Restrict属性的。限制操作将在退出TextField之后才可以使用。在进入或者退出可编辑的TextField时，由于空白和短划线字符较小，可能会导致多行文本回流。文本无法被父级容器所指定的scrollRect属性剪切。键盘事件将不会被触发.原生的清除按钮（带有X标记的灰色圆圈）总会出现在TextInput当中，并且这是不可配置的。颜色的深浅在苹果GOS和黑莓TalbletOS中，AIR均支持32位色。而在Android中，AIR在使用RGB565时受限于16位颜色。人机界面规范每个平台供应商都具有其独特的人机接口规范（HIG）,称为UI规范。苹果iOS的人机接11规范谷歌Android的用户接口规位黑莓TabletOS的UI规范以下这些规范将有助于用户创建出外观和使用感受都与那些本土程序类似的Flex移动应用程序。特定平台的综述关于特定的平台，我仅仅触及到表面的问题。想获取关于该主题的更多信息，您可以浏览www.androidD以及D,这两个网址将持续更新它们的UI模式目录.在AIR允许设计者和开发者以通用的运行时来创建应用程序的同时,设计应用程序中很垂要的一点是，您必须清楚何时以及如何将特定于平台的不同点考虑在内。Flex移动项目为您提供了一个选择范围，从在所有平台上使用单一的UL到为每个所支持的平台重新设ilUL创建特定平台的外观和样式版本的Flex和FlashBuiIder为您在项目中定义和使用特定平台的样式和外观提供了基本工具。使用CSS媒体查询在关于创建Flex移动外观系列的第二部分中，我讨论了如何在CSS媒体查询中使用自定义的媒体功能application-dpi来设置特定的DPI样式，比如字体大小和填充值。4.5版本的Flex提供了一个额外的自定义媒体功能：os-platform.此项功能允许开发人员指定特定于平台的样式。下面是一个简单的例子，设苴一个默认的ActionBarchromeColor的数值，以及特定于Android以及特定于I0S的数值：ActionBar{chromeColor:#000000;}@media(os-platform:"Android"){ActionBar{chromeColor:#999999;/*darkgray*/}}©media(os-platform:“IOS”){ActionBar{chromeColor:#6DA482;/*blue*/)此示例代码使用了来自移动主题的默认ActionBarSkin皮肤类，并改变了chromeColor属性。您可以使用同样的技术来完全替代特定于平台的默认外观.主题的使用为特定于平台的外观使用CSS的主要缺点是，无论何种平台，所有的外观及其附属文件都将被编译到您的应用程序中。这是必要的，因为CSS媒体查询是在运行时，而不是编译时，进行计算的。最终的结果是生成一个更大的二进制文件(APK,BAR,或者IPA类型的文件)，该文件会增加下载时间和并添加到程序历史记录.获取特定于平台的外观和样式的另一种方式是，分别为每一个平台编辑应用程序，通过每次改变theme编辑器参数来覆盖不同的主题。这将赋予您特定于平台的样式，而不会增大应用程序的二进制文件尺寸.请注意：在单一的项目中，4.5.1版本的FlashBuiIder没有内置对每个平台编译器参数的支持。您有三种选择：创建您自己的编译脚本时于每个平台，每当创建项目时都要手动修改参数。将您的项目用构到共享相同基础项目和/或库的多个项目当中。第：个选项提供了最大程度的控制，为您提供更多用来添加特定平台操作的选择(例如，iOS和黑箍Talbletos中屏幕上.的返回按钮)。如果您选择以这种方式来使用主题的话,请选择一个最适合您的工作流程的构建选项。想获取更多关于Flex4.x中主题支持的信息，请参阅Flex说明文档中关上题的部分内容。ActionBar样式教程通常情况下，刻外观做出改变的最简单方法是使用CSS样式.对于这个例子，我将详细叙述之前展示的ActionBar示例样式,以加入更多•些特定于平台的细节。我正在为虚拟业务评测启动开发一个名为力。/厂的应用程序。他们希望ActionB