Flex移動(dòng)皮膚教程

Flex移動(dòng)皮膚Flex4.5提供的移動(dòng)增強(qiáng)的皮膚特性，支持觸摸交互、性能優(yōu)良，并且考慮到了內(nèi)存占用問(wèn)題,盡管目前市場(chǎng)上有不少性能優(yōu)異的設(shè)備，但典型的Spark皮膚（包括Flex4引入的默認(rèn)皮膚）卻沒(méi)有能夠在移動(dòng)設(shè)備上得到很好的應(yīng)用。Adobe為移動(dòng)優(yōu)化過(guò)的皮膚在設(shè)計(jì)時(shí)就考慮到平衡兩個(gè)對(duì)立的目標(biāo)：性能優(yōu)異卻又容易創(chuàng)建。雖然MXML皮膚在某些情況下是有用的，但Adobe還是建議遵循以下簡(jiǎn)單的方針，確保Flex4.5移動(dòng)應(yīng)用程序能夠同時(shí)滿足開(kāi)發(fā)者和最終用戶的性能要求。這是介紹Flex4.5移動(dòng)皮膚特性系列文章中的第一篇。本文將涵蓋創(chuàng)建移動(dòng)增強(qiáng)皮膚的基本知識(shí)，包括：Spark主題和Mobile主題的區(qū)別MoblleSkin基類中包含的性能優(yōu)化用FXG替代MXML圖形基FMobile主題的ButtonSkin類創(chuàng)建自定義的Button皮膚該系列文章中的余下幾篇將會(huì)介紹更多高級(jí)主題，包括：基于Mob”eSkjn基類構(gòu)建新的皮膚創(chuàng)建空間感知的皮膚，可以適應(yīng)所有屏幕尺寸使用CSS媒體查詢?yōu)槊總€(gè)平臺(tái)創(chuàng)建自定義的主題比較Spark和MobiIe主題Mobile主題基本是Flex4弓|入的Spark主題功能集的一個(gè)子集Mobile主題專門針對(duì)性能和內(nèi)存占用問(wèn)題進(jìn)行的優(yōu)化。MobileSkin基類Spark皮膚通用需要繼承Skin（它擴(kuò)展了Group）或音SparkSkin（它擴(kuò)展了Skin）.MobiIe主題里的皮膚使用一個(gè)新的基類MobileSkin,它擴(kuò)展了UIComponent狀態(tài)MobileSkin對(duì)狀態(tài)的支持是它一項(xiàng)針對(duì)移動(dòng)開(kāi)發(fā)優(yōu)化過(guò)的主要特性。一般情況3使用狀態(tài)特性（在MXML或者ActionScript）都會(huì)帶來(lái)額外的內(nèi)存和性能消耗。而MobileSkin不再用State類及廣類，而是手工的在代碼里處理狀態(tài)改變，例如SetProperty和AddChild布局因?yàn)镸obileSkin不是一個(gè)Group,它不能使用Spark的基于約束的布局。例如HorizontaILayout,VerticalLayout和BasIcLayout...MobileSkin的內(nèi)容在代碼中人工的布局。MobileSkin力口入了新的生命周期方法layoutContents。，，它在updateDisplayList（）中被調(diào)用。這個(gè)方法用于放置皮膚的子元素。FXG和MXML圖形Mobile主題中皮膚的圖形由編譯過(guò)的FXG和用于繪制的Actionscript代碼構(gòu)成。繪制代碼僅用于瑣碎的圖形或者需要支持樣式的時(shí)候。處于性能優(yōu)化的考慮，所有其他圖形都使用編譯過(guò)的FXG。MobileSkin基類不選擇使用MXML圖形，除非他們都包含在一個(gè)Group當(dāng)中。文本MobiIe主題在默認(rèn)皮膚中不會(huì)使用FlashTextEngine(FTE)或者TextLayoutFramework(TLF)。這主要是基于性能的考慮，并且為了支持原生的文本輸入和編輯。Flex4.5在mobilecomponerrts.swc中引入了一個(gè)新的StyleableTextField類。它擴(kuò)展了TextFleld.并且加入了對(duì)樣式的支持,它專門用于那些不準(zhǔn)備與MXML結(jié)合使用的移動(dòng)Actionscript皮膚和渲染器。在同時(shí)使用StyleableTextField和Label(基于FTE)時(shí)，開(kāi)發(fā)者必須嵌入字體兩次Label使用embedAsCFF=true,而TextField和StyleableTextField用embedAsCFF=faIse.Adobe不建議在移動(dòng)項(xiàng)目中使用RichEditabieText組件.請(qǐng)用TextArea組件代替.MXML和ActionScrlpt由于MobileSkin刪除「MXML皮膚的需嚶主要的申明性特性(狀態(tài)、布局和MXML圖形).Adobe建議用AcUonScript編寫(xiě)皮膚。沒(méi)有這二個(gè)特性，用MXML做聲明性的標(biāo)識(shí)已經(jīng)沒(méi)有什么優(yōu)勢(shì)了。注意:在FlashBuilder中，可以指定庫(kù)和主題的SWCs的代碼或者編譯過(guò)的ActionScrlpt皮膚，由設(shè)il視同渲染出MXML皮膚.但設(shè)計(jì)視圖不能通過(guò)指定代碼渲染Actionscript皮膚。不支持的全局樣式由于上文提到限制,Mobile主題刪除了一些樣式，包括：rollOverColor-不支持，因?yàn)榛A(chǔ)可觸屏的界面是目前主要環(huán)境。borderAlpha,borderColor,cornerRadius-不支持，因?yàn)檫@些參數(shù)是編譯過(guò)的FXG的屬性，他們不會(huì)在運(yùn)行時(shí)發(fā)生變化dropShadowVisibIe-不支持，為性能考慮，盡量減少過(guò)濾器的使用。FlashBuilder會(huì)根據(jù)當(dāng)前選擇的主題，在MXML和CSS編輯器中正確的顯示或者隱藏樣式屬性Mobile中避免使用的組件由于各種原因，某些Spark組件在Mobile主題中沒(méi)有皮膚。例如，有些組件在MobileUI下沒(méi)有什么作用,或者它根本就不足Flex4.5版本的主要目標(biāo)，可能在下一個(gè)發(fā)行版中專門為移動(dòng)平臺(tái)進(jìn)行優(yōu)化。這些組件包括：ComboBoxandDropDownListNumericStepperToggIeButtonVideoDisplayandVideoPlayerVSliderPanelTabBar(thecomponentusedinTabbedVaewNavigatorisactuallyaButtonBar)TitleWindowButton皮膚教程概述開(kāi)始使用皮膚特性的最佳方式是，基T■默認(rèn)的Buton皮膚，創(chuàng)建一個(gè)自定義的Button皮膚。為了止問(wèn)題簡(jiǎn)單化，這個(gè)例子沒(méi)有考慮到屏幕DPI的問(wèn)題。筆者將在系列文章的其他篇幅討論這些問(wèn)題.首先，使用AdobeIllustratorCS5為Button圖形創(chuàng)建?個(gè)FXG文件。這個(gè)文件將同時(shí)展現(xiàn)Button組件的up和down皮膚狀態(tài).因?yàn)檫@里主要針對(duì)觸摸輸入，所以沒(méi)有創(chuàng)建over狀態(tài)。其次，通過(guò)重載MobiIeSkin的drawBackground。方法，添加對(duì)'chromeColor樣式的支持?；蛘?，也可以手動(dòng)在up和down的圖形里添加固定的背景顏色，然后重載drawBackground()方法，不作任何事情。disabled狀態(tài)僅僅會(huì)改變up狀態(tài)的alpha值。移動(dòng)ButtonSkin類已經(jīng)默認(rèn)包含這個(gè)功能。教程第一步：創(chuàng)建FXG圖形根據(jù)自己的喜好，可以選擇AdobeFlashProfessional、Adobe11lustrator或者AdobeFireworks構(gòu)建FXG.你也可以在FlashBuiIder中手工編輯FXG,然后在MXML文件中移動(dòng)這個(gè)FXG,再用設(shè)計(jì)視圖消染它，可視化的檢查結(jié)果。用Illustrator創(chuàng)建FXG這個(gè)例子用Illustrator創(chuàng)建一個(gè)藥丸形狀的Button圖形..在11lustrator選擇FiIe>New..為圖形命名，例如RoundedButtonExport.設(shè)置NewDocumentProfiIe為FlashCatalyst.設(shè)置大小為典型的手機(jī)尺寸480pxx800px。.點(diǎn)擊0K.用矩形工具新建一個(gè)由灰色筆觸，漸變填充的矩形。.在Stroke面板中，找到AlignStroke.選擇中間的AlignStrokeToInside選項(xiàng)。默認(rèn)情況下，筆觸都是居中對(duì)齊的。筆者將稍候介紹為什么最好避免使用這個(gè)默認(rèn)值。.修改X和Y位置為0..選中矩形后，選擇Effect>Stylize>RoundCorners：.指定角的半徑為22px,.保存為沒(méi)有私有數(shù)據(jù)的FXG..清理FXG導(dǎo)出FXG文件后，你可能希望清理一些不需要的標(biāo)簽，例如多余的Group標(biāo)簽或者私有的命名空間數(shù)據(jù)。這個(gè)步驟不是必須的，不過(guò)這樣做可以讓你的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>測(cè)試FXG導(dǎo)出和清理FXG之后，你可以把它丟進(jìn)一個(gè)MXML文件中，用設(shè)計(jì)視圖預(yù)覽，從而快速的驗(yàn)證它是否工作。嘗試以下步驟：.在FlashBuilder中新建一個(gè)項(xiàng)目（可以命名為任何名字）。.在源代碼文件夾中加入FXG文件。.切換到設(shè)計(jì)視圖組件面板將會(huì)把FXG文件顯示為?個(gè)自定義組件。.拖拽這個(gè)組件到設(shè)計(jì)區(qū)域.你可以看到FXG被渲染成原本的大小。.在設(shè)計(jì)視圖中，嘗試改變FXG的寬度。你將發(fā)現(xiàn)圓角在水平方向拉伸（見(jiàn)圖1）,但你希望看到的應(yīng)該是圓角的形狀保持不變,而是讓圖形的中間部分拉伸。為此,需要為FXG加入伸縮網(wǎng)格信息。1回8aw?[ OwicK1回8aw?[ OwicK /1?Bin|||1WV,田田■二二=□|圖.缺少伸縮網(wǎng)格數(shù)據(jù)手工添加scalegrids為讓grid伸縮適當(dāng)?shù)纳炜s，你需要添加網(wǎng)格的左、右、上和下的位置信息.因?yàn)槭褂茫≧oundComers風(fēng)格化選項(xiàng)，我們知道當(dāng)前的半徑是22Px.有了這些信息，你可以打開(kāi)FlashBuilder,對(duì)FXG文件做如卜修改：1.在＜Graphic＞根標(biāo)簽中添加scaleGridLeft="22''和scaleGridRight=''198px”（圖形的完整寬度是220px）你還需要確保邊界的筆鋒沒(méi)有伸縮。2.在同一個(gè)標(biāo)簽中，為這個(gè)圖形添加scaleGr^dTop="1px"和scaleGridBottom="43px”（圖形的完整高度是44px）注意:對(duì)于有些圖熟很難找到任意路徑上的精確起始點(diǎn)。這種情況卜；請(qǐng)使用Illustrator的選擇工具去覆蓋一個(gè)錨點(diǎn)，從而找到它的坐標(biāo)（見(jiàn)圖2九FileEditObjectTypeSelectEffectViewWindow>■FileEditObjectTypeSelectEffectViewWindow>■<、s/T\:j，/口夕二M?2..I圖在Graphic根標(biāo)簽添加網(wǎng)格數(shù)據(jù)之后，置看一下設(shè)計(jì)視圖中的新FXG,你會(huì)發(fā)現(xiàn)沒(méi)有什么變化。因?yàn)槁窂叫畔⒉](méi)有填滿圖形的全部尺寸，所以伸縮網(wǎng)格沒(méi)有變化。.為了修復(fù)這個(gè)問(wèn)題，如下所示，添加?個(gè)透明的Rect占據(jù)整個(gè)圖形空間。.將剛做的修改保存為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>現(xiàn)在，設(shè)計(jì)視圖中的Button應(yīng)該伸縮自如了。（見(jiàn)圖3）圖3.添加了伸縮網(wǎng)格后的組件。教程步驟2：創(chuàng)建皮膚類基于現(xiàn)有的MobiIe主題，創(chuàng)建一個(gè)新的Button皮膚的過(guò)程氛圍3個(gè)主要步驟。.新建?個(gè)spark.skins.mobile-ButtonSkfn的子類。.在構(gòu)造函數(shù)中，設(shè)置FXG類的upBorderSkin和downBorderSkin屬性。注意，這些是類實(shí)行，而不是FXG的實(shí)例。同樣，為FXG的尺寸信息設(shè)置measuredDefaultHeight和measuredDefauItWidth屬性(參考下面的代碼片段)。.用CSS或者XML設(shè)置Button的skinClass屬性。注意:這個(gè)項(xiàng)目的示例文件中包含RoundedButtonSkinProject.fxp您可以將這個(gè)文件導(dǎo)入FlashBuilder.杳看完整的應(yīng)用程序(包括皮膚在內(nèi))是如何實(shí)現(xiàn)的.關(guān)于chromeColor樣式，你有3個(gè)選擇：不支持chromeColor重載drawBackground().不作任何事情繪制chromeColor,使其符合FXG圖形-重載drawBackground(),用代碼繪制chromeColor-并且為FXG添加alpha值，使得chromeColor可見(jiàn)。為chromeColor填色-垂載drawBackgroundO,用工具方法applyColorTransform。將FXG從基色轉(zhuǎn)變?yōu)樘囟ǖ腸hromeColor這個(gè)例廣演示了第三種方法。卜面的代碼是皮膚的最終實(shí)現(xiàn)。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:測(cè)試卜面的代碼將定制過(guò)的RoundedButtonSkin設(shè)置為Button的默認(rèn)皮膚。為了演示chromeColor和CSS,作者在此為Buttondown狀態(tài)加入了一些樣式.<fx:Style>@namespaces"Iibrary:///fIex/sparkM;s|Button{skinCIass:CIassReference("skins.RoundedButtonSkin'f);)s|Button:down{chromeColor:#OOOOFF;color:#FFFFFF;textShadowColor:#000000;}</fx:Style>在應(yīng)用程序中添加一些Button后，你應(yīng)該能看到他們的新皮膚在彈起和按下時(shí)的不同狀態(tài)（見(jiàn)圖4）0down狀態(tài)時(shí)的皮膚表明CSS樣式己經(jīng)起作用了。圖4.擁仃新皮膚的ButtonFXG提示與技巧在處理FXG時(shí)，請(qǐng)記住卜列注意事項(xiàng)。路徑vs原始圖形路徑信息并不總是很容易找到，但有些情況下，路徑還可能與一些反鋸齒的元素渲染在一起，你每次需要獲得的路徑信息總是不同的。當(dāng)你在I"ustrator中難以獲取路衿信息時(shí)，不要立刻就期望簡(jiǎn)化原始圖形。blendMode圖形元素的blendMode屬性默認(rèn)是設(shè)置為自動(dòng)的°當(dāng)它是aut。時(shí)候，F(xiàn)lashPlayer或者AIR運(yùn)行時(shí)將會(huì)正確的判斷出元素本身是否需要根據(jù)alpha值使用blendMode層。盡可能避免筆觸通常情況下，筆觸會(huì)橫跨圖形的邊緣（例如，在Illustrator中使用”筆觸居中對(duì)其”）舉例來(lái)說(shuō)，畫(huà)保從（0,0）到（0,100）的條線，它有1個(gè)像素寬的筆觸。該筆觸將會(huì)從X軸的-.5延展到.5.但是由于在小數(shù)位的像素空間內(nèi)無(wú)法繪制任何東西，F(xiàn)lash將會(huì)畫(huà)一條反鋸齒的2個(gè)像素寬的線，正好占據(jù)該小數(shù)寬度位置。為了消除反鋸齒的干擾，畫(huà)圖形的時(shí)候使用奇數(shù)做為筆觸大小，使得它能有半個(gè)像素的邊界。例如，一個(gè)占據(jù)（10,10）位置的、1個(gè)像素寬的SolidColorStroke筆觸，應(yīng)該實(shí)際占位在（10.5,10.5）盡可能使用填充矩形，而非有邕觸的矩形和線條。如果必須使用有筆觸的填充矩形，那可以嘗試把它分位兩個(gè)填充矩形（假設(shè)填充萬(wàn)全不透明）。如果要畫(huà)個(gè)條線，嘗試把它轉(zhuǎn)變?yōu)橐粋€(gè)填充矩形，例如，如果要畫(huà)一條水平直線，可以創(chuàng)建一個(gè)高度等同于線條筆觸的填充矩形。伸縮網(wǎng)格在用FXG設(shè)計(jì)圖形時(shí)，必須考慮到伸縮網(wǎng)格的一些局限。伸縮網(wǎng)格的值必須在圖形的邊界之內(nèi)，并且不能，特性邊界重合（也就是說(shuō)，左邊界scaleGridLeft<scaleGridRight<右邊界）.如果圖形包含Group元素，就不能用伸縮網(wǎng)格.如果元素使用了alpha屬性，伸縮網(wǎng)格也不能使用。所以，只在量觸和填充元素上應(yīng)用alpha。FXG規(guī)范FXG的完整規(guī)范，請(qǐng)參考《FXG2.0-功能與設(shè)計(jì)規(guī)范》更多信息做為一名移動(dòng)平臺(tái)皮膚開(kāi)發(fā)者，你應(yīng)該花點(diǎn)時(shí)間去熟悉Flex4.5SDK源代碼中的MobileSkin基類和默認(rèn)的移動(dòng)皮膚?？梢栽贔lashBuilder的安裝目錄中找到源代碼文件；例如，/AdobeFlashBuilder4.5/sdks/4.5.0/frameworks/projects/mobiIethemen這個(gè)系列文章的下一篇將介紹如何創(chuàng)建DPI感知的皮膚，以適應(yīng)跨不同大小屏幕的要求。最后一篇文章將涉及基于目標(biāo)平臺(tái)使用CSS媒體查詢創(chuàng)建自定義的主題.在這個(gè)討論創(chuàng)建Flex移動(dòng)skin的系列的第1部分中，我討論了Flex團(tuán)隊(duì)在Mobile主題中所做的性能優(yōu)化的原理，提供「一個(gè)以性能為主要關(guān)注點(diǎn)的簡(jiǎn)單Buttonskin示例。移動(dòng)skin領(lǐng)域的下一個(gè)主要主題是，針對(duì)當(dāng)今可用的各種移動(dòng)屏幕調(diào)整應(yīng)用程序的外觀和感覺(jué)。Flex4.5增加了?些新特性以支持像素密度不同的移動(dòng)設(shè)備：像素密度也稱為每英寸像素?cái)?shù)（PPI）或每英寸點(diǎn)數(shù)（DPI）U這些特性包括應(yīng)用程序縮放、多DPI位圖、基于CSS@media查詢的樣式規(guī)則和與DPI相關(guān)的Mobile主題。為什么要關(guān)注屏幕像素密度？如果您原來(lái)從事案面Flex開(kāi)發(fā)，可能想知道為什么應(yīng)該關(guān)注屏幕像素密度。當(dāng)今的移動(dòng)設(shè)備具有不同的大小和屏幕DPI（見(jiàn)表1）.在桌面環(huán)境中，屏驛大小也不一致，但是DPI值大體上是相似的。因此，通常根據(jù)像素尺寸設(shè)計(jì)（本機(jī)或基于瀏覽器的）桌面應(yīng)用程序.表1.移動(dòng)設(shè)備分辨率、大小和DPI值的示例生產(chǎn)商設(shè)備分辨率（px）屏幕對(duì)角線長(zhǎng)度（in）DPIAppleiPhone4,iPod4960X6403.5326AppleiPad1,iPad2>1024x7689.7132BlackBerryPlayBook1024x6007170HTCEvo800X4804.3217MotorolaAtrix960x5404275MotorolaXoom1280x80010.1150SamsungGalaxyTab1024x6007170關(guān)鍵是一些設(shè)備在相同的物理空間中容納的像素多得多。如果設(shè)計(jì)一個(gè)大小為80x80像素的按鈕，這個(gè)按鈕在160DPI的設(shè)備（比如BlackBerryPlayBook或SamsungGalaxyTab）上顯示為邊長(zhǎng)大約0.5英寸的正方形。如果在DPI值更高的設(shè)備（比如iPhone4）上運(yùn)行相同的應(yīng)用程序，這個(gè)按鈕的邊長(zhǎng)現(xiàn)在是0.25英兒很難通過(guò)觸摸屏操作它.同樣的原理也適用于字體大小選擇、基于像素的布局、位圖圖像等方面。屏繇上任何元素的位置和大小都需要根據(jù)屏幕的DPI來(lái)設(shè)置。如果不解決屏幕像素密度問(wèn)題，應(yīng)用程序在許多移動(dòng)設(shè)備上會(huì)太大或太小。Flex4.5引入了幾個(gè)新特性以解決屏幕像素密度問(wèn)題,開(kāi)發(fā)人員可以使用方便的自動(dòng)應(yīng)用程序縮放，也可以使用與密度相關(guān)的圖像和邏輯人工地管理設(shè)計(jì)保真度和控制能力.自動(dòng)應(yīng)用程序縮放Flex4.5支持DPI分類。設(shè)備的像素密度范圍很寬，為了進(jìn)行布局，有必要對(duì)它們分類；例如，238DPI或249DPI的屏幕基本上與240DPI的設(shè)備相當(dāng)。Flex支持三個(gè)DPI類別：160、240和320。Application類及其子類中增加了新的applicadonDPI屬性。當(dāng)把這個(gè)屬性設(shè)置為以上DPI類別之一時(shí)，應(yīng)該針對(duì)這個(gè)DPI設(shè)計(jì)布局。如果應(yīng)用程序在DPI類別不同的設(shè)備上運(yùn)行，整個(gè)應(yīng)用程序會(huì)自動(dòng)地縮放,讓UI在此設(shè)備上以大體相同的物理大小出現(xiàn)。本文的示例文件包含TwitterTrendsFinal.fxp.在這個(gè)示例項(xiàng)目中，applicationDPI設(shè)置為160.針對(duì)160DPI屏幕適當(dāng)?shù)卮_定了各個(gè)布局值的大?。ū热鏣weetsView列表中的iconWidth和iconHeight以及UserInfoView中的padding/gaps）。在160DPI設(shè)備上（比如MotorolaDroidPro）,應(yīng)用程序采用指定的大小。在240DPI設(shè)備上（比如DroidX或Droid2）,應(yīng)用程序統(tǒng)?地放大50%c圖1按絕對(duì)像素?cái)?shù)對(duì)比160DPI屏幕與240DPI屏幕的大小.圖2顯示相同的屏幕截圖，但是240DPI圖像已經(jīng)變小了，顯示相近的物理大小。但是，在MXML和ActionScript代碼中，所有的值還是原來(lái)針對(duì)160DPI的值：在stage級(jí)上應(yīng)用縮放。圖1.320x480160DPI（左）和480x800240DPI（右）上的實(shí)際像素TvdttorTrendsTwitterTrends圖2.320x480160DPI（左）和480x800240DPI（右）上的物理大小注意，由于矢量繪制會(huì)產(chǎn)生痕跡，?般來(lái)說(shuō)最好是放大而不是縮小。因此，最好針時(shí)低的密度(比如160DPI)進(jìn)行設(shè)計(jì)，止應(yīng)用程序在高密度設(shè)薪上放大。與密度相關(guān)的位圖在使用applicationDPI根據(jù)不同的密度自動(dòng)地縮放應(yīng)用程序時(shí)，矢量縮放并不包括文本；而是縮放字體大小，從而以不同的大小配示保真度很高的文本-但是，位圖會(huì)被縮沒(méi)這并不好，因?yàn)榉糯笪粓D通常會(huì)產(chǎn)生不可接受的痕跡為了緩解這個(gè)問(wèn)題Flex4.5引入了新的MuItiDPIBitmapsource類。這個(gè)類有三個(gè)屬性(soureel60dpi,source240dpi和source320dpi)o它根據(jù)實(shí)際的DPI為每個(gè)設(shè)備使用最合適的位圖。例如，假設(shè)一個(gè)按鈕圖標(biāo)在160DPI設(shè)備上應(yīng)該是24x24,并不把一個(gè)圖像直接指定為Button組件的icon屬性，而是把icon屬性設(shè)置為一個(gè)MultiDPIBitmapSource實(shí)例，這個(gè)實(shí)例還引用在240DPI上使用的36x36圖標(biāo)和在320DPI上使用的48x48圖標(biāo).代碼如下：<s:Button><s:icon><s:MultiDPIBitmapSourcesource160dpi=,,@Embed(?/assets/refreshl60.png?)”source240dpi='*@Embed("/assets/refresh240.png*)**source320dpi=',@Embed(?/assets/refresh320.png?)”/></s:icon></s:Button>維續(xù)以上場(chǎng)景,假設(shè)已經(jīng)把a(bǔ)pplicationDPI設(shè)置為160,應(yīng)用程序在320DPI設(shè)備上運(yùn)行。盡管矢量會(huì)放大100%,但是如果指定了多DPI位圖，F(xiàn)lex不會(huì)把160DPI位圖放大100%：相反，會(huì)使用320DPI位圖并對(duì)此位圖進(jìn)行適當(dāng)?shù)霓D(zhuǎn)換，讓它以適當(dāng)?shù)拇笮〕霈F(xiàn)，它的所有像素都不縮放。在能舔使用嵌入的或動(dòng)態(tài)裝載的圖像引用的幾乎任何地方，都可以指定Mu11iDPIBitmapSource對(duì)象 例如，作為Image的source屬性或作為Button的icon屬性。一個(gè)例外是，不能使用MuitiDPIBitmapSource對(duì)象作為應(yīng)用程序的快閃屏；在這種情況下，需要指定高分辨率位圖，讓Flex對(duì)于低密度設(shè)備縮小它。應(yīng)用程序縮放總結(jié)和考慮因素如果希望使用應(yīng)用程序縮放，就需要：針對(duì)您指定的叩plicationDPI值，創(chuàng)建一套skin和視圖/組件布晶Adobe建議使用160值，通過(guò)乘以1.5和2分別放大到240DPI和320DPI.對(duì)于在skin中或應(yīng)用程序中其他地方使用的任何位圖資產(chǎn)，創(chuàng)建多個(gè)版本并使用MultiDPIBitmapSource指定它們.如果使用應(yīng)用程序縮放，skin中的矢量資產(chǎn)和文本不需要與密度相關(guān)聯(lián).忽略@media規(guī)則，因?yàn)閼?yīng)用程序只需要考慮一種目標(biāo)DPL在不同密度的設(shè)備上測(cè)試應(yīng)用程序，確認(rèn)縮放后應(yīng)用程序的外觀在每個(gè)設(shè)備上都是可接受的。尤其是要檢查需要:非整數(shù)的縮放I為廣的設(shè)備。例如，如果applicationDPI是160,應(yīng)該在240DPI設(shè)備上測(cè)試應(yīng)用程序。在使用縮放時(shí)可能出現(xiàn)的缺陷是，可能有可以看出來(lái)的痕跡。當(dāng)縮放因子不是整數(shù)時(shí)（例如160乘以1.5到240）,在某些情況下矢量資產(chǎn)上會(huì)出現(xiàn)可以看出來(lái)的痕跡。尤其是，根據(jù)線條寬度、線條對(duì)齊和FlashPlayer執(zhí)行的像素snapping.線條可能出現(xiàn)模糊或略微偏移。文本和位圖一般沒(méi)問(wèn)題。文本應(yīng)該不會(huì)顯示出任何痕跡，因?yàn)槲谋臼峭ㄟ^(guò)縮放字體大小值縮放的，而不是通過(guò)縮放實(shí)際的矢量。如果使用MultiDPIBitmapSource為每個(gè)DPI指定適當(dāng)?shù)奈粓D，位圖應(yīng)該不會(huì)顯示出縮放痕跡。在實(shí)踐中,Flex團(tuán)隊(duì)對(duì)比了使用放大到240DPI的160DPIskin與使用未縮放的240DPIskin的效果，只發(fā)現(xiàn)了非常小的可見(jiàn)差異。對(duì)于大多數(shù)應(yīng)用程序，這種方法的效果應(yīng)該很好，不需要改進(jìn)了。但是，如果發(fā)現(xiàn)縮放產(chǎn)生了不可接受的痕跡，或者由于其他原因需要更細(xì)致地控制應(yīng)用程序在不同密度的設(shè)符上的行為，那么可以按下?節(jié)中的說(shuō)明人1：地管理密度。與密度相關(guān)的skin和樣式如果沒(méi)有顯式地設(shè)置applicationDPI.它的值會(huì)設(shè)置為設(shè)備的DPI類別Flex4.5附帶的MobiIe主題根據(jù)applicationDPI值選擇適當(dāng)?shù)膱D像類，以及確定組件skin的位置和大小。對(duì)于不由skin控制的元素，比如布局元素，應(yīng)用程序應(yīng)該根據(jù)不同的密度自動(dòng)地管理布局值。尤其是，應(yīng)該在運(yùn)行時(shí)根據(jù)applicationDPI動(dòng)態(tài)地計(jì)算代碼中的所有像素值（通過(guò)命令式代碼或數(shù)據(jù)綁定），還應(yīng)該對(duì)位圖使用MultiDPIBitmapSource.通過(guò)CSS@fnedia查詢實(shí)現(xiàn)與密度相關(guān)的樣式Flex4.5引入了?套有限的CSS媒體直詢功能，可以使用它們聲明只應(yīng)用于特定密度的CSS規(guī)則。例如，Mobile主題使用與DPI相關(guān)的規(guī)則指定ActionBar標(biāo)題的默認(rèn)字體大?。篈ctionBar#titleDisplay{fontsize:24pt;}@medaa（application-dpi:160）ActionBar#titleDisplay{fontsize:18pt;}@media(application-dpi:320){ActionBar#titleDisplay{fontSize:36pt;}第一個(gè)規(guī)則適用于240DPI：對(duì)于160DPI和320DPI,另兩個(gè)規(guī)則箱蓋第一個(gè)規(guī)則。用來(lái)匹配這些?media規(guī)則的DPI類別是應(yīng)用程序當(dāng)前的有效DPI。如果在ApplScation標(biāo)記中設(shè)置了applicationDPL就使用它的值；否則.使用與設(shè)備的runtimeDPI對(duì)應(yīng)的DPI類別。例如，如果appIicationDPI是160.而應(yīng)用程序在320DPI設(shè)備上運(yùn)行，就會(huì)選擇application-dpi:160規(guī)則，這導(dǎo)致Flex把文本大小設(shè)置為18pt然后，文本大小自動(dòng)地乘以2,所以最終顯示的文本大小實(shí)際上是36pt在這里，實(shí)際上根本不會(huì)用到320DPI@media規(guī)則。但是，如果沒(méi)有指定applicationDPI,應(yīng)用程序在320DPI設(shè)備上運(yùn)行，就會(huì)使用320DPI@media規(guī)則。與密度相關(guān)的skin和樣式考慮因素如果通過(guò)不設(shè)置ApplicationapplicationDPI選擇不使用自動(dòng)縮放.應(yīng)用程序就需要在運(yùn)行時(shí)在skin和布局中讀取applicationDPI值，從而判斷設(shè)名的實(shí)際DPI類別。然后，蠹要使用以下技術(shù)實(shí)現(xiàn)與密度相關(guān)的skin和樣式：針對(duì)每個(gè)運(yùn)行時(shí)DPI類別，分別設(shè)計(jì)一套skin和視圖/組件布局，或者設(shè)計(jì)一套根據(jù)不同密度動(dòng)態(tài)調(diào)整的skin和布局Mobile主題skin采用后?種方法——每個(gè)skin類檢查applicationDPI并適當(dāng)?shù)嘏渲帽旧怼Ｊ褂聾media根據(jù)設(shè)備的DPI類別選擇CSS規(guī)則.通常，為每個(gè)DPI定制字體大小和padding值。對(duì)于在skin中或應(yīng)用程序中其他地方使用的任何位圖資產(chǎn)，創(chuàng)建多個(gè)版本并使用MultiDPIBitmapSource指定它僅如果使用應(yīng)用程序縮放skin中的矢量資產(chǎn)和文木不需要與密度相關(guān)聯(lián).在不同密度的設(shè)備上測(cè)試應(yīng)用程序，確認(rèn)skin和布局會(huì)適當(dāng)?shù)卣{(diào)整.FlashBuilder4.5設(shè)備配置FlashBuilder4.5在DesignView中和在啟動(dòng)AdobeDebugLauncher(ADL)實(shí)用程序時(shí)支持與密度相關(guān)的Flex4.5特性。盡管在DesignView中預(yù)覽或用ADL模擬既快乂簡(jiǎn)便，但是在設(shè)備I二啟動(dòng)應(yīng)用程序會(huì)最精確地反映應(yīng)用程序的外觀。在FlashBuilder中創(chuàng)建新的移動(dòng)項(xiàng)目當(dāng)在FlashBuilder中創(chuàng)建FlexMobile項(xiàng)目時(shí)，可以在項(xiàng)目向?qū)е袉⒂米詣?dòng)縮放。創(chuàng)建項(xiàng)目之后，隨時(shí)可以通過(guò)編輯應(yīng)用程序文件添加(或刪除)applicationDPI在FlashBuilder中編寫(xiě)應(yīng)用程序FlashBuilder4.5還包含個(gè)新的DeviceConfigurations首選項(xiàng)頁(yè)面，可以使用它為任意設(shè)備指定像素密度和分辨率。內(nèi)置的配置已經(jīng)為相應(yīng)的設(shè)各指定了適當(dāng)?shù)南袼孛芏群头直媛?。這意味著，在DesignView中選擇要預(yù)覽的設(shè)備或者使用ADL在桌面上啟動(dòng)應(yīng)用程序時(shí)，會(huì)適當(dāng)?shù)啬M在此設(shè)備上運(yùn)行應(yīng)用程序的情況。例如，如果applicationDPI是160并在DesignView中選擇GoogleNexusS作為預(yù)覽設(shè)備，那么DesignView會(huì)把應(yīng)用程序放大50%.按NexusS的尺寸顯示它。這意味著,Flex代碼中的1像素現(xiàn)在對(duì)應(yīng)于DesignView中的1.5像素（見(jiàn)圖3）。圖3.在DesignView中使用設(shè)備配置自動(dòng)縮放并不影響在PropertiesView中做的編輯，因?yàn)檫@些編輯實(shí)際上修改底層代碼。例如，在上面的場(chǎng)景中，如果在PropertiesView中把一個(gè)組件的寬度設(shè)置為100,它在DesignView中顯示的寬度實(shí)際上是150像素，這符合在240DPI設(shè)備上的情況。同樣，如果使用模擬NexusS的ADL在桌面上運(yùn)行應(yīng)用程序，也會(huì)把應(yīng)用程序放大50%,按它在NexusS屏幕上的正確尺寸顯示它。DesignView和ADL還會(huì)正確地顯示?media查詢和Mu11iDPIBitmapSource的效果?？梢允褂肞ropertiesView在支持的任何地方設(shè)置多分辨率位圖。為此，選擇一個(gè)組件（比如Button）￡在PropertiesView中icon設(shè)置的旁邊，瀏覽文件夾圖標(biāo)現(xiàn)在是一個(gè)下拉列表，可以通過(guò)它選擇使用單一位圖還是多分辨率位圖。選擇后者就會(huì)打開(kāi)一個(gè)對(duì)話框，可以使用它為每個(gè)DPI類別指定位圖（見(jiàn)圖4）.、18S.juMCMMM/MmMMKW) ":》—)、 (CW?)C<MJ圖4.MultiresolutionBitmap對(duì)話框測(cè)試如果您有像素密度不同的設(shè)名，可以自己試試這些密度獨(dú)立特性.例如，如果您有MotorolaDroidPro或SamsungGalaxyTab(DPICIassification160)和更先進(jìn)的Android手機(jī)(DPICIassification240).可以編寫(xiě)一個(gè)應(yīng)用程序并把a(bǔ)ppIicationDPI設(shè)置為160,在兩個(gè)手機(jī)上運(yùn)行它.對(duì)比運(yùn)行效果,應(yīng)該會(huì)看到UI組件的大小在兩個(gè)設(shè)備上很接近。(當(dāng)然，GalaxyTab的屏幕史大，所以在這種情況下整個(gè)UI的大小比在手機(jī)上大。)如果沒(méi)有像素密度不同的手機(jī)，通過(guò)使用FlashBuilder在桌面上運(yùn)行應(yīng)用程序，仍然可以試驗(yàn)這些特性。例如，F(xiàn)lashBuilder4.5現(xiàn)在有針對(duì)DroidPro的內(nèi)置設(shè)％配置。只需在RunConfigurations(見(jiàn)圖5)或DebugConfigurations對(duì)話框中選擇這個(gè)設(shè)備配置。ADL會(huì)把設(shè)備配置中指定的屏幕像素密度傳遞給Flex應(yīng)用程序，所以會(huì)模擬在此設(shè)備上應(yīng)該出現(xiàn)的縮放行為。

圖5.RunConfigurations對(duì)話框與密度相關(guān)的Buttonskin教程因?yàn)樽詣?dòng)縮放需要做的工作很少，本文的教程主要關(guān)注編寫(xiě)與密度相關(guān)的skin所需的步驟，目標(biāo)是在每個(gè)DPI上顯示保真度很高的圖像.因此，我們將使用一個(gè)按鈕圖像的三個(gè)版本一在本系列的第1部分中創(chuàng)建了一個(gè)圓痢的藥片形狀的按鈕,但是本教程只使用老式的按鈕圖像.為了簡(jiǎn)單.這里省略Adobe11lustrator細(xì)節(jié).步驟1：創(chuàng)建FXG圖像對(duì)于本教程，可以使用DensItySpecificButtonTutorial.fxp示例項(xiàng)目中現(xiàn)成的圖像（見(jiàn)圖6%可以在skins.assets160包中找到這些FXG文件.Button圖6.透明的圓角按鈕我在第1部分中討論過(guò)使用IllustratorCS5創(chuàng)建FXG文件的基本知識(shí)。為。密度相關(guān)的skin創(chuàng)建圖像還需要做一些工作，包括：針對(duì)160、240和320DPI值，縮放原來(lái)的圖像。先創(chuàng)建160DPI圖像，然后在Illustrator中使用縮放因「轉(zhuǎn)換它。為悠個(gè)DPI更新刻度網(wǎng)格信息。您可能想知道,既然可以在運(yùn)行時(shí)通過(guò)程序縮放圖像，為什么要在Illustrator中縮放”有兩個(gè)原因：設(shè)計(jì)保真度——設(shè)計(jì)者可能會(huì)發(fā)現(xiàn)簡(jiǎn)單地縮放160DPI圖像是不可接受的.對(duì)于更高的DPI,可能需要改進(jìn)細(xì)的線條、角半徑參數(shù)、像素snapping或形狀詳細(xì)信息。復(fù)雜性——同時(shí)應(yīng)用縮放（對(duì)于DPI）和大小調(diào)整轉(zhuǎn)換（使用刻度網(wǎng)格數(shù)據(jù)縮小/放大）會(huì)增加復(fù)雜性?？梢允褂酶?jiǎn)單、更可預(yù)測(cè)的方式實(shí)現(xiàn)用刻度網(wǎng)格調(diào)整大小的與DPI相關(guān)的圖像，在Illustrator中縮放圖像非常簡(jiǎn)單（見(jiàn)圖7）：圖7.Adobe11lustratorCS5中的TransformPanel.在工具欄中找到TransformPanel.按縮放因子調(diào)整寬度和高度值。如果以160DPI圖像為基礎(chǔ)，對(duì)于240和320DPI分別乘以1.5和2、.檢查圖像并做必要的修改。在MobiIe主題庫(kù)中，圖像資產(chǎn)根據(jù)DPI值組織在包中。在mobiIetheme,swc中的spark.skins.assets16Qspark.skins.assets240和spark,skins.assets320包中可以找到圖像資產(chǎn)。在實(shí)踐中，為了通過(guò)設(shè)計(jì)檢查，在縮放后需要做一些小的設(shè)計(jì)調(diào)整，尤其是對(duì)細(xì)線條的寬度。在縮放后可能不需要任何修改，但是最好檢查-下?？s放看似很簡(jiǎn)單，但是也有要處理的問(wèn)題。在縮放示例項(xiàng)目中的160DPI圖像時(shí)，對(duì)于240和320DPI值，Illustrator會(huì)分別把外線條的x和y位置從半像素對(duì)齊（0.5,0.5）移動(dòng)到（0.75,0.75）和（1,1）.如果希望細(xì)線條對(duì)于所有三個(gè)DPI值都保持像素snapping,必須把x和y位置調(diào)整回（0.5,0.5）并調(diào)整寬度和高度以便補(bǔ)償。在開(kāi)始處理Actionscriptskin代碼之前，還需要重復(fù)第1部分中解擇過(guò)的兩個(gè)步驟：（可選）清理FXG以提高可讀性刪除組并更新刻度的格值步驟2：添加applicationDPI邏輯有了與DPI相關(guān)的FXG圖像和包結(jié)構(gòu)之后，可以根據(jù)applicationDPI的值調(diào)整skin中的圖像MobileSkin基類作為屬性公開(kāi)applicationDPL.在構(gòu)造函數(shù)中初始化圖像類，如下所示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：為每個(gè)DPI類別添加CSS@media規(guī)則到目前為止，過(guò)程與第1部分中的skin實(shí)現(xiàn)過(guò)程差異不大。這是好消息！實(shí)現(xiàn)Buttonskin的最后?步是根據(jù)DPI類別選擇適當(dāng)?shù)淖煮w大小。mobiletheme.swcdefaults.css文件已經(jīng)指定了一個(gè)全局樣式，它設(shè)置默認(rèn)的全局字體大小，如卜所示：160DPI-16240DPI-24320DPI-32要想覆蓋默認(rèn)的字體大小，應(yīng)該在CSS文件或fx：style塊中創(chuàng)建新的樣式規(guī)則，例如：@media(application-dpi:160)(Button(fontSize:20;}}@media(application-dpi:240){Button(fontSize:30;}}@media(application-dpi:320)(Button{fontSize:40;})與密度相關(guān)的快閃屏教程Flex4.5框架引入了在移動(dòng)應(yīng)用程序啟動(dòng)時(shí)顯示快閃屏的功能。這個(gè)特性讓開(kāi)發(fā)人員可以定制應(yīng)用程序的啟動(dòng)體驗(yàn)，比如在Flex應(yīng)用程序初始化時(shí)顯示徽標(biāo)等品牌信息。顯示快閃屏很簡(jiǎn)單而且適用于所有FlexApplication類(Application,ViewNavigatorApplScation和TabbedViewNavigatorAppIication)u要想啟用這個(gè)特性，只需在主AppIication文件中把spIashScreenImage屬性設(shè)置為一個(gè)嵌入的圖像。<?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>上面的示例讓?xiě)?yīng)用程序在后動(dòng)時(shí)顯示SplashScreen.png圖像應(yīng)用程序完全裝載之后，圖像消失，用戶可以開(kāi)始使用應(yīng)用程序。應(yīng)用程序可以使用spIashScreenMinimumDispIayTime屬性也快閃屏至少持續(xù)顯示指定的時(shí)間。這樣可以確保即使是在很快的設(shè)備匕圖像也會(huì)顯示一定的時(shí)間。正如本文中指出的,移動(dòng)開(kāi)發(fā)的主要難題之是，開(kāi)發(fā)出的應(yīng)用程序要能筋適應(yīng)不同的設(shè)備。因?yàn)槊糠N設(shè)備的特征不樣，應(yīng)用程序可能需要調(diào)整用戶界面，才能產(chǎn)生理想的體驗(yàn)。設(shè)備的在要差異之一是屏幕分辨率。因?yàn)槊糠N設(shè)備支持不同的屏幕分辨率，很難創(chuàng)建在所有設(shè)備上都恰當(dāng)?shù)仫@示的單一圖像。為了幫助解決這個(gè)問(wèn)題，快閃屏支持根據(jù)設(shè)備的分辨率調(diào)整本身大小的功能。開(kāi)發(fā)人員可以使用splashScreenScaleMode屬性選擇快閃屏的縮放行為。有效值是：none（默認(rèn)）：快閃屏不縮放，但是會(huì)居中。lettertxjx：快閃屏在保持高寬比的情況下縮放到設(shè)備的可用屏幕大小。stretch：快閃屏縮放到填滿屏恭。不保持高寬比。zoom：快閃屏在保持高寬比的情況下縮放到完全填滿可用的屏幕大小。因此，圖像的一部分可能會(huì)超出屏繇的邊界.定制快閃屏以支持DPI縮放快閃屏有助于在某些設(shè)備上產(chǎn)生很好的體驗(yàn)，但是如果屏幕之間像素密度不一樣，僅僅改變圖像大小不一定能夠產(chǎn)生最好的效果。在某些設(shè)備上，縮放會(huì)導(dǎo)致圖像太大、太小或扭曲。另外，縮放有時(shí)候會(huì)產(chǎn)生可見(jiàn)的痕跡和pixilation如果需要進(jìn)?步控制，應(yīng)用程序可能希望根據(jù)設(shè)備的像素密度顯示不同的快閃圖像。這會(huì)提供更精細(xì)的體驗(yàn)，產(chǎn)生更好的效果。通過(guò)編寫(xiě)定制的快閃屏預(yù)裝載器，可以輕松地?cái)U(kuò)展框架以支持這個(gè)需求。預(yù)裝載器可以決定在應(yīng)用程序啟動(dòng)時(shí)要顯示哪個(gè)圖像。下面是實(shí)現(xiàn)過(guò)程：步驟1：創(chuàng)建一個(gè)擴(kuò)展spark.preIoaders.SpIashScreen組件的定制對(duì)象并嵌入圖像資產(chǎn)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方法并根據(jù)設(shè)備的DPI返回適當(dāng)?shù)那度胭Y產(chǎn)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：指定自己的定制快閃屏預(yù)裝教器作為應(yīng)用程序的預(yù)裝教器<?xmlversion="1.0',encoding="utf-8,,?><s:AppIicationxmlns:fx="/mxmI/2009MxmIns:s=**Iibrary:///fIex/spark"preIoader="MuItiDPISpIashScreen,,></s:Application>當(dāng)定制的預(yù)裝載器運(yùn)行時(shí)，它根據(jù)設(shè)備的DPI顯示不同的聯(lián)入資產(chǎn)。注意，在getImageCIass方法中還可以實(shí)現(xiàn)各種其他邏輯-例如，可以擴(kuò)展上面的示例，使用aspectRatio參數(shù)和stage尺寸根據(jù)設(shè)備的方向和應(yīng)用程序是否在平板電腦上運(yùn)行顯示不同的圖像。后續(xù)內(nèi)容在用Flex4.5設(shè)計(jì)多屏幕應(yīng)用程序時(shí)，可以在方便與完美的像素控制之間做出選擇。在構(gòu)建應(yīng)用程序之前，考慮屏幕像素箔度對(duì)設(shè)計(jì)的影響，盡可能使用Flex提供的工具。本系列的箜討論主題的編寫(xiě)和與平臺(tái)相關(guān)的skin在關(guān)于創(chuàng)建Flex移動(dòng)皮膚系列文堂的第:部"里,我們討論了屏幕密度(DPI)對(duì)組件皮膚以及移動(dòng)應(yīng)用布局所帶來(lái)的影響。我還展示了如何使用縮放應(yīng)用，特定密度的位圖，以及CSS元媒介查詢以調(diào)整和適應(yīng)多種DPI值。除了屏幕尺寸，屏幕密度以及外形差異以外，F(xiàn)lex移動(dòng)應(yīng)用開(kāi)發(fā)者必須在著聿于各個(gè)平臺(tái)之間的不同點(diǎn)。除了Android系統(tǒng)以外，F(xiàn)lex4.5J以及FlashBuiIder4.5.1還支持兩個(gè)目標(biāo)為FlexMobile項(xiàng)目的平臺(tái)：蘋(píng)果的iOS以及黑莓的TabletOS。這些平臺(tái)都有各自獨(dú)特的外觀，用戶體驗(yàn).UI圖案，以及人機(jī)接口規(guī)范(HIG)oFlex4.5中的移動(dòng)主題并不會(huì)偏向于任何一個(gè)特定的平臺(tái)。就像Spark那樣，移動(dòng)主題具有中性的外觀以及感覺(jué)，其設(shè)計(jì)元盍可以工作于各個(gè)平臺(tái)。根據(jù)您的需求以及客戶的需求，可以利用CSS樣式快速而自由地改變應(yīng)用程序的外觀.或者您還可以使用更加高級(jí)的機(jī)制，比如自定義皮膚，F(xiàn)XG,或者特定于平臺(tái)的皮膚，與其它原本的應(yīng)用程序結(jié)合使用，從而獲得更多的控制余地。顯著的平臺(tái)差異AIR所支持的每一個(gè)平臺(tái)均具有獨(dú)特的特點(diǎn)，特質(zhì)以及挑戰(zhàn)。Flex4.5.1占據(jù)了這些挑戰(zhàn)中的一部分，并且讓用戶可以在必需的時(shí)候添加新的，特定于平臺(tái)的行為。本部分將簡(jiǎn)單地涵蓋那些將會(huì)影響應(yīng)用程序的可視化設(shè)計(jì)以及行為設(shè)計(jì)的平臺(tái)之間的主:要不同點(diǎn)。硬件按鈕Android上的AIR添加了對(duì)Android硬件上鍵盤(pán)按鈕的支持：主頁(yè)鍵,返回鍵，菜單鍵以及搜索鍵.這些按鈕可以是實(shí)實(shí)在在的硬件按鈕，也可以是通過(guò)觸摸屏顯示出來(lái)的按鈕。某些設(shè)備制造商可能會(huì)忽略搜索按鈕.Android上的返回按鈕用于導(dǎo)航回到上一個(gè)活動(dòng),即便該活動(dòng)并非當(dāng)前應(yīng)用程序的一部分。iOS設(shè)備以及黑莓的PlayBook并不具備這樣的返【可按車(相反，iOS和PlayBook的一個(gè)典型的應(yīng)用可以在屏幕的左上方放置一個(gè)返回的軟按健?對(duì)于這兩個(gè)平臺(tái)，返回鍵的導(dǎo)航功能是局限在每個(gè)應(yīng)用程序本身的.Android上的菜單按鈕將會(huì)打開(kāi)一個(gè)選項(xiàng)菜單（即是Flex4.5上的ViewMenu移動(dòng)組件）。選項(xiàng)菜單中會(huì)顯示一個(gè)可用于當(dāng)前活動(dòng)的命令（作為按鈕）列表.在iOS中功能最接近的組件應(yīng)該就是活動(dòng)表了?；顒?dòng)表能以列表的形式顯示當(dāng)前活跳或者當(dāng)前已選擇的條目的可用活動(dòng)。黑莓的PlayBook配備有?個(gè)觸控的邊框，應(yīng)用程序可以通過(guò)該邊框顯示?個(gè)包含任意控件的容曙。Android上的搜索按鈕通常使用在應(yīng)用程序上下文的數(shù)據(jù)搜索當(dāng)中.比如，一個(gè)聯(lián)系人應(yīng)用程序就需要提供一個(gè)文本搜索功能，以篩選聯(lián)系人的數(shù)據(jù)信息。Android上的搜索操作對(duì)于所有應(yīng)用程序均具有一致的外觀和感覺(jué)。iOS叮黑莓的Tablet操作系統(tǒng)均不具備針對(duì)于特定應(yīng)用程序的搜索UI設(shè)計(jì)元素.可用的屏幕面積Android2.x以及80S在應(yīng)用程序頂部?jī)H顯示有?個(gè)狀態(tài)欄，當(dāng)應(yīng)用程序進(jìn)入全屏模式時(shí)，該狀態(tài)欄便會(huì)隱藏。在AndroGd3.xHoneycomb 屏幕底部的狀態(tài)欄總是可見(jiàn)的，無(wú)論是否處T?全屏狀態(tài)下.對(duì)于黑莓PlayBook上的應(yīng)用程序，默認(rèn)均運(yùn)行在全屏模式下。從右上角滑下便可以顯示系統(tǒng)狀態(tài)欄，但這并不會(huì)重設(shè)AIR應(yīng)用程序窗11的大小?；畎嬗∷IR中所使用的默認(rèn)sansserif設(shè)備字體會(huì)根據(jù)設(shè)備的不同而有所不同,PlayBook將使用MyriadPro.而80S則使用Helvetica,Android使用DroidSans：為了清晰起見(jiàn)，即使在不同的設(shè)備上使用相同的字體尺寸以及相同的DPI.其字體度量也會(huì)因?yàn)樗褂玫淖煮w不同而有所不同,在給定的面枳中,用戶所能夠放置的文本總量會(huì)因?yàn)槠亮殖叽缫约捌脚_(tái)的不同而有所不同（參見(jiàn)圖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）,中圖為蘋(píng)果iPod第四代（portrait）,右圖為三星GalaxyS（縱向）使用了Flex移動(dòng)主題的默認(rèn)樣式.在各個(gè)平臺(tái)上，單行的文本內(nèi)容通常會(huì)中央上升（也就是說(shuō)，不包括文本高度的卜行字母）.移動(dòng)主題里的皮膚還會(huì)使用中央上升。軟鍵盤(pán)全部三個(gè)平臺(tái)的縱向以及橫向情況下均支持使用軟鍵盤(pán)。然而，許多Android手機(jī)擁仃一個(gè)固定的硬件鍵盤(pán)而不是軟鍵盤(pán)（例如，摩托羅拉DroidPro）,而其它的一些Android手機(jī)具備可選的硬件鍵盤(pán)，可開(kāi)啟用于取代軟鍵盤(pán)。Android「?機(jī)還允許使用第三方的軟鍵盤(pán)。比如，Swype和SwiftKey鍵盤(pán)便nJ'以與AIR無(wú)縫集成。軟鍵盤(pán)的尺寸隨著平臺(tái)，設(shè)備，甚至設(shè)備方位的不同而有所差異。但無(wú)論設(shè)備的方位如何,全部三個(gè)平臺(tái)所使用的軟鍵盤(pán)均與屏幕底部的邊緣時(shí)齊。默認(rèn)情況下，當(dāng)軟鍵盤(pán)被激活或停用時(shí)，在FlashBuilder中所創(chuàng)建的Flex移動(dòng)項(xiàng)目均會(huì)自動(dòng)配置以縮小或擴(kuò)大應(yīng)用程序的高度,文本輸入在Android和黑港的PlayBook平臺(tái)中，AIR應(yīng)用程序的TextField以及新的StyleableTextField控件中的文本輸入均可正常工作。然而，這些控件在iOS中的實(shí)現(xiàn)卻是一個(gè)特例。為了能在iOS中獲得功能齊全的糾錯(cuò)和文本選擇功能，文本編輯將會(huì)包含在一個(gè)原生的覆蓋于屏幕最上方的控件之中.當(dāng)在10S中編輯TextField和StyleableTextField內(nèi)容時(shí)，該技術(shù)會(huì)帶來(lái)一些限制，包括：在編輯時(shí)是不支持Restrict屬性的。限制操作將在退出TextField之后才可以使用。在進(jìn)入或者退出可編輯的TextField時(shí)，由于空白和短劃線字符較小，可能會(huì)導(dǎo)致多行文本回流。文本無(wú)法被父級(jí)容器所指定的scrollRect屬性剪切。鍵盤(pán)事件將不會(huì)被觸發(fā).原生的清除按鈕（帶有X標(biāo)記的灰色圓圈）總會(huì)出現(xiàn)在TextInput當(dāng)中，并且這是不可配置的。顏色的深淺在蘋(píng)果GOS和黑莓TalbletOS中，AIR均支持32位色。而在Android中，AIR在使用RGB565時(shí)受限于16位顏色。人機(jī)界面規(guī)范每個(gè)平臺(tái)供應(yīng)商都具有其獨(dú)特的人機(jī)接口規(guī)范（HIG）,稱為UI規(guī)范。蘋(píng)果iOS的人機(jī)接11規(guī)范谷歌Android的用戶接口規(guī)位黑莓TabletOS的UI規(guī)范以下這些規(guī)范將有助于用戶創(chuàng)建出外觀和使用感受都與那些本土程序類似的Flex移動(dòng)應(yīng)用程序。特定平臺(tái)的綜述關(guān)于特定的平臺(tái)，我僅僅觸及到表面的問(wèn)題。想獲取關(guān)于該主題的更多信息，您可以瀏覽www.androidD以及D,這兩個(gè)網(wǎng)址將持續(xù)更新它們的UI模式目錄.在AIR允許設(shè)計(jì)者和開(kāi)發(fā)者以通用的運(yùn)行時(shí)來(lái)創(chuàng)建應(yīng)用程序的同時(shí),設(shè)計(jì)應(yīng)用程序中很垂要的一點(diǎn)是，您必須清楚何時(shí)以及如何將特定于平臺(tái)的不同點(diǎn)考慮在內(nèi)。Flex移動(dòng)項(xiàng)目為您提供了一個(gè)選擇范圍，從在所有平臺(tái)上使用單一的UL到為每個(gè)所支持的平臺(tái)重新設(shè)ilUL創(chuàng)建特定平臺(tái)的外觀和樣式版本的Flex和FlashBuiIder為您在項(xiàng)目中定義和使用特定平臺(tái)的樣式和外觀提供了基本工具。使用CSS媒體查詢?cè)陉P(guān)于創(chuàng)建Flex移動(dòng)外觀系列的第二部分中，我討論了如何在CSS媒體查詢中使用自定義的媒體功能application-dpi來(lái)設(shè)置特定的DPI樣式，比如字體大小和填充值。4.5版本的Flex提供了一個(gè)額外的自定義媒體功能：os-platform.此項(xiàng)功能允許開(kāi)發(fā)人員指定特定于平臺(tái)的樣式。下面是一個(gè)簡(jiǎn)單的例子，設(shè)苴一個(gè)默認(rèn)的ActionBarchromeColor的數(shù)值，以及特定于Android以及特定于I0S的數(shù)值：ActionBar{chromeColor:#000000;}@media(os-platform:"Android"){ActionBar{chromeColor:#999999;/*darkgray*/}}?media(os-platform:“IOS”){ActionBar{chromeColor:#6DA482;/*blue*/)此示例代碼使用了來(lái)自移動(dòng)主題的默認(rèn)ActionBarSkin皮膚類，并改變了chromeColor屬性。您可以使用同樣的技術(shù)來(lái)完全替代特定于平臺(tái)的默認(rèn)外觀.主題的使用為特定于平臺(tái)的外觀使用CSS的主要缺點(diǎn)是，無(wú)論何種平臺(tái)，所有的外觀及其附屬文件都將被編譯到您的應(yīng)用程序中。這是必要的，因?yàn)镃SS媒體查詢是在運(yùn)行時(shí)，而不是編譯時(shí)，進(jìn)行計(jì)算的。最終的結(jié)果是生成一個(gè)更大的二進(jìn)制文件(APK,BAR,或者IPA類型的文件)，該文件會(huì)增加下載時(shí)間和并添加到程序歷史記錄.獲取特定于平臺(tái)的外觀和樣式的另一種方式是，分別為每一個(gè)平臺(tái)編輯應(yīng)用程序，通過(guò)每次改變theme編輯器參數(shù)來(lái)覆蓋不同的主題。這將賦予您特定于平臺(tái)的樣式，而不會(huì)增大應(yīng)用程序的二進(jìn)制文件尺寸.請(qǐng)注意：在單一的項(xiàng)目中，4.5.1版本的FlashBuiIder沒(méi)有內(nèi)置對(duì)每個(gè)平臺(tái)編譯器參數(shù)的支持。您有三種選擇：創(chuàng)建您自己的編譯腳本時(shí)于每個(gè)平臺(tái)，每當(dāng)創(chuàng)建項(xiàng)目時(shí)都要手動(dòng)修改參數(shù)。將您的項(xiàng)目用構(gòu)到共享相同基礎(chǔ)項(xiàng)目和/或庫(kù)的多個(gè)項(xiàng)目當(dāng)中。第：個(gè)選項(xiàng)提供了最大程度的控制，為您提供更多用來(lái)添加特定平臺(tái)操作的選擇(例如，iOS和黑箍Talbletos中屏幕上.的返回按鈕)。如果您選擇以這種方式來(lái)使用主題的話,請(qǐng)選擇一個(gè)最適合您的工作流程的構(gòu)建選項(xiàng)。想獲取更多關(guān)于Flex4.x中主題支持的信息，請(qǐng)參閱Flex說(shuō)明文檔中關(guān)上題的部分內(nèi)容。ActionBar樣式教程通常情況下，刻外觀做出改變的最簡(jiǎn)單方法是使用CSS樣式.對(duì)于這個(gè)例子，我將詳細(xì)敘述之前展示的ActionBar示例樣式,以加入更多?些特定于平臺(tái)的細(xì)節(jié)。我正在為虛擬業(yè)務(wù)評(píng)測(cè)啟動(dòng)開(kāi)發(fā)一個(gè)名為力。/廠的應(yīng)用程序。他們希望ActionB