【Unity3D-UGUI系列】（十一）Toggle 开关组件详解

二逼也有范

一、前言

首先，介绍一个UGUI，NGUI是UGUI的前身，Unity开发团队将NGUI的开发团队收到自己开发团队下，并且由此开发了UGUI。
UGUI系统是从Unity 4.6版本后才开始集成到Unity编辑器中。
UGUI的特点：

• 灵活
  
• 快速
  
• 可视化
  

对于开发者来说有很多的优点，比如说：

• 效率高
  
• 实现效果好
  
• 易于使用和拓展
  
• 与Unity编辑器的兼容性高
  

这是本系列文章的第十一篇：
【Unity3D-UGUI系列】（一）Canvas 画布组件详解
【Unity3D-UGUI系列】（二）Text文本组件详解
【Unity3D-UGUI系列】（三）Button 按钮组件详解
【Unity3D-UGUI系列】（四）Image 图片组件详解
【Unity3D-UGUI系列】（五）RawImage 显示纹理组件详解
【Unity3D-UGUI系列】（六）Panel 容器组件详解
【Unity3D-UGUI系列】（七）Dropdown 下拉菜单组件详解
【Unity3D-UGUI系列】（八）InputField 输入框组件详解
【Unity3D-UGUI系列】（九）Scrollbar 滚动条组件详解
【Unity3D-UGUI系列】（十）Slider 滑动条组件详解
【Unity3D-UGUI系列】（十一）Toggle 开关组件详解
【Unity3D-UGUI系列】（十二）ScrollView 滚动视图组件详解
二、Toggle 开关组件介绍

Toggle 开关组件顾名思义，就是用来模拟控制开发的组件。
主要使用的场景有，开关声音、开关灯光等。
Toggle用法跟Button很相似，都是点击按钮响应事件，但是Toggle与Button相比可以更加方便的模拟现实中的开关事件。
下面就新建一个Toggle组件来详细了解一下它的属性：
在Unity的Hierarchy视图中选择“Create→UI→Toggle”新建一个Toggle组件：

Toggle组件在Hierarchy视图中的层级结构如下图所示：

对象介绍ToggleToggle组件Background开关的背景Checkmark选中记录Label显示文字下面就详细的了解一下Toggle组件的属性吧。
三、Toggle 开关组件属性

没有Image组件，背景放到子对象Background进行设置。

Interactable、Transition、Navigation跟Button组件是相似的，Button教程中有详细解释。
下面就看Toggle组件独有的属性：
属性介绍Is On开关按钮Toggle TransitionToggle过渡Graphic用来控制 Toggle 开关图片的显示/隐藏Group用来表示 Toggle 所属开关组/群（后边会讲到）On Value Changed监听事件，值改变时调用属性没有太多难点，主要讲一下如何使用代码监听Toggle的切换，以及Toggle Group组的用法。
四、Toggle代码监听

代码：

1. using System.Collections;
2. using System.Collections.Generic;
3. using UnityEngine;
4. using UnityEngine.UI;
6. public class ToggleTest : MonoBehaviour
7. {
8.     private Toggle m_Toggle;//获取到Toggle组件
9.    
10.     void Start()
11.     {
12.         //找到组件
13.         m_Toggle = GameObject.Find("Toggle").GetComponent<Toggle>();
14.         //动态添加监听
15.         m_Toggle.onValueChanged.AddListener(ToggleOnValueChanged);
16.     }
18.         //监听事件
19.     private void ToggleOnValueChanged(bool isOn)
20.     {
21.         if (isOn)
22.         {
23.             Debug.Log("开");
24.         }
25.         else
26.         {
27.             Debug.Log("关");
28.         }
29.     }
30. }

复制代码

运行结果：

五、Toggle Group组的用法详解

在使用Toggle组件的时候，会遇到这样一个问题，比如说多个按钮，但是只能单选一个。
或者点击不同的Toggle切换不同的界面，这个时候就用到了Toggle Group。
这个可以实现单选、换页、切换背包等功能。
首先，我们新建几个Toggle，然后不添加Toggle Group组看一下效果：

然后，给Canvas对象添加Toggle Group组件，将3个Toggle的Group设置为Canvas：

再次运行程序：

酿成单选了。
接下来，我用一个实例来演示如何进行换页。
首先，新建三个Toggle，然后新建三个Image做一个简单的红绿蓝颜色更改，摆放UI如下图所示：

给Canvas添加Toggle Group组件，然后将三个Toggle的Group设置为Canvas：

编写代码：
[code]using System.Collections;using System.Collections.Generic;using UnityEngine;using UnityEngine.UI;public class ToggleTest : MonoBehaviour{    private Toggle[] m_Toggle;    private Image[] m_Image;    void Start()    {        //找到组件        m_Toggle = new Toggle[3];        m_Toggle[0] = GameObject.Find("Toggle").GetComponent();        m_Toggle[1] = GameObject.Find("Toggle (1)").GetComponent();        m_Toggle[2] = GameObject.Find("Toggle (2)").GetComponent();        m_Image = new Image[3];        m_Image[0] = GameObject.Find("Image").GetComponent();        m_Image[1] = GameObject.Find("Image (1)").GetComponent();        m_Image[2] = GameObject.Find("Image (2)").GetComponent();        //动态添加监听        m_Toggle[0].onValueChanged.AddListener((isOn) => ToggleOnValueChanged(isOn, 0));        m_Toggle[1].onValueChanged.AddListener((isOn) => ToggleOnValueChanged(isOn, 1));        m_Toggle[2].onValueChanged.AddListener((isOn) => ToggleOnValueChanged(isOn, 2));    }    private void ToggleOnValueChanged(bool isOn, int index)    {        //其他页隐藏        for (int i = 0; i <span class="token operator">