In this chapter, we introduce the drop-down box (Dropdown). We click on the menu bar "GameObject"->"UI"->"Dropdown", and then adjust its position. The effect is as follows
In fact, its essence is a drop-down list, and then select an option in the list. You should be able to see similar UI elements in many web pages. We view this game object in the hierarchy panel
We found that there are three child game objects "Label", "Arrow" and "Template" under the Dropdown UI element. And the sub-game object "Template" continues to have its sub-game objects. According to the name, we can roughly understand that "Label" is just the prompt text of the drop-down box, "Arrow" is the arrow mark, and "Template" is the drop-down list box that appears after clicking (the corresponding data is an array). Let's move on to its inspector
Let's briefly describe these properties.
Interactable Indicates whether the UI element accepts input.
Transition indicates the state switching effect of the UI element, and the default value is Color Tint color change.
Target Graphic represents the Image component of the UI element, that is, the image is used as the background of the drop-down box.
Normal Color is the color of the default state of the drop-down box.
Highlighted Color is the highlight color of the drop-down box.
Pressed Color is the color when the drop-down box is clicked
Selected Color is the color when the drop-down box is selected
Disable Color is the color when the drop-down box fails
Color Multiplier is the color multiplier value, the default is 1.
Fade Duration is the time (in seconds) for the color of the drop-down box to switch.
Navigation and Visualize represent the navigation settings of the drop-down box, which we do not set here.
Template is the "Template" child game object (drop-down list) we mentioned above.
Caption Text is the "Lable" sub-game object we mentioned above, and it is the default prompt text of the drop-down box. However, in general, the drop-down box will directly use the text of the first option in the drop-down list.
Caption Image An image can be used to replace the above "Lable" child game object.
Item Text is the game object of the item that appears after the drop-down box is clicked.
Item Image can use an image to replace the above Item Text game object.
Value The index of the currently selected option. 0 represents the first option, 1 represents the second, and so on. The default value is 0, which means that the drop-down box uses the first option in the drop-down list by default.
Alpha Fade Speed is the time for the drop-down box to fade in and out.
Options represents a drop-down list, which is essentially an array. A text string or an image can be specified for each option, corresponding to an element in the array. We can use text strings here, as shown below
Of course, we can also use "+" to add new list options.
Use code to manually modify the options of the drop-down box.
// 下拉框元素上的 Dropdown 组件
private Dropdown dropDown;
void Start()
{
// 获取输入框UI元素上面的 InputField 组件
inputField = GameObject.Find("InputField").GetComponent<InputField>();
// 获取下拉框元素上的 Dropdown 组件
dropDown = GameObject.Find("Dropdown").GetComponent<Dropdown>();
var options = dropDown.options;
options.Add(new Dropdown.OptionData("杭州"));
options.Add(new Dropdown.OptionData("南京"));
dropDown.options = options;
}
The final effect is as follows
Next, let's continue to talk about the events of the drop-down box.
For the drop-down box, the event it can accept is the On Value Changed event. We can use a method to handle this event. In this event method, we print out the drop-down box (Dropdown), which is the array subscript.
public void testDropdownChange()
{
Debug.Log("DropdownChange:" + dropDown.value);
}
Next, we add the above testDropdownChange method to the event
Next, we can run the entire project to see the effect of the drop-down box.
When we switch from the first "Beijing" (Value=0) to the second "Shanghai" (Value=1)
Our console also outputs that the value of the drop-down box (Dropdown) is 1.
When we switch to the third "Guangzhou" again, the console will output 2.
The content involved in this course has been shared to Baidu Netdisk: https://pan.baidu.com/s/1e1jClK3MnN66GlxBmqoJWA?pwd=b2id