Introduction and use of the Dropdown (drop-down menu) component of Unity UGUI

Introduction and use of the Dropdown (drop-down menu) component of Unity UGUI

1. What is the Dropdown component?

Dropdown (drop-down menu) is a common component in Unity UGUI. It is used to display a drop-down menu when the user clicks or selects, providing multiple options for the user to choose.

2. How the Dropdown component works

The Dropdown component consists of two parts: a clickable button and a dropdown menu. When the user clicks the button, the dropdown menu expands, showing all options. Users can make a selection by clicking on an option.

3. Common properties of Dropdown components

• Options : A list of options in the drop-down menu.
• Caption Text : The text displayed on the button.
• Template : The template for the drop-down menu.
• Item Text : The text of the option in the drop-down menu.
• On Value Changed : Event fired when the selected value changes.

4. Common functions of the Dropdown component

• ClearOptions() : Clears the options in the drop-down menu.
• AddOptions(List options) : Add options to the drop-down menu.
• SetValueWithoutNotify(int value) : Sets the currently selected value without triggering the event.

5. Sample code

Example 1: Create a simple dropdown menu

using UnityEngine;
using UnityEngine.UI;

public class DropdownExample : MonoBehaviour
{
    public Dropdown dropdown;

    void Start()
    {
        dropdown.ClearOptions();
        dropdown.AddOptions(new List<string> { "Option 1", "Option 2", "Option 3" });
    }
}

Operation steps :

1. Create an empty object and add the Dropdown component to it.
2. Add the DropdownExample script to the object.
3. In the Inspector panel, drag the reference to the Dropdown component onto the dropdown field of the DropdownExample script.
4. Run the game, three options "Option 1", "Option 2" and "Option 3" will be displayed in the drop-down menu.

Note :

• Add options to the Start function to make sure the dropdown is initialized when the game starts.

Example 2: Get the currently selected value

using UnityEngine;
using UnityEngine.UI;

public class DropdownExample : MonoBehaviour
{
    public Dropdown dropdown;

    void Start()
    {
        dropdown.ClearOptions();
        dropdown.AddOptions(new List<string> { "Option 1", "Option 2", "Option 3" });
    }

    public void OnDropdownValueChanged(int value)
    {
        Debug.Log("Selected option: " + dropdown.options[value].text);
    }
}

Operation steps :

1. Create an empty object and add the Dropdown component to it.
2. Add the DropdownExample script to the object.
3. In the Inspector panel, drag the reference to the Dropdown component onto the dropdown field of the DropdownExample script.
4. In the DropdownExample script, create a public method OnDropdownValueChanged and bind it to the On Value Changed event of the Dropdown component.
5. Run the game, select an option in the drop-down menu, and the console will output the text of the selected option.

Note :

• The parameter value of the OnDropdownValueChanged method indicates the currently selected index.

Example 3: Adding options dynamically

using UnityEngine;
using UnityEngine.UI;

public class DropdownExample : MonoBehaviour
{
    public Dropdown dropdown;
    public InputField inputField;

    void Start()
    {
        dropdown.ClearOptions();
        dropdown.AddOptions(new List<string> { "Option 1", "Option 2", "Option 3" });
    }

    public void AddOption()
    {
        string newOption = inputField.text;
        dropdown.options.Add(new Dropdown.OptionData(newOption));
        dropdown.RefreshShownValue();
    }
}

Operation steps :

1. Create an empty object and add the Dropdown component to it.
2. Add the DropdownExample script to the object.
3. In the Inspector panel, drag the reference to the Dropdown component onto the dropdown field of the DropdownExample script.
4. Create an InputField component and drag its reference onto the inputField field of the DropdownExample script.
5. In the DropdownExample script, create a public method AddOption and bind it to a button's OnClick event.
6. Run the game, enter a text for a new option, click the button, and a new option will be added to the drop-down menu.

Note :

• The AddOption method gets the text of the new option via the inputField and uses the dropdown.options.Add method to add the new option.
• After adding a new option, you need to call the dropdown.RefreshShownValue method to refresh the display of the drop-down menu.

Example 4: Setting default options

using UnityEngine;
using UnityEngine.UI;

public class DropdownExample : MonoBehaviour
{
    public Dropdown dropdown;

    void Start()
    {
        dropdown.ClearOptions();
        dropdown.AddOptions(new List<string> { "Option 1", "Option 2", "Option 3" });
        dropdown.SetValueWithoutNotify(1);
    }
}

Operation steps :

1. Create an empty object and add the Dropdown component to it.
2. Add the DropdownExample script to the object.
3. In the Inspector panel, drag the reference to the Dropdown component onto the dropdown field of the DropdownExample script.
4. In the Start function, use the dropdown.SetValueWithoutNotify method to set the index of the default option.
5. Run the game and the second option will be selected by default in the drop-down menu.

Note :

• The SetValueWithoutNotify method is used to set the currently selected value, but does not trigger the On Value Changed event.

Example 5: Custom Dropdown Menu Template

using UnityEngine;
using UnityEngine.UI;

public class DropdownExample : MonoBehaviour
{
    public Dropdown dropdown;
    public GameObject customTemplate;

    void Start()
    {
        dropdown.ClearOptions();
        dropdown.AddOptions(new List<string> { "Option 1", "Option 2", "Option 3" });
        dropdown.template = customTemplate.transform as RectTransform;
    }
}

Operation steps :

1. Create an empty object and add the Dropdown component to it.
2. Create an empty object as a custom template, setting its layout and style.
3. Add the DropdownExample script to the first object.
4. In the Inspector panel, drag the reference to the Dropdown component onto the dropdown field of the DropdownExample script.
5. Drag the reference of the custom template onto the customTemplate field of the DropdownExample script.
6. Run the game and the dropdown menu will be displayed using the custom template.

Note :

• The custom template needs to be a RectTransform component.

References

• Unity official documentation: Dropdown