Egret之Eui.Button换肤
admin
2023-02-17 15:00:13
0

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

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


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

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

测试View:

Egret之Eui.Button换肤


一 : 自定义皮肤情况

①,自定义皮肤 : AonauflyButton.exml



    
    
    

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

Egret之Eui.Button换肤

命名 : btn_demo


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

Egret之Eui.Button换肤

命名 : 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 : 

Egret之Eui.Button换肤


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

Egret之Eui.Button换肤




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

补充

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;

        }


上一篇:Egret之自定义类库(一)

下一篇:Egret之Webp

相关内容

热门资讯

美伊维持停火,国际油价回落 新华社纽约5月5日电(记者刘亚南) 由于美国与伊朗停火状态持续,国际原油期货价格5日早盘显著走低后窄...
“AI是否会取代人类工作” 诺... 过去一年,“AI是否会取代人类工作”的讨论持续升温,相关研究报告、行业预判和真实案例不断刷屏,让职场...
每经热评丨豆包收费标志着国产A... 来源:滚动播报 (来源:千龙网) 春节的AI(人工智能)红包大战硝烟尚未散尽,豆包App Store...
北斗导航、无人机“显身手” 春... 眼下,产粮大省黑龙江的春耕工作正有序进行,在位于黑龙江鹤岗的普阳农场,水稻插秧工作从今天起全面启动,...
强词夺理!“中国不应获得最先进... ► 文 观察者网 熊超然 一边想赚中国市场的钱,一边却又“提防”中国科技的崛起,英伟达创始人兼首席执...
苹果iOS 27将允许用户选择... IT之家 5 月 6 日消息,彭博社记者马克 · 古尔曼今日报道称,苹果计划在今年秋季发布的 iOS...
鲁比奥:我们改了措辞,中俄别再... 【文/观察者网 齐倩】当地时间5月5日,美国国务卿鲁比奥在白宫简报会上称,美国提出了新的联合国决议,...
“南鼠北调”为攻击蒋万安?蓝营... 海峡导报综合报道 台北、新北地区近期分别发生“汉坦病毒”死亡及确诊个案,使鼠患问题引发关注。“青鸟”...
巴拿马外长喊话访华团:尊重中国... 【文/观察者网 柳白】据香港英文媒体《南华早报》报道,数名巴拿马议员组成的代表团抵达中国访问之际,巴...
华帝燃气灶自动熄火什么原因 原因:热敏针出现故障,检查灶眼,看中间的火焰能不能烧到探针,烧到探针才能定住火,在点火的时候,长按几...