In this chapter we introduce Toggle and Toggle Group. First, we click on the menu bar "GameObject" -> "UI" -> "Toggle", and then adjust its position, the effect is as follows
I believe you have seen similar UI elements in many web pages, which are usually used to allow users to check certain options.
We found that there are two child game objects under the switch (Toggle), one is Background and the other is Label. According to the name, we can probably know that Background is the checked box, and Label is the text behind it. How to change the text displayed by Toggle? We click on the sub-game object Label to view the corresponding Inspector inspection panel.
Enter text content in the above Text input box, the final effect is as shown below
Next, let's look at Toggle's Inspector inspection panel, as shown below
Some of the above public attributes are often seen in other UI elements, so we will not introduce them one by one.
Next, we continue to introduce other properties in Toggle's inspection panel.
Whether the Is On switch is turned on at the beginning, that is, checked, or unchecked. Checked by default.
Toggle Transition switch switching effect. Fade means fade in or fade out, and None means appear or disappear directly.
Graphic is used for the image of the check mark, that is, replacing the default check box.
Group The switch group to which this switch belongs is to set multiple Toggles in the same group.
Next is the On Value Changed (Boolean) event, which is the switch switching event.
// 开关元素上面的 Toggle 组件
private Toggle toggle;
void Start()
{
// 获取开关元素上面的 Toggle 组件
toggle = GameObject.Find("Toggle").GetComponent<Toggle>();
}
public void testToggleChange()
{
Debug.Log("ToggleChange:" + toggle.isOn);
}
Next, we bind this method to the On Value Changed (Boolean) event of the switch (Toggle)
Finally, we run the entire project, the effect is as follows
The default is to check the state (isOn=True), then we click Cancel (isOn=False), and then continue to click the check (isOn=True), then the controller should first output False, then output True
Next, we introduce the switch group (Toggle Group), which is obviously composed of a group of switch (Toggle) UI elements. A switch group is not a visible UI element, but a way to modify the behavior of a group of switches (Toggle). Toggles belonging to the same group will be constrained that only one of them can be turned on at a time. Turning on one of the switches (Toggle) by pressing it will automatically turn off the other switches (Toggle). To put it bluntly, it is to achieve the effect of choosing one from many. It has the same effect as the drop-down box (Dropdown). It's just that the two are visually different. How is it used? First, we add a new Toggle UI element and modify its text content. The final effect is as follows
At this time, the two Toggles have nothing to do with each other. Clicking on any one will not affect the other. How to get the effect of choosing one of the two? Just put them both in one group. Next, we add a "Toggle Group" component to the first Toggle UI element. Please note that "Toggle Group" is a component, not a UI element.
In other words, the current Toggle is not just a UI element, it is also a "Toggle Group". The name of this group is the name "Toggle" of the UI element Toggle. Of course, in actual development, we are more likely to set the "Toggle Group" on other UI elements (such as a Panel element). Next, we need to set the two Toggles to this group.
Drag and drop yourself in the Hierarchy layer panel to your own "Group" attribute value.
Drag the Toggle in the Hierarchy layer panel to the "Group" attribute value of Toggle2.
After we run it, after selecting one of them, the other is canceled, achieving the effect of choosing one of the two.
The content involved in this course has been shared to Baidu Netdisk: https://pan.baidu.com/s/1e1jClK3MnN66GlxBmqoJWA?pwd=b2id