flex air 不同分辨率下启动图像

本文详细介绍了移动设备应用程序的开发过程,包括选择合适的应用程序容器类型、处理不同屏幕大小和分辨率、添加启动屏幕以及自定义配置等关键步骤。特别强调了如何根据不同设备功能选择合适的启动屏幕图像,以提升用户体验。
摘要由CSDN通过智能技术生成

移动设备应用程序中的第一个标签通常是以下标签之一:

  • <s:ViewNavigatorApplication> 标签用于定义只有一个部分的移动设备应用程序。

  • <s:TabbedViewNavigatorApplication> 标签用于定义有多个部分的移动设备应用程序。

开发用于平板电脑的应用程序时,屏幕大小限制并不像在手机应用程序中那样重要。因此,对于平板电脑,不需要以小视图来构建应用程序。可以使用标准 Spark Application 容器以及受支持的移动设备组件和外观来构建应用程序。

注: 在开发任何移动设备应用程序时(即使是用于移动设备的程序),都可以使用 Spark Application 容器。但是,Spark Application 容器不支持视图导航、数据持久化机制、设备的后退和菜单按钮。有关更多信息,请参阅 关于 Application 容器移动设备应用程序容器与 Spark Application 容器的区别

移动设备应用程序容器具有以下默认的特性:

特性

Spark ViewNavigatorApplication 和 TabbedViewNavigatorApplication 容器

默认大小

100% 高,100% 宽,占整个可用屏幕空间。

子代布局

由组成应用程序视图的各 View 容器定义。

默认内边距

0 像素。

滚动条

无。如果在应用程序容器的外观中添加滚动栏,用户可以滚动整个应用程序。包括应用程序的 ActionBar 和选项卡栏区域。您通常并不希望滚动视图的这些区域。因此,将滚动条添加到应用程序的各 View 容器中,而不是添加到应用程序容器的外观中。

移动设备应用程序容器与 Spark Application 容器的区别

Spark 移动设备应用程序容器的大部分功能与 Spark Application 容器相同。例如,可以对移动设备应用程序容器应用样式,其方法与 Spark Application 容器的样式应用方法相同。

Spark 移动设备应用程序容器有一些与 Spark Application 容器不同的特征:

  • 支持持久化

    支持在磁盘中存储和加载数据。通过持久化机制,用户可以中断移动设备应用程序的运行,例如接听电话,然后在通话结束时恢复应用程序的状态。

  • 支持视图导航

    ViewNavigatorApplication 容器自动创建一个 ViewNavigator 容器,以控制视图之间的导航。

    TabbedViewNavigatorApplication 容器自动创建一个 TabbedViewNavigator 容器,以控制部分之间的导航。

  • 支持设备的后退和菜单按钮

    当用户按下后退按钮时,应用程序将导航回到堆栈中的上一个视图。当用户按下菜单按钮时,将显示当前视图的 ViewMenu 容器(如果已经定义)。

有关 Spark 应用程序容器的更多信息,请参阅 About the Application container

处理应用程序级别的事件

NativeApplication 类代表一个 AIR 应用程序。它负责提供应用程序信息和应用程序级功能,并分派应用程序级事件。可以使用静态属性 NativeApplication.nativeApplication 来访问与移动设备应用程序对应的 NativeApplication 类的实例。

例如,NativeApplication 类定义了可以在移动设备应用程序中处理的 invoke 和 exiting 事件。下面的示例引用该 NativeApplication 类,来定义 exiting 事件的事件处理函数:

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\mobile\SparkNativeApplicationEvent.mxml -->
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark"
    firstView="views.EmployeeMainView"
    creationComplete="creationCompleteHandler(event);">
    
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            protected function creationCompleteHandler(event:FlexEvent):void {
                // Reference NativeApplication to assign the event handler.
                NativeApplication.nativeApplication.addEventListener(Event.EXITING, myExiting);
            }
            
            protected function myExiting(event:Event):void {
                // Handle exiting event.
            }
        ]]>
    </fx:Script>
    
</s:ViewNavigatorApplication>

请注意,需使用 ViewNavigatorApplication.navigator 属性来访问 ViewNavigator。

在应用程序中添加启动屏幕

Spark Application 容器是 ViewNavigatorApplication 和 TabbedViewNavigatorApplication 容器的基类。用于 Spark 主题时,Spark Application 容器支持应用程序预加载器,以显示应用程序 SWF 文件的下载和初始化进度。

用于 Mobile 主题时,则可以显示启动屏幕。启动屏幕在应用程序启动期间显示。

注: 要在桌面应用程序中使用启动屏幕,请将  Application.preloader 属性设置为 spark.preloaders.SplashScreen。同时将 frameworks\libs\mobile\mobilecomponents.swc 添加到应用程序的库路径中。

Adobe 建议

有要分享的教程?

 

为具有多个屏幕大小的应用程序自定义 Flex 应用程序 DPI(英文)

Renaun Erickson
构建可跨智能移动设备和平板电脑运行的 Flex 移动设备应用程序需要了解屏幕大小、屏幕每英寸点数 (DPI) 和屏幕分辨率。
   

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

可以直接从图像文件中加载启动屏幕。要配置启动屏幕,请使用应用程序类的 splashScreenImagesplashScreenScaleMode 和 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 属性指定图像文件。SplashScreenImageSource dpiaspectRatio 和 minResolution 属性定义显示图像所需的移动设备功能。

例如,第一个 SplashScreenImageSource 定义仅指定图像的 source 属性。由于没有用于 dpiaspectRatio 和 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 定义的 dpiaspectRatio 和 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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值