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
<?xml version="1.0" encoding="utf-8"?> <e:Skin class="skins.AonauflyButton" states="up,down,disabled" width="75" height="75" xmlns:e="http://ns.egret.com/eui"><e:Image width="100%" height="100%" scale9Grid="1,3,8,8" alpha.disabled="0.5"source="变强01_png"source.down="橙色小按钮_png"source.disabled="蓝色小按钮_png"/><e:Label id="labelDisplay" top="8" bottom="8" left="8" right="8"size="20"textColor="0xFFFFFF" verticalAlign="middle" textAlign="center"/><e:Image id="iconDisplay" horizontalCenter="0" verticalCenter="0"/> </e:Skin>
②,现在一个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 = <eui.Image>btn.getChildAt(0);egret.log(" 常态 img 0 :" + $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("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 = <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 = <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"];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])}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;}
转载于:https://blog.51cto.com/aonaufly/1976445
Egret之Eui.Button换肤相关推荐
- jQuery制作360换肤
jQuery制作360换肤 <body><button>换肤</button><div class='box'><ul class='uls'&g ...
- android view设置按钮颜色_Android 主题换肤技术方案分析
写在前面 Android TV 电视开发,主题换肤,我感觉有两种层级的方式,一种是 系统级,另一种 是应用级, 我记得很早在 Linux 桌面开发的时候,我们之前的公司在GTK+上也实现了一套换肤UI ...
- 关于如何换肤、子类化的解决方案
对于应用程序的换肤及子类化.下面是我尝试过一些方法,以在CAboutDlg中子类化其中的Button为例: 第一种:直接用现成的类 1.自己写一个类class CButtonXP : public C ...
- 【Android】换肤技术讲解
主题,是许多APP必备的一个功能,用户可以根据自己的喜好,来切换具有个性的主题,同时能让我们的APP更具把玩性.这篇博文就来聊聊皮肤切换的原理,效果图如下: 这里为了便于理解,在换肤的时候,只是简单切 ...
- Android 几种换肤方式和原理分析
1.通过Theme切换主题 通过在setContentView之前设置Theme实现主题切换. 在styles.xml定义一个夜间主题和白天主题: <style name="Light ...
- 深入浅出换肤相关技术以及如何实现
温馨提示:阅读本文需要60-70分钟 微信公众号:顾林海 完成换肤需要解决两个问题: 如何获取换肤的View,利用LayoutInflater内部接口Factory2提供的onCreateView方法 ...
- JavaScript网页换肤
使网页背景颜色可选黄/粉 <!doctype html> <html> <head><title>网页换肤</title></head ...
- JS一起学01:css复习、js基础知识、事件、参数、函数、网页换肤、if判断、className问题、浏览器执行顺序
一.html/css 1. 什么是盒子模型? padding+border+width/height 2. float 浮动 (1)浮动的特性 脱离文档流 行内 ...
- jQuery formValidator表单验证插件4.1.0 下载 演示 文档 可换肤 代码生成器
更新记录: 2011/6/5 jQuery formValidator 4.1.0 ver 申明: 1.所有DEMO引用jQuery类库的时候,类库后面直接跟了版本号--表示插件支持的最高类库版本号 ...
- 在Ajax程序中实现无刷新换肤功能(asp.net2.0)
写了一年多的WEB程序,觉得程序中换肤的功能是非常吸引人眼球的技术.特别是在子父级的WEB平台与论坛上应用广泛,可以突出不同人的风格与个性. 从文章的标题上看是Ajax的无刷新换肤,只是本 ...
最新文章
- laravel实现数据分页
- c++语言中如何写入文件,C++:在多线程程序中写入文件
- jQuery .attr() vs .prop()
- 去重复java_去重复数据(JAVA)
- Objective-C组合模式(Composite)
- 千万并发连接下,如何保障网络性能
- 用计算机弹传说之下鱼姐的bgm,传说之下战斗曲曲谱_传说之下打托丽尔的bgm
- SQL数据查询之——嵌套查询
- CXF WebService整合SpringMVC的maven项目
- 新公司入职56天后的面谈小结
- 悉尼大学计算机学士,2017年悉尼大学计算机学士介绍
- 灵遁者散文小说集《从今往后》:永远都是开始
- java解压7z格式的压缩包
- 斗地主洗牌发牌——排序版
- 10.第三章 数字特征与特征函数(3)
- 腾讯通服务器临时文件,腾讯通详细使用教程
- The OSS Access Key Id you provided does not exist in our records
- 苹果微信更新不了最新版本_教你安卓微信怎么更新到最新版本?
- zt: 男人必听十大歌曲
- 站长 公益404页面
热门文章
- STEP2——《数据分析:企业的贤内助》重点摘要笔记(六)——数据描述
- 什么样的人适合搞科研?
- 无法自动修复此计算机鼠标按不了机,win10系统罗技M558鼠标无法自动连接的修复方法...
- 创意CSS时钟网页代码
- 三种存储类型:块存储、文件存储、对象存储
- HTML+CSS大作业:仿小米手机商城网站设计——仿小米手机商城全套(37页) 商城网购HTM5网页设计作业成品
- uniApp uview图片懒加载
- google浏览器插件之身份验证器Authenticator MFA
- MFC仿360屏幕截图
- os系统服务器防火墙怎么关闭,mac防火墙如何关闭