自定义AIR mobile应用的样式或皮肤

环境：

Adobe Flash Builder 4.5.1 + Flex SDK4.5.1 + AIR SDK 2.7

 

参考资料：

Flex移动皮肤－第一部分：增强的皮肤功能基础   （英文原文 ）

Flex移动skin – 第2部分：处理不同的像素密度

Flex移动skin – 第3部分: 多平台开发

A custom-skinned mobile Flex application

Tutorial: Styling the ActionBar

iOS Theme for Flex Mobile Projects – Proof of Concept

iOS TitleWindow Skin

 

mobile项目的默认主题为Mobile，该主题相关的源文件位于：Adobe Flash Builder 4.5 \sdks\4.5.1\frameworks\projects\mobiletheme\

mobile skin的特点：

1. 一般为AS（性能优于mxml）实现；

2. 引用的背景等一般为fxg文件；

3. 通常需要针对160、240、320dpi分别设置大小、边距等。

 

1. Button

1) 默认skin：spark.skins.mobile.ButtonSkin

2) 自定义需求：使用背景图片

a) 方法1：

在构造函数里设置 upBorderSkin , downBorderSkin 的值（可以是图片、也可以是fxg）即可（layoutGap, layoutCornerEllipseSize , measuredDefaultHeight 等属性也在构造函数中设置，如需修改，为其赋新值即可）。

b) 方法2：

override getBorderClassForCurrentState 方法：

override protected function getBorderClassForCurrentState():Class
{
	upBorderSkin = hostComponent.getStyle("upSkin");
	downBorderSkin = hostComponent.getStyle("downSkin");
			
	return super.getBorderClassForCurrentState();
}

3) 常用样式属性：color , chromeColor , skinClass , upSkin , downSkin

 

2. CheckBox

1) 默认skin：spark.skins.mobile.CheckBoxSkin

2) 自定义需求：使用自定义的样式（图片）

方法：

在构造函数里设置 upBorderSkin , upSelectedIconClass , downIconClass 的值（可以是图片、也可以是fxg）即可（iconClass相关的属性总共有8个，用自定义的图片的话一般来说只要改写3个值即可，其他几项分别设为与相近状态一致的值即可，如：downSelectedIconClass = upSelectedIconClass; ），通常还需调整下layoutGap , layoutBorderSize 的值。

3) 常用样式属性：symbolColor 、skinClass

 

3. AntionBar

1) 默认skin：spark.skins.mobile.ActionBarSkin

2) 自定义需求：使用自定义的背景图片

方法：

a) override  createChildren 方法，调用super方法前，增加以下代码：

if (hostComponent.getStyle("backgroundImage"))
{
    // Image is below everything else in the display list.
    backgroundImage = new Image();
    backgroundImage.source = hostComponent.getStyle("backgroundImage");
    addChild(backgroundImage);
}

b) 同时 override  layoutContents 方法，调用 super 方法后，增加以下代码：

if (backgroundImage)
{
    setElementSize(backgroundImage, unscaledWidth, unscaledHeight);
}

c) css 里设置 backgroundImage。

3) 常用样式：

a) 设置 defaultButtonAppearance: beveled; 表示按钮使用 ios 风格

b) 设置ios风格下的导航按钮属性：

s|ActionBar.beveled s|Group#navigationGroup s|Button
{
...
} 

c) 设置ios风格下的操作按钮属性：

s|ActionBar.beveled s|Group#actionGroup s|Button
{
...
}

d) 设置标题文字属性：

s|ActionBar #titleDisplay
{
    fontSize: 50;
    ...
}

 

4. View

1) 默认skin：spark.skins.mobile.SkinnableContainerSkin

2) 自定义需求：使用背景图片

方法：

a)  override  createChildren 方法（同 ActionBar 的处理）：

b) 同时 override  layoutContents 方法，调用 super 方法后，增加以下代码：

if (backgroundImage)
{
    // Set the height of backgroundImage.
    titleHeight = hostComponent.getStyle("titleHeight");
    if (isNaN(titleHeight))
    {
        // "titleHeight" default value equals to 10mm.
        switch (applicationDPI)
        {
            case DPIClassification.DPI_320:
            {
                titleHeight = 126;
							
                break;
            }
            case DPIClassification.DPI_240:
            {
                titleHeight = 94;
							
                break;
            }
            default:
            {
                // default DPI_160
                titleHeight = 63;
							
                break;
            }
        }
    }
    setElementSize(backgroundImage, unscaledWidth, titleHeight);
}

c) css 里设置 backgroundImage。

3) 常用样式属性：skinClass

 

 

待续。。。