Introduction and use of the ToggleGroup (option group) component of Unity UGUI

Introduction and use of the ToggleGroup (option group) component of Unity UGUI

1. What is the ToggleGroup component?

ToggleGroup (option group) is a component in Unity UGUI, which is used to manage the selection status of a group of Toggle (options). The ToggleGroup component can ensure that only one Toggle is selected in the same ToggleGroup, and other Toggles will be automatically deselected.

2. How the ToggleGroup component works

The ToggleGroup component realizes the management function by monitoring the selection state of the Toggle. When a Toggle is selected, ToggleGroup will traverse other Toggles in the same group and cancel their selected state.

3. Common properties of the ToggleGroup component

• AllowSwitchOff (allow deselection) : Set whether to allow deselection. If set to true, all Toggles can be unchecked; if set to false, at least one Toggle will always be selected.

4. Common functions of ToggleGroup component

• NotifyToggleOn(Toggle toggle) : Notify ToggleGroup that a Toggle is selected. This function will be called automatically in Toggle's OnValueChanged event, no need to call it manually.

5. Complete sample code

Example 1: Create ToggleGroup and Toggle

using UnityEngine;
using UnityEngine.UI;

public class Example1 : MonoBehaviour
{
    public ToggleGroup toggleGroup;
    public Toggle toggle1;
    public Toggle toggle2;

    private void Start()
    {
        toggle1.group = toggleGroup;
        toggle2.group = toggleGroup;
    }
}

Operation steps :

1. Create an empty object and attach the Example1 script to it.
2. Create two Toggles in the scene, and drag their Toggle components to the references of toggle1 and toggle2 respectively.
3. Drag the toggleGroup component to the reference of toggleGroup.
4. Run the game, click toggle1 or toggle2, and observe their selected status.

Note :

• The group attribute of toggle1 and toggle2 must be set to toggleGroup.

Example 2: Dynamically create Toggle

using UnityEngine;
using UnityEngine.UI;

public class Example2 : MonoBehaviour
{
    public ToggleGroup toggleGroup;
    public GameObject togglePrefab;
    public Transform toggleParent;

    private void Start()
    {
        for (int i = 0; i < 5; i++)
        {
            GameObject toggleObj = Instantiate(togglePrefab, toggleParent);
            Toggle toggle = toggleObj.GetComponent<Toggle>();
            toggle.group = toggleGroup;
        }
    }
}

Operation steps :

1. Create an empty object and attach the Example2 script to it.
2. Create a Toggle prefab, togglePrefab, and drag it into the reference of togglePrefab.
3. Create an empty object toggleParent and drag it into the reference of toggleParent.
4. Drag the toggleGroup component to the reference of toggleGroup.
5. Run the game and observe the number and selected state of Toggle under toggleParent.

Note :

• togglePrefab must contain the Toggle component.
• toggleParent must be a container for dynamically created Toggles.

Example 3: Deselect

using UnityEngine;
using UnityEngine.UI;

public class Example3 : MonoBehaviour
{
    public ToggleGroup toggleGroup;
    public Button cancelButton;

    private void Start()
    {
        cancelButton.onClick.AddListener(CancelSelection);
    }

    private void CancelSelection()
    {
        toggleGroup.SetAllTogglesOff();
    }
}

Operation steps :

1. Create an empty object and attach the Example3 script to it.
2. Create a Button and drag it to the reference of cancelButton.
3. Drag the toggleGroup component to the reference of toggleGroup.
4. Run the game, click the cancelButton, and observe whether the Toggle in the toggleGroup is deselected.

Note :

• cancelButton must be a Button, and the OnClick event has been added.

Example 4: Get the selected Toggle

using UnityEngine;
using UnityEngine.UI;

public class Example4 : MonoBehaviour
{
    public ToggleGroup toggleGroup;
    public Button getSelectedButton;

    private void Start()
    {
        getSelectedButton.onClick.AddListener(GetSelectedToggle);
    }

    private void GetSelectedToggle()
    {
        Toggle selectedToggle = toggleGroup.ActiveToggles().FirstOrDefault();
        if (selectedToggle != null)
        {
            Debug.Log("Selected Toggle: " + selectedToggle.name);
        }
        else
        {
            Debug.Log("No Toggle selected.");
        }
    }
}

Operation steps :

1. Create an empty object and attach the Example4 script to it.
2. Create a Button and drag it into the reference of getSelectedButton.
3. Drag the toggleGroup component to the reference of toggleGroup.
4. Run the game, click getSelectedButton, and observe the console output.

Note :

• getSelectedButton must be a Button, and the OnClick event has been added.

Example 5: Disable ToggleGroup

using UnityEngine;
using UnityEngine.UI;

public class Example5 : MonoBehaviour
{
    public ToggleGroup toggleGroup;
    public Button disableButton;

    private void Start()
    {
        disableButton.onClick.AddListener(DisableToggleGroup);
    }

    private void DisableToggleGroup()
    {
        toggleGroup.enabled = false;
    }
}

Operation steps :

1. Create an empty object and attach the Example5 script to it.
2. Create a Button and drag it to the reference of disableButton.
3. Drag the toggleGroup component to the reference of toggleGroup.
4. Run the game, click disableButton, and observe whether toggleGroup is disabled.

Note :

• disableButton must be a Button with the OnClick event already added.

References

• Unity official documentation: ToggleGroup
• Unity official tutorial: Toggle