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显示的基础
