Users make choices, and often, these choices are either to have one of two available options (for example, sound on or off), or sometimes to choose one of several possibilities (for example, difficulty level easy/medium/hard). Unity UI Toggles allows users to turn options on and off; and when combined with Toggle Groups, they restrict choices to one of the group of items. In this recipe, we'll first explore the basic Toggle, and a script to respond to a change in values. Then in the There's More section, we'll extend the example to illustrate Toggle Groups, and styling these with round images to make them look more like traditional radio buttons.
The following screenshot shows how the button's status changes are logged in the Console panel when the scene is running:
For this recipe, we have prepared the images that you'll need in a folder named UI Demo Textures
in the 1362_01_15
folder.
To display an on/off UI Toggle to the user, follow these steps:
First Class
as Text for the Label child GameObject of the Toggle GameObject.ToggleChangeManager
to the Toggle GameObject:using UnityEngine; using System.Collections; using UnityEngine.UI; public class ToggleChangeManager : MonoBehaviour { private Toggle toggle; void Start () { toggle = GetComponent<Toggle>(); } public void PrintNewToggleValue(){ bool status = toggle.isOn; print ("toggle status = " + status); } }
When you create a Unity UI Toggle GameObject, it comes with several child GameObjects automatically—Background, Checkmark, and the text Label. Unless we need to style the look of a Toggle in a special way, all that is needed is simply to edit the text Label so that the user knows what option or feature that this Toggle is going to turn on/off.
The C# scripted class called ToggleChangeManager's
method called Start()
gets a reference to the Toggle component in the GameObject, where the script instance is located. When the game is running, each time the user clicks on the Toggle to change its value, an On Value Changed event is fired. We then register the PrintNewToggleValue()
method, which is supposed to be executed when such an event occurs. This method retrieves, and then prints out to the Console panel the new Boolean true/false value of the Toggle.
There are some details that you don't want to miss.
The Unity UI Toggles are also the base components, if we wish to implement a group of mutually-exclusive options in the style of radio buttons. To create such a group of related choices, do the following:
UI Demo Textures
folder into the project.ToggleChangeManager
component from the Toggle GameObject.UIToggleBG
image into the Source Image property.UIToggleButton
image into the Source Image property.Of the three choices (easy, medium, and hard) that we'll offer to the user, we'll set the easy option to be the one that is supposed to be initially selected. Therefore, we need its Is On property to be checked, which will lead to its 'checkmark' image being displayed.
To make these Toggles look more like radio buttons, the background of each is set to the circle image of UIToggleBG
, and the checkmark (which displays the Toggles that are on) is filled with the circle image called UIToggleButton
.
-25
(so, this copy is positioned below the easy option), and uncheck the Is On property of the Toggle (Script) component. Tag this copy with a new tag called Medium.-50
(so this copy is positioned below the medium option). Tag this copy with a new tag called Hard.RadioButtonManager
to the Canvas GameObject:using UnityEngine; using System.Collections; using UnityEngine.UI; public class RadioButtonManager : MonoBehaviour { private string currentDifficulty = "Easy"; public void PrintNewGroupValue(Toggle sender){ // only take notice from Toggle just swtiched to On if(sender.isOn){ currentDifficulty = sender.tag; print ("option changed to = " + currentDifficulty); } } }
None (Toggle)
, drag the Toggle-easy GameObject.PrintNewGroupValue(…)
method of a C# scripted component called RadioButtonManager
in the Canvas GameObject, passing itself as a parameter.3.135.196.103