设计一个移动应用程序的多屏分辨率

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