一 ToggleButton和ToggleSwitch区别

没区别,就是继承...

export class ToggleSwitch extends ToggleButton {
/**
* @language en_US
* Constructor.
*
* @version Egret 2.4
* @version eui 1.0
* @platform Web,Native
*/
/**
* @language zh_CN
* 构造函数。
*
* @version Egret 2.4
* @version eui 1.0
* @platform Web,Native
*/
public constructor() {
super(); }
}

二 ToggleSwitch实现音乐开关

皮肤文件过于复杂,解读exml源码,使用滑块底图和滑块,根据按钮状态,设置滑块位置以及底图图片。

这在重新定义皮肤上有点困难,比如你换一张滑块底图和滑块,你得按照这个皮肤去调。。。

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="skins.ToggleSwitchSkin" states="up,down,disabled,upAndSelected,downAndSelected,disabledAndSelected" xmlns:e="http://ns.egret.com/eui">
<e:Image source="on_png"
source.up="off_png"
source.down="off_png"
source.disabled="off_png"/>
<e:Image source="handle_png"
horizontalCenter="-18"
horizontalCenter.upAndSelected=""
horizontalCenter.downAndSelected=""
horizontalCenter.disabledAndSelected=""
verticalCenter=""/>
</e:Skin>

三 用ToggleButton更方便

和ToggleSwitch不同的是,ToggleSwitch图片是3张,滑块,滑块底图开,滑块底图关。

ToggleButton图片2张,正常和按下图片。

在按钮状态改变时,获取selected值,根据这个值去开关音乐。

class HomScene extends eui.Component{
private btn:eui.ToggleButton; public constructor() {
super();
this.skinName = "HomeSceneSkin";
} public childrenCreated(){
this.btn.addEventListener(eui.UIEvent.CHANGE, this.onChange, this);
} private onChange(e:eui.UIEvent){
let btn:eui.ToggleButton = e.target;
console.log(btn.selected); //按下true, 正常false
} }

EUI ToggleButton ToggleSwitch 实现类似音乐开关按钮的更多相关文章

  1. html+css+js实现类似音乐app似的列表播放

    最近做了一个类似于音乐app里面列表播放的功能,主要是音频播放和按钮状态的联动: 界面如下: 如上图所示 上面有一个播放按钮 下面有一个播放列表 上面还有一个歌曲长度的总时长 上面一个按钮能控制下面所 ...

  2. Android基础控件ToggleButton和Switch开关按钮

    1.简介 ToggleButton和Switch都是开关按钮,只不过Switch要Android4.0之后才能使用! ToggleButton <!--checked 是否选择--> &l ...

  3. Qt编写自定义控件一开关按钮

    从2010年进入互联网+智能手机时代以来,各种各样的APP大行其道,手机上面的APP有很多流行的元素,开关按钮个人非常喜欢,手机QQ.360卫士.金山毒霸等,都有很多开关控制一些操作,在Qt widg ...

  4. ToggleButton与Switch

    状态开关按钮togglebutton和开关switch 状态开关按钮togglebutton和开关switch是由button派生出来的,本质也是按钮,支持BUtton的各种属性,从功能上看,Togg ...

  5. Egret官方案例学习笔记

    1.资源记载方式 (1)Egret引擎是2.0.5. (2)resource/resource.json文件是: { "resources": [ { "name&quo ...

  6. iOS - Push 通知推送

    1.UserNotifications 通知是 App 用来和用户交流的一种方式,特别是当 App 并没有在前台运行的时候.通知,正如它的名称所强调的,被用作向用户'通知'一个事件,或者仅仅向用户提示 ...

  7. 《大象-Think In UML》读书笔记2

    什么是UML? UML本身并没有包含软件方法,而仅仅是一种语言,一种建模用的语言,而所有的语言都是基本词汇和语法两部分构成的,UML也不例外.UML中定义了一些建立模型所需要的.表达某种特定含义的基本 ...

  8. 【Cocos2d-Js基础教学(4)cocostudio在cocos2dx-Js中的使用】

    首先我们打开官方网站www.cocos2d-x.org,下载我们安装最新的cocostudio(cocos). 简介: Cocos Studio升级为cocos.更优秀的产品.更优质的服务.游戏开发一 ...

  9. 团队项目2.0软件改进分析MathAPP

    软件改进分析 在此基础上,进行软件的改进. 首先,我们把这个软件理解成一个投入市场的.帮助小朋友进行算术运算练习的APP. 从质量保证的角度,有哪些需要改进的BUG? 从用户的角度(把自己当成小学生或 ...

随机推荐

  1. select 触发事件

    需求:现在需要获取用户选择的选项,同时获取里面自定义的字段. 因为option没法设置事件 <select class="form-control js-example-basic-s ...

  2. Beta版本冲刺——day4

    No Bug 031402401鲍亮 031402402曹鑫杰 031402403常松 031402412林淋 031402418汪培侨 031402426许秋鑫 站立式会议 今日计划表 人员 工作 ...

  3. 如何区分Babel中的stage-0,stage-1,stage-2以及stage-3(一)

    大家知道,将ES6代码编译为ES5时,我们常用到Babel这个编译工具.大家参考一些网上的文章或者官方文档,里面常会建议大家在.babelrc中输入如下代码: { "presets" ...

  4. Oracle 存储过程 split 代码实现

    实现 字符串分割, 算法 如下: 算法 1: DECLARE remove_column myvarray_list; x ); sub ); i NUMBER; j NUMBER; c NUMBER ...

  5. 【学】jQuery的源码思路3——添加事件及其他

    这段添加的方法有: 各类事件函数 css() addEvent() toggle() //添加各种事件,将常用的事件名称放入数组,然后循环着加入到zQuery对象的原型上 var eventArr = ...

  6. windows和linux实现文件共享

    linux和windows实现共享,需要安装samba服务器 安装步骤: 1.查看是否已经安装samba rpm -q samba 2.如果已经安装,如果你想再次安装,可以卸载 rpm -e samb ...

  7. UVA 1151 买还是建(最小生成树)

    买还是建 紫书P358 [题目链接]买还是建 [题目类型]最小生成树 &题解: 这题真的心累,看了3天,最后照着码还是wa,先放lrj代码,以后再看吧 &代码: // UVa1151 ...

  8. STM32 USB转串口驱动 Virtual COM Port Driver(V1.3.1)

    将stm32的USB口接到PC端后,PC端会要求安装一个STM32 USB Virtual COM Port Driver,然后就可以用串口调试助手对其操作了

  9. php中urldecode()和urlencode()

    urlencode()函数原理就是首先把中文字符转换为十六进制,然后在每个字符前面加一个标识符%.urldecode()函数与urlencode()函数原理相反,用于解码已编码的 URL 字符串,其原 ...

  10. Python基础篇【第7篇】: 面向对象(1)

    面向对象技术简介 相近对象,归为类 在人类认知中,会根据属性相近把东西归类,并且给类别命名.比如说,鸟类的共同属性是有羽毛,通过产卵生育后代.任何一只特别的鸟都在鸟类的原型基础上的.面向对象就是模拟了 ...