移动设备外观设计的基础知识

比较桌面外观和移动设备外观

与桌面外观相比，移动设备外观更加轻量化。因此，它们具有许多不同之处；例如：

  • 移动设备外观以 ActionScript 编写。在移动设备上，完全以 ActionScript 编写的外观可以提供最佳的性能。

  • 移动设备外观扩展了 spark.skins.mobile.supportClasses.MobileSkin 类。该类扩展了 UIComponent，而 SparkSkin 类则扩展了 Skin 类。

  • 移动设备外观使用已编译的 FXG 或简单的 ActionScript 图形作为图形资源，用以提高性能。而在桌面应用程序的外观中，通常使用 MXML 图形来组成大多数绘图。

  • 移动设备外观无需声明任何外观状态。由于手机外观以 ActionScript 编写，因此必须通过过程来实现状态。

  • 移动设备外观不支持状态转换。

  • 移动设备外观通过手动布置。移动设备外观不扩展 Group，所以不支持 Spark 布局。因此，需要以 ActionScript 手动放置其子代。

  • 移动设备外观并不支持所有样式。移动设备主题会忽略某些样式，具体取决于移动设备外观的性能或其它不同点。

 除了与性能相关的差异外，Flash Builder 也以不同的方式使用某些移动设备外观文件。这个在库项目中使用的移动设备主题尤为突出。博客 Jeffry Houser 说明了如何修正此问题。

移动设备主机组件

移动设备外观通常会声明一个公共的 hostComponent 属性。该属性不是必需的，但建议使用。hostComponent 属性必须与使用外观的组件属于同一类型。例如，ActionBarSkin 将 hostComponent 声明为 ActionBar 类型： 
public var hostComponent:ActionBar;

Flex 会在组件首次加载外观时设置 hostComponent 属性。

与桌面外观一样，您可以使用主机组件来访问外观所连组件的属性和方法。例如，您可以从外观类中访问主机组件的公共属性或者将事件侦听器添加到主机组件中。

移动设备样式

移动设备外观所支持的样式属性仅仅是桌面外观所支持样式属性中的一部分。这组样式由移动设备主题定义。

下表定义了使用移动设备主题时可供组件使用的样式属性：

样式属性

提供支持的组件

继承/非继承

accentColor

Button、ActionBar、ButtonBar

继承

backgroundAlpha

ActionBar

非继承

backgroundColor

Application

非继承

borderAlpha

List

非继承

borderColor

List

非继承

borderVisible

List

非继承

chromeColor

ActionBar、Button、ButtonBar、CheckBox、HSlider、RadioButton

继承

color

所有带文本的组件

继承

contentBackgroundAlpha

TextArea、TextInput

继承

contentBackgroundColor

TextArea、TextInput

继承

focusAlpha

所有可获得焦点的组件

非继承

focusBlendMode

所有可获得焦点的组件

非继承

focusColor

所有可获得焦点的组件

继承

focusThickness

所有可获得焦点的组件

非继承

locale

所有组件

继承

paddingBottom

TextArea、TextInput

非继承

paddingLeft

TextArea、TextInput

非继承

paddingRight

TextArea、TextInput

非继承

paddingTop

TextArea、TextInput

非继承

selectionColor

ViewMenuItem

继承

基于文本的组件也支持标准文本样式，如 fontFamily、fontSize 和 fontWeight。

要了解移动设备主题是否支持某个样式属性，请打开 ActionScript 语言参考中有关组件的描述。许多样式限制的原因在于基于文本的移动设备组件不使用 TLF（文本布局框架），而是，移动设备外观使用更轻型的组件来替换基于 TLF 的文本控件。有关更多信息，请参阅在移动设备应用程序中使用文本。

移动设备主题不支持 rollOverColor、cornerRadius 和 dropShadowVisible 样式属性。

Flex 工程师 Jason SJ 在他的博客中介绍了移动设备应用程序的样式和主题。

移动设备外观部件

就外观部件而言，移动设备外观必须遵循与桌面外观相同的外观约定。如果组件必须具备某个外观部件，则移动设备外观必须声明相应类型的公共属性。

异常

并非所有外观部件都是必须具备的。例如，Spark Button 有可选的 iconDisplay 和 labelDisplay 外观部件。因此，移动设备 ButtonSkin 类可以声明 BitmapImage 类型的 iconDisplay 属性。也可以声明 StyleableTextField 类型的 labelDisplay 属性。

labelDisplay 部件不设置 id 属性，因为该部件所使用的所有样式都会继承文本样式。此外，StyleableTextField 不是 UIComponent，因此不具有 id 属性。iconDisplay 部件不支持样式，因此同样不设置 id 属性。

使用高级 CSS 设置样式

如果希望使用高级 CSS id 选择器设置外观部件的样式，则外观必须也设置外观部件的 id 属性。例如，ActionBar 的 titleDisplay 外观部件设置 id 属性，以便可以使用高级 CSS 设置其样式；例如： 
@namespace s "library://ns.adobe.com/flex/spark"; 
s|ActionBar #titleDisplay { 
    color:red; 
}

移动设备主题

移动设备主题决定着移动设备应用程序所支持的样式。可供移动设备主题使用的样式仅仅是 Sprak 主题所用样式中的一部分（外加少量的其它样式）。有关移动设备主题所支持的样式的完整列表，请参阅移动设备样式。

移动设备应用程序的默认主题

移动设备应用程序的主题在 themes/Mobile/mobile.swc 文件中定义。该文件定义了移动设备应用程序的全局样式，以及各个移动设备组件的默认设置。此主题文件中的移动设备外观在 spark.skins.mobile.* 包中定义。此包中包括 MobileSkin 基类。

默认情况下，mobile.swc 主题文件包括在 Flash Builder 移动设备项目中，但该 SWC 文件不会显示在包资源管理器中。

在 Flash Builder 中创建新的移动设备项目时，将默认应用此主题。

更改主题

要更改主题，请使用 theme 编译器参数来指定新的主题；例如： 
-theme+=myThemes/NewMobileTheme.swc

有关主题的更多信息，请参阅 About themes。

Flex 工程师 Jason SJ 在他的博客中介绍了如何在移动设备应用程序中创建和覆盖主题。

移动设备外观状态

MobileSkin 类可以重写 UIComponent 类的状态机制，但不采用桌面应用程序的视图状态实现方式。因此，移动设备外观仅声明由外观实现的主机组件外观状态。它们仅根据状态名称来通过过程更改状态。相反，桌面外观则必须声明所有状态，而无论这些状态是否使用。桌面外观还使用 mx.states.* 包中的类来更改状态。

大多数移动设备外观实现的状态数量都少于桌面外观。例如，spark.skins.mobile.ButtonSkin 类实现 up、down 和 disabled 状态。spark.skins.spark.ButtonSkin 可实现所有这些状态以及 over 状态。移动设备外观不会定义 over 状态的行为，因为触控设备通常不会使用该状态。

commitCurrentState() 方法

移动设备外观类在 commitCurrentState() 方法中定义其状态行为。可以通过在自定义外观类中编辑 commitCurrentState() 方法，在移动设备外观中添加行为来支持其它状态。

currentState 属性

外观的表现取决于 currentState 属性的值。例如，在移动设备 ButtonSkin 类中，currentState 属性的值决定着使用哪个 FXG 类作为边框类： 
if (currentState == "down") 
    return downBorderSkin; 
else 
    return upBorderSkin;

有关 currentState 属性的更多信息，请参阅 Create and apply view states。

移动设备图形

移动设备外观通常使用已编译的 FXG 作为图形资源。而在桌面应用程序的外观中，通常使用 MXML 图形来组成大多数绘图。

嵌入式位图图形

可以在类中使用嵌入式位图图形，这些图形通常能够正常工作。但是，这些位图有时无法在多种屏幕密度之间正常缩放。为了实现更好的缩放效果，应创建多个不同的资源，每个资源对应一种屏幕密度。

默认移动设备主题中的图形

在默认移动设备主题中，移动设备外观所使用的 FXG 图形都针对目标设备的 DPI 进行了优化。外观将根据根应用程序的 applicationDPI 属性值来加载图形。例如，在 DPI 为 320 的设备上加载 CheckBox 控件时，CheckBoxSkin 类为 upIconClass 属性使用 spark.skins.mobile320.assets.CheckBox_up.fxg 图形。而在 DPI 为 160 的设备上，则使用 spark.skins.mobile160.assets.CheckBox_up.fxg 图形。

以下桌面示例显示了不同 DPI 时 CheckBox 外观所使用的不同图形： 
<?xml version="1.0"?>
<!-- mobile_skins/ShowCheckBoxSkins.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:skins160="spark.skins.mobile160.assets.*"
    xmlns:skins240="spark.skins.mobile240.assets.*"
    xmlns:skins320="spark.skins.mobile320.assets.*">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    
    <!-- 
    NOTE: You must add the mobile theme directory to source path 
    to compile this example.
    
    For example: 
    mxmlc -source-path+=frameworksprojectsmobilethemesrc ShowCheckBoxSkins.mxml
    -->

    <s:Label text="160 DPI" fontSize="24" fontWeight="bold"/>
    <s:HGroup>
        <skins160:CheckBox_down/>
        <skins160:CheckBox_downSymbol/>
        <skins160:CheckBox_downSymbolSelected/>
        <skins160:CheckBox_up/>
        <skins160:CheckBox_upSymbol/>
        <skins160:CheckBox_upSymbolSelected/>
    </s:HGroup>

    <mx:Spacer height="30"/>

    <s:Label text="240 DPI" fontSize="24" fontWeight="bold"/>
    <s:HGroup>
        <skins240:CheckBox_down/>
        <skins240:CheckBox_downSymbol/>
        <skins240:CheckBox_downSymbolSelected/>
        <skins240:CheckBox_up/>
        <skins240:CheckBox_upSymbol/>
        <skins240:CheckBox_upSymbolSelected/>
    </s:HGroup>

    <mx:Spacer height="30"/>

    <s:Label text="320 DPI" fontSize="24" fontWeight="bold"/>
    <s:HGroup>
        <skins320:CheckBox_down/>
        <skins320:CheckBox_downSymbol/>
        <skins320:CheckBox_downSymbolSelected/>
        <skins320:CheckBox_up/>
        <skins320:CheckBox_upSymbol/>
        <skins320:CheckBox_upSymbolSelected/>
    </s:HGroup>

    <s:Label text="down, downSymbol, downSymbolSelected, up, upSymbol, upSymbolSelected"/>

</s:Application>

有关移动设备应用程序中的分辨率和 DPI 的更多信息，请参阅在一个移动设备应用程序中支持多个屏幕大小和 DPI 值。

在 ActionScript 外观中，也可以使用缓存为位图的矢量图形。这样做唯一的缺点是，无法使用需要重新绘制像素的过渡效果，例如 Alpha 过渡。有关更多信息，请参阅 www.adobe.com/cn/devnet/air/flex/articles/writing_multiscreen_air_apps.html。

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/fuland/p/3628922.html