Unity3D-UGUI系列Toggle 开关组件详解

Posted 2021-09-16 恬静的小魔龙

一、前言

首先，介绍一个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视图中的层级结构如下图所示：

对象	介绍
Toggle	Toggle组件
Background	开关的背景
Checkmark	选中记录
Label	显示文字

下面就详细的了解一下Toggle组件的属性吧。

三、Toggle 开关组件属性

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

Interactable、Transition、Navigation跟Button组件是相似的，Button教程中有详细解释。

下面就看Toggle组件独有的属性：

属性	介绍
Is On	开关按钮
Toggle Transition	Toggle过渡
Graphic	用来控制 Toggle 开关图片的显示/隐藏
Group	用来表示 Toggle 所属开关组/群（后边会讲到）
On Value Changed	监听事件，值改变时调用

属性没有太多难点，主要讲一下如何使用代码监听Toggle的切换，以及Toggle Group组的用法。

四、Toggle代码监听

代码：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class ToggleTest : MonoBehaviour
{
    private Toggle m_Toggle;//获取到Toggle组件
    
    void Start()
    {
        //找到组件
        m_Toggle = GameObject.Find("Toggle").GetComponent<Toggle>();
        //动态添加监听
        m_Toggle.onValueChanged.AddListener(ToggleOnValueChanged);
    }

	//监听事件
    private void ToggleOnValueChanged(bool isOn)
    {
        if (isOn)
        {
            Debug.Log("开");
        }
        else
        {
            Debug.Log("关");
        }
    }
}

运行结果：

五、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：

编写代码：

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<Toggle>();
        m_Toggle[1] = GameObject.Find("Toggle (1)").GetComponent<Toggle>();
        m_Toggle[2] = GameObject.Find("Toggle (2)").GetComponent<Toggle>();
        m_Image = new Image[3];
        m_Image[0] = GameObject.Find("Image").GetComponent<Image>();
        m_Image[1] = GameObject.Find("Image (1)").GetComponent<Image>();
        m_Image[2] = GameObject.Find("Image (2)").GetComponent<Image>();
        //动态添加监听
        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 < m_Image.Length; i++)
        {
            m_Image[i].gameObject.SetActive(false);
        }
        //显示特定页
        if (isOn)
        {
            m_Image[index].gameObject.SetActive(true);
        }
    }
}

运行结果：