Unity UI: Dropdowns
Intro
In this article I will give an overview of the Dropdown UI component and how to link it to a script to make a simple difficulty setting menu.
Dropdown Overview
The dropdown UI component has a few child components and we will go through each to give you an idea what they do.
Dropdown
The parent Dropdown object image is what the dropdown will show when the dropdown is NOT open. It will show the option that was selected and has its own properities.
Inside the Dropdown there is a Template child object that we will cover later since the edits are made in the Template child object and not in the Dropdown object.
The Dropdown Value is the item number in the dropdown.
- Option A = 0
- Option B = 1
- Option C = 2
The Options are what are displayed when the dropdown is opened and can be selected.
The On Value Changed method is called when a different option is selected from a script and we can determine which option was selected using the Value number.
LabeL & Arrow
The Label component is the dropdown when it is NOT open. This is where you can adjust the font and alignment of the text.
The Arrow component is simply the image that lets the user know it is a dropdown. The arrow image can be changed for more of a custom look.
Template
The template is the dropdown when it is open. This is where you can make changes to the backdrop of the dropdown menu. You can see below it is the area that is red.
It doesn’t look like much and this is due to the options (Easy, Medium, Hard) being their own mini buttons with backgrounds that is layered on top of the template image.
Item
The item component is those mini option buttons that can be selected. The item component has 3 child objects that allow you to customize the look.
For the item background, we can change the color or sprite image. If you want to see the template background, you can set the Alpha to 0, which makes it transparent.
The item checkmark lets the user know which option is currently selected.
The item label is the text of the item.
Changes to the item components will be applied to all of them.
Scrollbar
When the Dropdown options go beyond the content box, the scrollbar component will automatically be added to the template.
To find out more about Scrollbar, please read my previous article.
Coding the Dropdown
We need access to the UI and/or Text Mesh Pro libraries in order to gain access to the UI objects from the script.
We are going to declare a Dropdown type and Text type variable that are serialized.
In the inspector assign those objects to the script.
Create a public method so it can be called when the Dropdown value changes.
The dropdown value is the index of the option in the dropdown with 0 being the first item. When there is a value change in the dropdown, we check to see which one is selected using the value number and we can execute a code.
On the Dropdown object, assign the object that has the script attached in the On Value Changed method and call the method we just created.
This doesn’t actually changed the difficulty of the game which is an entirely different article, but this gets you starts on how to link the dropdown to the difficulty setting system.
