Unity UI: Toggles, Toggle Groups & A Practical Use
Intro
In this article, we will cover the UI element of Toggles. Toggles are used in UI if there are only two options: on/off, true/false, yes/no.
Toggles Basics
Unity’s UI Toggle comes out of the box already working with some basic graphics that can be costumized.
To create a toggle button, go into UI and select Toggle.
The toggle button comes with a few components, but looking at the main component you have the Transition type and Navigation settings that can be found with Unity’s other UI elements
Is On option is unique to toggles. When set to true this will set the toggle button to on when the program starts.
Graphic allows you to assign a custom image or sprite instead of the default check.
The Background is exactly that, the image/sprite where the toggle grpahic is placed on.
The Checkmark is the image that will appear when the toggle is on.
The Label is the text component of the toggle button.
Toggle Group
A Toggle Group allows for other toggle to be aware of one another, so when one toggle is selected the others will be deselected.
Setting up a Toggle Group will require you to create an empty GameObject and adding a Toggle Group component. I like to add my toggles as children of the Toggle Group GameObject.
In each Toggle element, assign the Toggle Group GameObect to the Group component. This lets the other toggles become aware of each other.
You can see below how turnin one toggle on will no turn the rest off.
The Toggle Group component has an Allow Switch Off option.
This allows for the toggle to be turned off and have none of the toggle elements be on.
Level Selection
We are going to put all of this to use by create a Level Selection screen. This will consist of 3 toggle elements with each on being selected will bring up a picture and text.
I already have this MenuManager script and we will need to create a few variables to get this to work.
- Sprite array to hold the different Level pictures.
- Image that will hold the image component that displays the sprite depending on the toggle that is on.
- TextMeshProGUI will hold the text component that will be modified depending on the toggle that is on.
In the inspector, we assign the Image and Text elements to the script along with the different sprites to the Level Pics array.
When importing images make sure to change the Text Type to Sprite (2D and UI).
Toggle elements allow for a method to be called when the Toggle is used. This method needs to be public and we will use a Toggle type parameter named toggle.
In the inspector on each of the Toggle Elements in the On Value Changed option we assigned the MenuManager script and called the Toggle method we just created. We assign the Toggle element to the toggle parameter.
We check if the toggle isOn, which means the toggle is selected and since the toggles are in a group only one can be selected at a time.
Using a switch statement, we check the name of the Toggle element depending on the Toggle name we set the image to one of the level pics from the array and modify the text field to a different text.
This is Toggles, Toggle Groups and a practical use, though a difficulty select might have been a better example but hopefully you get the idea.
