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

实例演示

原文地址:https://www.cnblogs.com/tankaixiong/p/2845165.html