設計一個移動應用程序的多屏分辨率

Question

我真的新與flex。我想開發一個用於多屏幕分辨率的應用程序。我無法弄清楚我需要做什麼。

我讀過這篇文章here但它仍然不是很清楚我必須做什麼。

任何人都可以解釋我怎麼能保持相同的大小和設計跨多個決議？

我如何實現密度獨立性？

我是否需要爲背景圖片提供3種不同的分辨率？

我的背景圖片需要什麼屏幕分辨率？

謝謝！

Answer 1

要實現密度獨立性並達到多個屏幕分辨率，您需要爲任何屏幕都做好準備。從低分辨率的iPhone 3/GS到超高分辨率的Nexus 10.沒有具體的屏幕分辨率背景圖像需要，因爲它有數百個分辨率需要。

而不是將背景設置爲設置的分辨率，可以考慮用代碼構建它。無論是通過可重複的瓷磚，或通過使用多個圖像，並把它們放在一起，形成你的背景。

您絕對會希望爲每個Adobe分辨率（160dpi，240dpi和320dpi）使用一個圖像。你可以通過使用這樣的：

<s:Image> 
    <s:source> 
     <s:MultiDPIBitmapSource 
      source160dpi="@Embed('assets/ui/images/phone/info-image-160.png')" 
      source240dpi="@Embed('assets/ui/images/phone/info-image-240.png')" 
      source320dpi="@Embed('assets/ui/images/phone/info-image-320.png')" /> 
    </s:source> 
</s:Image> 

假設你在向量創造了一切，這是比較簡單的。只需將您設計的圖像用於160（這是大多數人似乎設計的圖像），然後將其放大到240dpi的150％和320dpi的200％。

對於真正的密度獨立性，您還需要確保在應用程序標記中沒有使用applicationDPI，因爲這將強制使用特定的分辨率。

對於CSS，你必須按照這個形式（直接從下面的第一個鏈接所）

@media (application-dpi: 160) { 

     s|Button { 
      fontSize: 10; 
     } 
    } 

    /* IOS only @ 240dpi */ 
    @media (application-dpi: 240) and (os-platform: "IOS") { 
     s|Button { 
      fontSize: 11; 
     } 
    } 

    /* IOS at 160dpi or Android @ 160dpi */ 
    @media (os-platform: "IOS") and (application-dpi:160), (os-platform: "ANDROID") and (application-dpi: 160) { 
     s|Button { 
      fontSize: 13;   
     } 
    } 

你需要考慮的一切。圖像，字體/字體大小，組件大小調整，硬編碼組件定位符等。您可以查看Capabilities類，瞭解在運行時您可以獲得什麼類型的數據。如果最終使用諸如stage.stageHeight之類的東西來獲取不正確的值，請考慮使用FlexGlobals.topApplication.sys(tem?)Manager.screen.height來代替。這說明了DPI，而StageHeight沒有。

還閱讀：

• Support multiple screen sizes and DPI values in a mobile application