AsWing换肤

说道AsWing换肤,其实官方的源码包里已经给我们提供了实例,只是没有说明文档罢了。

下面介绍一下AsWing换肤要用到得东西。

以AsWing1.5为例,到google code上下载他的aswing_1.5_allinone。

在allinone文件夹里我们可以看到一个工程文件夹SkinBuilderLAF,这个工程是我们换肤要用到的类库,你编译你自己的皮肤的时候需要导入这个工程的swc或者src文件夹,当然aswing的工程文件也是必须导入的

下面我们可以看看allinone里的实例文件

FlaSkinTemplate_fl
FlaSkinTemplate_fx
OrangeLAF

这个三个文件夹是官方给我们的皮肤实例工程

其中fl是使用flash编译的,另外两个需要使用Flex SDK编译,因为用到了Embed语法

在看这些工程之前,建议大家去看看as的反射,以及Embed语法

因为这些在皮肤工程中是比较重要的

我们抛弃FlaSkinTemplate_fl,因为用fl编译皮肤是一个不是很好的方式

我们以OrangeLAF为例解释整个皮肤制作过程

在这个文件项目文件夹下一路找到OrangeLAF\src\org\aswing\skinbuilder\orange\OrangeLookAndFeel.as
这是这个项目的主文件,也就是我们换肤时所要用到的类

换肤时我们用到的语法是UIManager.setLookAndFeel(new OrangeLookAndFeel())
这也就相当于皮肤文件的入口了

打开这个类看看,父类为BasicLookAndFeel,也就是aswing默认的皮肤文件

继续向下看

override protected function initClassDefaults(table:UIDefaults):void{
    super.initClassDefaults(table);
    var uiDefaults:Array = ["ScrollBarUI", SkinScrollBarUI,
        "ProgressBarUI", SkinProgressBarUI,
        "ComboBoxUI", SkinComboBoxUI,
        "SliderUI", SkinSliderUI,
        "AdjusterUI", SkinAdjusterUI,
        "TabbedPaneUI", SkinTabbedPaneUI,
        "ClosableTabbedPaneUI", SkinClosableTabbedPaneUI,
        "SplitPaneUI", OrangeSplitPaneUI ];
    table.putDefaults(uiDefaults); }

这里表示,把以前用代码绘制皮肤的方式改为用素材绘制,我们可以从SkinBuilderLAF文件夹下找到这几个字符串对应的类

我们可以发现AsWing中任何一个设置都是 字符串-Class,更准确的说是 键名和键值的对应方式

每个键名代表一个控件或控件的一部分或者一个状态,后面是这个状态对应的素材类

[Embed(source="assets/Button_defaultImage.png", scaleGridTop="11", scaleGridBottom="12", scaleGridLeft="5", scaleGridRight="75")]
private var Button_defaultImage:Class;

[Embed(source="assets/Button_pressedImage.png", scaleGridTop="11", scaleGridBottom="12", scaleGridLeft="5", scaleGridRight="75")]
private var Button_pressedImage:Class;

这里我们很能看见Embed语法,把一个外部素材加载为本地的一个类,请注意这个绑定的类名,在之后是要用到的

至于Embed语法和9宫格设置请自己查阅相关资料

之后进入真正的换肤过程

以Frame为例

//Backgorund scale-9 (Include title bar background all in one picture) [Embed(source="assets/Frame_activeBG.png", scaleGridTop="27", scaleGridBottom="212", scaleGridLeft="12", scaleGridRight="354")] private var Frame_activeBG:Class;

这里绑定了一个图片到Frame_activeBG这个类

// *** Frame comDefaults = [
        "Frame.background", table.get("window"), 
        "Frame.foreground", table.get("windowText"),
        "Frame.opaque", true,
        "Frame.icon", OrangeFrameIcon,
        "Frame.bg", SkinFrameBackground,
         //this will use Frame.activeBG and Frame.inactiveBG
        "Frame.titleBarHeight", 28,
         //modify this to fit title bar height of bg image   
        "Frame.border", new SkinEmptyBorder(0, 4, 5, 4),
         //modify this to fit the frame bg image
        "Frame.backgroundMargin", new InsetsUIResource(4, 0, 0, 0),   
        "Frame.activeBG", Frame_activeBG,
        "Frame.inactiveBG", Frame_inactiveBG, "Frame.titleBarBG",
        //**************************************
       //so on

这是真个frame的皮肤配置

"Frame.inactiveBG", Frame_inactiveBG, 看对应上了,至于上面的"Frame.titleBarHeight", 28等是为了配合背景的标题栏的高度要自己手动设置的

总是,Aswing的皮肤制作需要你自定义一个BasicLookAndFeel的子类,根据你的需要,更改每个皮肤的键对应的素材类,以及相应的大小和位置

然后你就可以在你的Aswing中set你的皮肤文件了

你可能会疑惑,我怎么会知道Aswing中有哪些控件对应那些键名呢,去看源代码里的BasicLookAndFeel类,这里由所有的Aswing控件对应的键名,因为这里是Aswing显示的基础

Leave a Reply