apache-flex - 设计适用于多屏分辨率的移动应用程序

Question

我对 Flex 还很陌生。我想开发一个适用于多屏分辨率的应用程序。我不知道我到底需要做什么。

我读了这篇文章here但仍然不清楚我必须做什么。

谁能解释一下如何在多种分辨率下保持相同的尺寸和设计？

如何实现密度独立？

例如，我的背景图片需要 3 种不同的分辨率吗？

我的背景图像需要什么屏幕分辨率？

谢谢!

Answer 1

为了实现密度无关性并达到多种屏幕分辨率，您需要为任何可能的屏幕做好准备。从低分辨率的 iPhone 3/GS 到超高分辨率的 Nexus 10。您的背景图像不需要特定的屏幕分辨率，因为它需要的分辨率有数百种。

不要将背景设置为固定分辨率，而是考虑使用代码构建它。通过可重复的图 block 或使用多个图像并将它们组合在一起形成背景。

您肯定会希望对每种 Adob​​e 分辨率(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;        
        }
    }

你需要考虑一切。图像、字体/字体大小、组件大小、硬编码的组件位置等。您可以查看 Capability 类，了解在运行时可以使用哪些类型的数据。如果您最终使用 stage.stageHeight 之类的东西获得了不正确的值，请考虑使用 FlexGlobals.topApplication.sys(tem?)Manager.screen.height 来代替。这说明了 DPI，而 stageHeight 则没有。

另请阅读:

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