玩溜Cocos Creator入门学习（七）UI系统介绍UI组件
效果图
引言
Toggle 是一个 CheckBox，当它和 ToggleGroup 一起使用的时候，可以变成 RadioButton。也就是经常用到的选择、多选按钮
toggle 组件
点击 属性检查器 下面的 添加组件 按钮，然后从 添加 UI 组件 中选择 Toggle，即可添加 Toggle 组件到节点上。
Toggle 的脚本接口请参考Toggle API。
Toggle 属性
| 属性 | 功能说明 |
|---|---|
| isChecked | 布尔类型，如果这个设置为 true，则 check mark 组件会处于 enabled 状态，否则处于 disabled 状态。 |
| checkMark | cc.Sprite 类型，Toggle 处于选中状态时显示的图片 |
| toggleGroup | cc.ToggleGroup 类型， Toggle 所属的 ToggleGroup，这个属性是可选的。如果这个属性为 null，则 Toggle 是一个 CheckBox，否则，Toggle 是一个 RadioButton。 |
| Check Events | 列表类型，默认为空，用户添加的每一个事件由节点引用，组件名称和一个响应函数组成。详情见Toggle 事件章节 |
注意：因为 Toggle 继承至 Button，所以关于 Toggle 的 Button 相关属性的详细说明和用法请参考 Button 组件对应的章节，这里就不再赘述了。
Toggle 事件
| 属性 | 功能说明 |
|---|---|
| Target | 带有脚本组件的节点 |
| Component | 脚本组件名称 |
| Handler | 指定一个回调函数，当Toggle的事件发生的时候会调用此函数 |
| CustomEventData | 用户指定任意的字符串作为事件回调的最后一个参数传入 |
Toggle事件的回调参数有两个： 第一个是Toggle本身，第二个参数是customEventData。
Toggle详细说明
Toggle的节点树：
官方文档中说要将checkmark放到Background节点上面，这句话咋一听没毛病，但是总觉的有点不太恰当。
注意： 在层级结构上面要将checkmark放到Background节点上面，或者在Background添加一个checkmark的子节点。
代码添加回调关联UI
方法一 （纯代码添加回调）
这种方法添加的事件回调和使用编辑器添加的事件回调是一样的，通过代码添加， 你需要首先构造一个 cc.Component.EventHandler 对象，然后设置好对应的 target, component, handler 和 customEventData 参数。
官方实例
cc.Class({
extends: cc.Component,
properties: {
toggle :{
type: cc.Toggle,
default: null
}
},
onLoad () {
var checkEventHandler = new cc.Component.EventHandler();
checkEventHandler.target = this.node; //这个 node 节点是你的事件处理代码组件所属的节点
checkEventHandler.component = "ToggleScript1";
checkEventHandler.handler = "callback";
checkEventHandler.customEventData = "success";
this.toggle.checkEvents.push(checkEventHandler);
},
callback: function(toggle, customEventData) {
//这里 toggle 是 事件发出的 Toggle 组件
//这里的 customEventData 参数就等于你之前设置的 "foobar"
console.log("toggle1 " + customEventData);
alert("toggle1 " + customEventData);
},
});
将该脚本添加到Toggle1节点上面，如图：
方法二
通过 toggle.node.on('toggle', ...) 的方式来添加
cc.Class({
extends: cc.Component,
properties: {
toggle: cc.Toggle
},
onLoad: function () {
this.toggle.node.on('toggle', this.callback, this);
},
callback: function (event) {
var toggle = event;
//do whatever you want with toggle
if(toggle.isChecked){
console.log("toggle2 YES");
alert("toggle2 YES");
}else{
console.log("toggle2 NO");
alert("toggle2 NO");
}
}
});
当然也必须将脚本添加到节点上面，并将创建的Toggle2拖拽到你的脚本属性上面
方法三用代码获取UI控件
这种方法只能获取到当前的node中的UI控件，并且该控件有且只有一个
cc.Class({
extends: cc.Component,
properties: {
},
onLoad () {
var checkEventHandler = new cc.Component.EventHandler();
checkEventHandler.target = this.node; //这个 node 节点是你的事件处理代码组件所属的节点
checkEventHandler.component = "ToggleScript3";
checkEventHandler.handler = "callback";
checkEventHandler.customEventData = "success";
var toggle = this.node.getComponent(cc.Toggle);
toggle.checkEvents.push(checkEventHandler);
},
callback: function(toggle, customEventData) {
console.log("toggle3 " + customEventData);
alert("toggle3 " + customEventData);
},
});
这种方法的好处是，只要将脚本文件添加到你的节点上面，就能直接关联相关的方法回调。
注意： 该脚本文件必须添加到你的目标控件的节点上面，比如说： 你创建了一个Button控件，那么就必须将脚本文件添加到你的这个Button控件上面。
方法四，直接在属性检查器中选择你的回调方法
在脚本文件中创建好你的方法回调，在 属性检查器 中选择你的回调函数。
cc.Class({
extends: cc.Component,
properties: {
},
callback(toggle, customEventData) {
alert("Toggle4 " + customEventData);
},
start () {
},
});
