flex 移动开发为应用程序添加启动图片

从图像文件中添加启动屏幕

可以直接从图像文件中加载启动屏幕。要配置启动屏幕，请使用应用程序类的 splashScreenImage、splashScreenScaleMode 和 splashScreenMinimumDisplayTime 属性。

例如，以下示例从使用信箱格式的 JPG 文件中加载启动屏幕。

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\SparkMobileSplashScreen.mxml -->
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark"
    firstView="views.EmployeeMainView"
    splashScreenImage="@Embed('assets/logo.jpg')"
    splashScreenScaleMode="letterbox">
    
</s:ViewNavigatorApplication>

从自定义组件中添加启动屏幕

上一部分中的示例使用 JPG 文件定义启动屏幕。该机制的缺点是：无论运行应用程序的移动设备具有什么功能，应用程序都使用相同的图像。

移动设备具有不同的屏幕分辨率和大小。您可以定义自定义组件，而不是将单个图像用作启动屏幕。此组件决定着移动设备的功能并将合适的图像用作启动屏幕。

使用 SplashScreenImage 类定义自定义组件，如下例所示：

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\myComponents\MySplashScreen.mxml -->
<s:SplashScreenImage xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark">
 
    <!-- Default splashscreen image. -->
    <s:SplashScreenImageSource 
        source="@Embed('../assets/logoDefault.jpg')"/>
        
    <s:SplashScreenImageSource 
        source="@Embed('../assets/logo240Portrait.jpg')"
        dpi="240" 
        aspectRatio="portrait"/>
        
    <s:SplashScreenImageSource 
        source="@Embed('../assets/logo240Landscape.jpg')"
        dpi="240" 
        aspectRatio="landscape"/>
    
    <s:SplashScreenImageSource 
        source="@Embed('../assets/logo160.jpg')"
        dpi="160" 
        aspectRatio="portrait" 
        minResolution="960"/>
</s:SplashScreenImage>

在组件定义内，使用 SplashScreenImageSource 类定义每个启动屏幕图像。SplashScreenImageSource.source 属性指定图像文件。SplashScreenImageSourcedpi、aspectRatio 和 minResolution 属性定义显示图像所需的移动设备功能。

例如，第一个 SplashScreenImageSource 定义仅指定图像的 source 属性。由于没有用于 dpi、aspectRatio 和 minResolution 属性的设置，此图像可以在任何设备上使用。因此，它可以定义在没有其它图像与设备功能相符时显示的默认图像。

第二和第三个 SplashScreenImageSource 定义指定在纵向或横向模式下用于 240 DPI 设备的图像。

最后一个 SplashScreenImageSource 定义指定在纵向模式下用于 160 DPI 设备、最低分辨率为 960 像素的图像。minResolution 属性的值与 Stage.stageWidth 和Stage.stageHeight 属性值中的较大值进行对照。这两个值中的较大值必须等于或大于 minResolution 属性。

以下移动设备应用程序使用此组件：

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\SparkMobileSplashComp.mxml -->
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark"
    firstView="views.EmployeeMainView"
    splashScreenImage="myComponents.MySplashScreen">
</s:ViewNavigatorApplication>

SplashScreenImage 类自动确定与设备功能最匹配的图像。此匹配操作基于每个 SplashScreenImageSource 定义的 dpi、aspectRatio 和 minResolution 属性。

决定最佳匹配项的步骤如下所示：

1. 决定所有与移动设备设置匹配的所有 SplashScreenImageSource 定义。匹配发生在以下情况：

   1. SplashScreenImageSource 定义没有对此设置进行显式定义。例如，dpi 属性的设置不与任何设备的 DPI 设置。

   2. 对于 dpi 或 aspectRatio 属性，此属性必须与移动设备的相应设置完全匹配。

   3. 对于 minResolution 属性，当 Stage.stageWidth 和 Stage.stageHeight 属性值中的较大值等于或大于 minResolution 时，此属性与设备上的设置匹配。

2. 如果有多个 SplashScreenImageSource 定义与设备匹配，则：

   1. 选择显式设置数最大的定义。例如，与仅指定 dpi 属性的 SplashScreenImageSource 定义相比，同时指定 dpi 和 aspectRatio 属性的 SplashScreenImageSource 定义是更佳匹配项。

   2. 如果仍存在多个匹配项，请选择 minResolution 值最大的匹配项。

   3. 如果仍存在多个匹配项，请选择组件中定义的第一个匹配项。

显式选择启动屏幕图像

SplashScreenImage.getImageClass() 方法决定与移动设备功能最匹配的 SplashScreenImageSource 定义。您可以重写此方法以添加自己的自定义逻辑，如下例所示。

在该示例中，添加用于 iOS 启动屏幕的 SplashScreenImageSource 定义。在重写 getImageClass() 方法的主体中，首先确定应用程序是否在 iOS 中运行。如果是这样，显示特定于 iOS 的图像。

如果应用程序未在 iOS 中运行，则调用 super.getImageClass() 方法。此方法使用默认实现决定要显示的 SplashScreenImageSource 实例：

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\myComponents\MyIOSSplashScreen.mxml -->
<s:SplashScreenImage xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Script>
        <![CDATA[
            // Override getImageClass() to return an image for iOS.
            override public function getImageClass(aspectRatio:String, dpi:Number, resolution:Number):Class {
                // Is the application running on iOS?
                if (Capabilities.version.indexOf("IOS") == 0)
                    return iosImage.source;
                
                return super.getImageClass(aspectRatio, dpi, resolution);
            }
        ]]>
    </fx:Script>

    <!-- Default splashscreen image. -->
    <s:SplashScreenImageSource 
        source="@Embed('../assets/logoDefault.jpg')"/>
    
    <s:SplashScreenImageSource 
        source="@Embed('../assets/logo240Portrait.jpg')"
        dpi="240" 
        aspectRatio="portrait"/>
    
    <s:SplashScreenImageSource 
        source="@Embed('../assets/logo240Landscape.jpg')"
        dpi="240" 
        aspectRatio="landscape"/>
    
    <s:SplashScreenImageSource 
        source="@Embed('../assets/logo160.jpg')"
        dpi="160" 
        aspectRatio="portrait" 
        minResolution="960"/>

    <!-- iOS splashscreen image. -->
    <s:SplashScreenImageSource id="iosImage"
        source="@Embed('../assets/logoIOS.jpg')"/>
</s:SplashScreenImage>