Egret之Eui.Button换肤

2025-02-28 技术教程

在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

<?xmlversion="1.0"encoding="utf-8"?><e:Skinclass="skins.AonauflyButton"states="up,down,disabled"width="75"height="75"xmlns:e="http://ns.egret.com/eui"><e:Imagewidth="100%"height="100%"scale9Grid="1,3,8,8"alpha.disabled="0.5"source="变强01_png"source.down="橙色小按钮_png"source.disabled="蓝色小按钮_png"/><e:Labelid="labelDisplay"top="8"bottom="8"left="8"right="8"size="20"textColor="0xFFFFFF"verticalAlign="middle"textAlign="center"/><e:Imageid="iconDisplay"horizontalCenter="0"verticalCenter="0"/></e:Skin>

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

命名 :btn_demo

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

命名 :btn_demo2

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

代码如下:

moduleapp{exportclassButtonDemoextendseui.Componentimplementseui.UIComponent{privatebtn_demo:eui.Button;privatebtn_demo2:eui.Button;private$btn_demo3:eui.Button;publicconstructor(){super();this.skinName="resource/eui_skins/ButtonDemo.exml";}privatehandlerListener(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);}}privateonclick($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;}protectedchildrenCreated():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=neweui.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);}privatebaseChildren4BTN(btn:eui.Button):void{let$img2Btn_normal:eui.Image=<eui.Image>btn.getChildAt(0);egret.log("常态img0:"+$img2Btn_normal.source);//改变常态img(成功)//$img2Btn_normal.source=RES.getRes("蓝色小按钮_png");let$label2Btn:eui.Label=<eui.Label>btn.getChildAt(1);egret.log("文本1:"+$label2Btn.text);if(btn.numChildren>=3){let$icon2Btn:eui.Image=<eui.Image>btn.getChildAt(2);if($icon2Btn!=null&&$icon2Btn.source!=null)egret.log("icon2:"+$icon2Btn.source.toString());}}privatechangeChildren4BTN(btn:eui.Button):void{if(btn.skin!=null&&btn.skin.states!=null){letarr2States:eui.State[]=btn.skin.states;lettarget2State:eui.State=null;//up-状态target2State=arr2States[1];letproperty2up:eui.SetProperty=<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];letproperty2d:eui.SetProperty=<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");}elseif(property2d.name=="alpha"){egret.log("--改变图片透明度--");property2d.value=0.3;//改变透明度}}}}}

要更改normal :

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

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

补充

publicstaticsetBtnSkin(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"];elsebtn.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])}privatestaticreleaseBtn(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;}