feathers ui 换肤

Feathers是轻量级，易于定制皮肤和扩展的UI组件（适用于移动设备和桌面）。Feathers通过Starling框架，利用GPU的强大能力渲染组件，来实现更加平滑和友好的体验。

现在成为Adobe支持的类库!

特点：

跨平台
易于皮肤定制
自由和开放源码

 

这里主要讲怎么换肤，虽然官网已经提供了4套主题，但自定皮肤肯定是必需的！

以BUTTON为例子：


一，主题皮肤

AeonDesktopTheme类通过TextureAtlas设置主题皮肤
注意设置皮肤要在所有控件实例化使用之前
this.theme = new AeonDesktopTheme(this.stage);
之后才能
var mybtn:Button = new Button();
addChild(mybtn);

自定皮肤：

[Embed(source="/../assets/images/aeon.png")]
protected static const ATLAS_IMAGE:Class;

[Embed(source="/../assets/images/aeon.xml",mimeType="application/octet-stream")]
protected static const ATLAS_XML:Class;

方式一，//用于更改单个个别的主题
用户自定义皮肤可以不改变原来的资源文件，继承了自带皮肤后可以扩展自己的皮肤，举个最简单的方式：
http://wiki.starling-framework.org/feathers/extending-themes


var theme:MetalWorksMobileTheme = new MetalWorksMobileTheme();
theme.setInitializerForClass( Button, myCustomButtonInitializer, "my-custom-button" );//这里是重写主题的关键方法

var button:Button = new Button();
button.nameList.add( "my-custom-button" );//绑定你定义的主题
this.addChild( button );

//重新设置按钮主题
private function myCustomButtonInitializer( button:Button ):void
{
button.defaultSkin = new Image( upTexture );
button.downSkin = new Image( downTexture );
button.hoverSkin = new Image( hoverTexture );

button.defaultLabelProperties.textFormat = new TextFormat( "fontName", 18, 0xffffff );
}

 

另外一种方法：更改了全局的主题
继承AeonDesktopTheme类在

override protected function initialize():void
{
super.initialize();

this.setInitializerForClass( Button, myCustomButtonInitializer, ALTERNATE_NAME_MY_CUSTOM_BUTTON );
}

private function myCustomButtonInitializer( button:Button ):void
{
button.defaultSkin = new Image( upTexture );
button.downSkin = new Image( downTexture );
button.hoverSkin = new Image( hoverTexture );

button.defaultLabelProperties.textFormat = this.smallUIDarkTextFormat;
button.disabledLabelProperties.textFormat = this.smallUIDisabledTextFormat;
button.selectedDisabledLabelProperties.textFormat = this.smallUIDisabledTextFormat;
}

 

 

重写主题：
extends DisplayListWatcher :

override protected function initialize():void

 

 

 

 

 

相关资料：

http://www.starlinglib.com/wiki/News:Starling_Feathers

实例演示

posted @ 2013-01-05 09:23  itank  阅读(3299)  评论(1)  编辑  收藏  举报