源于移動設備的dpi不同,可能導致一個設備上運行展現正常的界面,到另外一個設備上慘不忍睹。
flex sdk4.5及以上在Application及其子類上提供了ApplicationDpi,并支持3種類型的dpi:160,240,320,基本上可以涵蓋目前已有的設備的dpi。
如果設定Application的applicationDpi,flex runtime會針對矢量圖以及文本自動做dpi自適應,由于矢量圖繪制會產生痕跡,所以最好在設計時按照低dpi(比如160,Adobe官方建議)來設計,在dpi=240的設備上,runtime會自動將矢量圖放到為1.5倍。
對于位圖來說,放大會導致痕跡,因此flex sdk提供了MultiDPIBitmapSource類,允許用戶針對160,240,320分別提供位圖。mobile app的splash不能采用MultiDPIBitmapSource,最好使用大位圖,讓runtime自動縮小它。
在skin中,判斷applicationDpi:
switch (applicationDPI) {
case DPIClassification.DPI_320: {
upBorderSkin = skins.assets320.TransparentRoundedButton_up;
downBorderSkin = skins.assets320.TransparentRoundedButton_down;
break;
}
在css中,采用@media:
@media (application-dpi: 160) {
Button { fontSize: 20; }
}
要提供良好體驗的splash,需要擴展SplashScreen類,重寫getImageClass方法,比如:
override mx_internal function getImageClass(dpi:Number, aspectRatio:String):Class {
if (dpi == DPIClassification.DPI_160)
return SplashImage160;
else if (dpi == DPIClassification.DPI_240)
return SplashImage240;
else if (dpi == DPIClassification.DPI_320)
return SplashImage320; return null;
}
}
posted on 2014-02-06 19:26
不做浮躁的人 閱讀(390)
評論(0) 編輯 收藏