Egret之Eui.Button换肤

在Gui中对Button换皮相当的给力:

Gui.Button.skinName = new egret.gui.ButtonSkin(normal_resource, up_resource , disable_resource);

但是在EUI中没有ButtonSkin类.所以找到了其他方法.

我用三种按钮进行测试 : 1,有自定义皮肤的按钮 2,没有自定义皮肤的按钮(三种状态都有resource图片) , 3,new的Button

测试View:

一 : 自定义皮肤情况

①,自定义皮肤 : AonauflyButton.exml

②,现在一个ButtonDemo.exml用于显示如上图.建一个Button,设置他的皮肤为我们的自定义皮肤

命名 : btn_demo

二 : 使用默认Button(三种状态都有resource图片)

命名 : btn_demo2

三 : 自定义一个Button , 命名 : $btn_demo3

代码如下:

module app {        export class ButtonDemo extends eui.Component implements eui.UIComponent {                private btn_demo : eui.Button;                private btn_demo2 : eui.Button;                private $btn_demo3 : eui.Button;                public constructor() {                        super();                        this.skinName = "resource/eui_skins/ButtonDemo.exml";                }                private handlerListener( isAdd : boolean ) : void{                        this.touchEnabled = isAdd;                        if( isAdd ){                                this.addEventListener( egret.TouchEvent.TOUCH_TAP , this.onclick , this );                        }else{                                this.removeEventListener( egret.TouchEvent.TOUCH_TAP , this.onclick , this );                        }                }                private onclick( $e : egret.TouchEvent ) : void{                        this.btn_demo.enabled = !this.btn_demo.enabled;                        this.btn_demo2.enabled = !this.btn_demo2.enabled;                        this.$btn_demo3.enabled = !this.$btn_demo3.enabled;                }                protected childrenCreated():void{                        super.childrenCreated();                        this.handlerListener(true);                        this.btn_demo.label="第一种情况";                        this.btn_demo.icon = RES.getRes("button_down_png");                        this.baseChildren4BTN(this.btn_demo);                        this.changeChildren4BTN( this.btn_demo );                        egret.log("===== 第二种情况 =====");                        this.baseChildren4BTN( this.btn_demo2 );                        this.changeChildren4BTN( this.btn_demo2 );                        egret.log("===== 第三种情况 =====");                        this.$btn_demo3 = new eui.Button();                        this.$btn_demo3.label = "第三种情况";                        this.$btn_demo3.x = this.$btn_demo3.y = 250;                        this.addChild( this.$btn_demo3 );                        this.baseChildren4BTN( this.$btn_demo3 );                        this.changeChildren4BTN( this.$btn_demo3 );                }                private baseChildren4BTN(btn : eui.Button) : void{                        let $img2Btn_normal : eui.Image = btn.getChildAt(0);                        egret.log(" 常态 img 0 :" + $img2Btn_normal.source);                        // 改变常态img( 成功 )                        // $img2Btn_normal.source = RES.getRes("蓝色小按钮_png");                        let $label2Btn : eui.Label = btn.getChildAt(1);                        egret.log(" 文本 1 :" + $label2Btn.text);                        if( btn.numChildren >= 3 ){                                let $icon2Btn : eui.Image = btn.getChildAt(2);                                if( $icon2Btn != null && $icon2Btn.source != null)                                        egret.log("icon 2 :" + $icon2Btn.source.toString());                        }                }                private changeChildren4BTN(btn : eui.Button) : void{                        if( btn.skin != null && btn.skin.states != null){                                let arr2States : eui.State[] = btn.skin.states;                                let target2State : eui.State = null;                                //up - 状态                                target2State = arr2States[1];                                let property2up: eui.SetProperty = target2State.overrides[ target2State.overrides.length -1];                                if( property2up.name == "source" ){                                        egret.log("up : value ->" + property2up.value );                                        property2up.value = RES.getRes("蓝色小按钮_png");                                }                                //disabled 状态                                target2State = arr2States[2];                                let property2d: eui.SetProperty = target2State.overrides[ target2State.overrides.length -1];                                if( property2d.name == "source" ){                                        egret.log("--改变图片资源--");                                        egret.log("disabled : value ->" + property2d.value );                                        property2d.value = RES.getRes("radiobutton_select_up_png");                                }else if( property2d.name == "alpha" ){                                        egret.log("--改变图片透明度--");                                        property2d.value = 0.3;//改变透明度                                }                        }                }        }}

要更改normal :

要更改 up , disable :(可以同时有alpha和source , 可以同时得修改他们)

//******************************************************************************************************************

补充

public static setBtnSkin(btn: eui.Button, upImg, downImg, enableImg = null): void {                if (btn.skin.states[0].overrides[0]["value"] == upImg && btn.skin.states[1].overrides[0]["value"] == downImg && btn.skin.states[2].overrides[0]["value"] == enableImg)                        return;                btn.skin.states[1].overrides[0]["value"] = downImg;                if (btn.enabled)                        btn.skin.states[2].overrides[0]["value"] = btn.skin.states[0].overrides[0]["value"];                else                        btn.skin.states[0].overrides[0]["value"] = btn.skin.states[2].overrides[0]["value"]                btn.enabled = !btn.enabled;                DelayCall.call(1, EuiUtil.releaseBtn, EuiUtil, [btn, !btn.enabled, upImg, enableImg == null ? upImg : enableImg])        }        private static releaseBtn(btn: eui.Button, flag: boolean, upimg: string, disimg: string) {                btn.skin.states[0].overrides[0]["value"] = upimg;                btn.skin.states[2].overrides[0]["value"] = disimg;                btn.enabled = flag;        }