应用自定义移动设备外观

应用自定义移动设备外观

 

可以将自定义外观应用到移动设备组件，其方法与将自定义外观应用到桌面应用程序中的组件相同。

以 ActionScript 应用外观

// Call the setStyle() method: 
myButton.setStyle("skinClass", "MyButtonSkin");

以 MXML 应用外观

<!-- Set the skinClass property: --> 
<s:Button skinClass="MyButtonSkin"/>

以 CSS 应用外观

// Use type selectors for mobile skins, but only in the root document: 
s|Button { 
    skinClass: ClassReference("MyButtonSkin"); 
} 

或者

// Use class selectors for mobile skins in any document: 
.myStyleClass { 
    skinClass: ClassReference("MyButtonSkin"); 
}

应用自定义移动设备外观的示例

下面的示例演示了全部三种将自定义移动设备外观应用到移动设备组件的方法：

<?xml version="1.0" encoding="utf-8"?>
<!-- mobile_skins/views/ApplyingMobileSkinsView.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" title="Home">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    
    <fx:Script>
        <![CDATA[
            import customSkins.CustomButtonSkin;
            private function changeSkin():void {
                b3.setStyle("skinClass", customSkins.CustomButtonSkin);
            }
        ]]>
    </fx:Script>
    
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        .customButtonStyle {
            skinClass: ClassReference("customSkins.CustomButtonSkin");
        }
    </fx:Style>
    
    <s:Button id="b1" label="Click Me" skinClass="customSkins.CustomButtonSkin"/>
    <s:Button id="b2" label="Click Me" styleName="customButtonStyle"/>
    <s:Button id="b3" label="Click Me" click="changeSkin()"/>
    
</s:View>

使用 CSS 类型选择器应用自定义外观时，应在根移动设备应用程序文件中设置选择器。不能在移动设备视图中设置类型选择器，自定义组件也是如此。仍可以使用类选择器在移动设备应用程序的任何视图或文档中以 ActionScript、MXML 或 CSS 设置样式。