一 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. 学习地址(oraclemysqllinux)

    1.安装配置 http://blog.chinaunix.net/uid-27126319-id-3466193.htmlhttp://www.cnblogs.com/gaojun/archive/2 ...

  2. [Linux] - centos使用mount + nfs 远程共享存储

    服务端安装nfs 1.使用yum安装nfs yum install nfs-utils nfs-utils-lib -y 如果安装过程出现这样的错误: 得先安装lvm2 yum install -y ...

  3. shell script

    一.shell script的编写与执行 1.shell script 的编写中还需要用到下面的注意事项: a.命令的执行是从上到下,从左到右地分析与执行 b.命令.参数间的多个空白都会被忽略掉 c. ...

  4. EasyUI 中 DataGrid 控件 列 如何绑定对象中的属性

    EasyUI 中 DataGrid 控件 是我们经常用到的控件之一, 但是 DataGrid 控件 在绑定显示列时却不支持对象属性绑定. 模型如下: public class Manager impl ...

  5. fdisk -c 0 350 1000 300命令

    在Linux中有一个fdisk的分区命令,在对开发板的nand或者emmc分区也会用到这个命令, fdisk -c 这里0 350 1000 300分别代表: 每个扇区大小为0,一共350个柱面,起始 ...

  6. nyoj 142, poj 1039 ,hdu 1454 管道问题

    http://acm.nyist.net/JudgeOnline/problem.php?pid=142 第一道解析几何问题,比较纠结,主要是几个解析几何的基本操作,包括求两线段的叉积,判断左右方向, ...

  7. Android开发-Android Studio使用问题解决

    回头一看,很久没来更新了,归其原因,还是懒癌发作,倒是生活作息规律了,几乎每天都在11点前休息.今天趁着培训,使用android studio,发现几个坑: 1.android studio每次都提示 ...

  8. system verilog的一些总结(从其他博客复制来的)

    转载自 http://blog.sina.com.cn/s/blog_e7fec2630101f5t9.html SystemVerilog是一种硬件描述和验证语言(HDVL),它基于IEEE 136 ...

  9. Model View Controller

    On the iPhone or iPod touch, a modal view controller takes over the entire screen. This is the defau ...

  10. (转) TexturePacker 3.0 使用教程

    著名的TexturePacker 已经升级到3.0了,下载地址: http://www.codeandweb.com/texturepacker 免费 license 申请地址: http://www ...