(11) Detailed explanation of Toggle switch components

This is the 11th day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021

Recommended reading

• CSDN home page
• GitHub open source address
• Unity3D plugin sharing
• Jane’s address book
• My personal blog
• QQ group: 1040082875

Hello everyone, I am a Buddhist engineer ☆ quiet small magic dragon ☆, update Unity development skills from time to time, think useful remember one key three link oh.

One, foreword

First, introduce a UGUI, NGUI is the predecessor of UGUI, Unity development team took NGUI development team under their own development team, and developed UGUI from this. The UGUI system has only been integrated into the Unity editor since Version 4.6.

UGUI features:

• flexible
• fast
• visualization

There are many advantages for developers, such as:

• High efficiency
• Achieve good results
• Easy to use and expand
• High compatibility with the Unity editor

This is the eleventh article in this series: 【Unity3D-UGUI series 】 (1) Canvas Canvas component details 【Unity3D-UGUI series 】 (2) Text component details 【Unity3D-UGUI series 】 (3) Button Button component details 【Unity3D-UGUI series 】 (5) RawImage display texture components 【Unity3D-UGUI series 】 (6) Panel container components in detail 【Unity3D-UGUI series 】 (7) Dropdown menu component details 【Unity3D-UGUI series 】 (8) InputField input box component details 【Unity3D-UGUI series 】 (9) Scrollbar component details 【Unity3D-UGUI series 】 (10) Slider component in detail 【Unity3D-UGUI series 】 (11) Toggle switch component in detail 【Unity3D-UGUI series 】 (12) ScrollView component in detail

Ii. Introduction to Toggle switch components

The Toggle switch component is, as its name implies, a component used for analog control development.

The main scenes are switch sound, switch light and so on.

The usage of Toggle is very similar to that of Button, which is to click the Button to respond to the event. However, compared with Button, Toggle can more conveniently simulate the switching event in reality.

In Unity’s Hierarchy view, select “Create→UI→Toggle” to Create a Toggle component:The Hierarchy structure of Toggle components in Hierarchy view is shown in the following figure:

Let’s take a closer look at the properties of the Toggle component.

3. Toggle switch component properties

There is no Image component, and the Background is set in a child object called Background.Interactable, Transition, and Navigation are similar to Button components, as explained in the Button tutorial.

Let’s look at the properties unique to the Toggle component:

Properties are not too difficult, but I’ll show you how to use code to listen for Toggle switches and how to use the Toggle Group.

4. Toggle code listening

Code:

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

public class ToggleTest : MonoBehaviour
{
    private Toggle m_Toggle;// Get the Toggle component
    
    void Start()
    {
        // Find the component
        m_Toggle = GameObject.Find("Toggle").GetComponent<Toggle>();
        // Add listener dynamically
        m_Toggle.onValueChanged.AddListener(ToggleOnValueChanged);
    }

	// Listen on events
    private void ToggleOnValueChanged(bool isOn)
    {
        if (isOn)
        {
            Debug.Log("Open");
        }
        else
        {
            Debug.Log("Closed"); }}}Copy the code

Running results:

B: Toggle Group

When using the Toggle component, there is a problem, such as multiple buttons, but only one can be selected.

Or click a different Toggle to switch to a different interface. In this case, Toggle Group is used.

This can achieve radio, page, switch knapsack and other functions.

First, let’s create a few new Toggles and leave the Toggle Group alone to see what happens:Then, add the Toggle Group component to the Canvas object and set the Group of three Toggle to Canvas: Run the program again:It’s radio.

Next, I use an example to demonstrate how to do a page feed.

First, create three toggles, and then create three images to make a simple red, green and blue color change, and place the UI as shown in the picture below:Add the Toggle Group component to Canvas and set the three Toggle groups to Canvas:Write 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()
    {
        // Find the component
        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>();
        // Add listener dynamically
        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)
    {
        Other pages are hidden
        for (int i = 0; i < m_Image.Length; i++)
        {
            m_Image[i].gameObject.SetActive(false);
        }
        // Displays a specific page
        if (isOn)
        {
            m_Image[index].gameObject.SetActive(true); }}}Copy the code

Running results: