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

實例演示


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM