Using the Unity UI dropdown

Verification environment

Windows

• Windows 11

Unity Editor

• 2020.3.25f1

Prerequisites for this tip

The following settings have been made in advance as a prerequisite for the explanation of these tips.

• Introducing the Input System Package
• Align the camera (2D) with the canvas

At first

Dropdowns can be used to allow the user to select one of several choices. Even if there are many items to choose from, only the selected items are displayed on the screen, which is useful for saving space and makes it easier for the user to understand what they are selecting.

Position a drop-down

Select a "dropdown" from the hierarchy to add it to the view.

Adjust the position of the drop-down to your discretion. If the size seems small, drag the frame to make it larger.

To Dropdown set the size of the text inside, select It's inside Label instead of .

When you run it, you can see the dropdown in action. In the initial state, there are three items to choose from, so you can switch the selection. However, if you change the size of the drop-down or Label the font size of , it will not match the size of the text displayed in the drop-down.

Adjust the size of drop-down items

If you haven't changed the size of the object or the font size when you place the dropdown, you don't need to do this, but if you do, you'll need to set the dropdown item as well.

The drop-down object contains a definition of how the selected item is displayed when it is displayed. Dropdown Template is the case. If you don't set a few settings, it won't look pretty.

First of all, it is assumed that each parameter of the placed drop-down is set as follows. If you are setting with different parameters, replace the numbers and read them. In this example, other parameters are also set, but they are omitted because they are not related to the drop-down items.

Item font size

First, change the font size of the item. Select > > >Dropdown Template Content > > Viewport Item Item Labelfor the object. Specify a font size of 40, which is the same as Label. If you want to show more choices, you can make them a little smaller.

Even if you increase the font size, the display size of one item does not change, so you may not be able to see anything even if you run it.

Item Size

Next, set the size of one item. The objects to select are > >Dropdown Template Viewport > > . Content Item Set the height to 72. If you want to show more choices, you can make them a little smaller.

This makes the elements of the item visible, but for some reason, the top and bottom of the selected item are cut off a little regardless of scrolling.

To fix this, set the height of > > >Dropdown ContentTemplate Viewport to Item 72, which is the same as . This will allow you to see the top and bottom items properly.

By the way, in the default drop-down settings Item , the height of is set slightly larger than Content . As a result, a slight margin is displayed above and below the selected item, reducing the feeling of pressure.

Checkmark size

The size of the checkmark is also small, so I'll fix it. The target object is "Dropdown> > Viewport > > > Template Item Content Item Checkmark".

If you change the width and height, the check mark will also increase, so set it to 72 here.

When I run it, the check mark is bigger, but the position is wrong, so I will fix this as well.

Item Checkmark First, set the pivot X to 0, and then set the position X to 0 as well. This allows you to place it in a good place regardless of the size of the check or label.

Also, since it overlaps the label, Item Lebel select to make the left position the same as the size of the check mark.

Scrollbar size

The scroll bar is also small and difficult to click, so make it larger. Everyone is particular about the size, so it's not something that can be determined. In this case, we set 48, which is 2/3 of the height of the dropdown.

The object to be selected is set to a width value in >Dropdown Template > Scrollbar.

Drop-down icon size

It's not on the item side, but the drop-down icon is still small, so I'll change it. The object to be selected is >Dropdown Arrow.

As for the size of the icon, you can change the size by setting the width and height. Here, we set it to 72, which is the same as the height of the dropdown.

If this is the case, the position will be off, so set the pivot X to 1 and the position X to 0. This allows you to display the icon in a nice position regardless of size.

Number of drop-down items displayed

By increasing the size of the item, there are fewer selected items that can be displayed at one time, so we will try to increase this. This setting is specified in >Dropdown Template. Since the number of items to be displayed is not specified by the number of items, but the size is set by height, the value specified is "the height × number of items". Here, we want to display about 10 pieces, so 72 x 10 = 720 set .

The display area is enlarged, but at the moment there are only 3 items, so only 3 items are displayed.

Set the selection

By default, three items of "Option A ~ Option C" are set. These items are Dropdown located in the component of the object Dropdown .

If you scroll down the inspector, you will find the "Options" item, where you can freely change the name or add or delete.

Set the initial selection

The selection of items is determined by numbers. Dropdown Dropdown You can specify the initial selection in the value of the object's component. Item numbering starts at 0, so set 3 if you want the fourth to be the initial selection.

Perform processing when selecting an item

You may want to do something when you select an item in the dropdown. This can be implemented in the same way as when a button is clicked.

The object has a dropdown and a text one at a time. After selecting an item in the drop-down, make sure that the content is displayed in a text object on the right. It doesn't matter anything other than the placement of the objects, so you can set it up however you like.

First, create a script in your project. DropdownItemSelector In this case, it is named .

Open the script and add the code to the following:

using UnityEngine;
using UnityEngine.UI;

public class DropdownItemSelector : MonoBehaviour
{
  /// <summary>ドロップダウンで選択したアイテムの内容を表示するテキストオブジェクト。</summary>
  [SerializeField] Text TextValueSetter;

  /// <summary>値を取得するドロップダウンオブジェクト。</summary>
  [SerializeField] Dropdown Dropdown;

  /// <summary>ドロップダウンでアイテムを選択したときに呼ばれます。</summary>
  public void OnSelectionChanged()
  {
    // ドロップダウンの選択値と選択しているアイテムのテキストを表示
    TextValueSetter.text = $"value={Dropdown.value}, options.text={Dropdown.options[Dropdown.value].text}";
  }
}

After you save the script, attach it to the EventSystem object. As explained in the Tips for buttons, this tip consistently attaches scripts EventSystem to unless there is a specific reason to do so.

Attach a drop-down object to get the value from and a text object to set the value.

Next, select the drop-down object you want to work with and add "On Value Change (Int32)" in the Dropdown Inspector component.

In the lower left item, we need to put the object to which the script to be operated is attached, so we set it here EventSystem .

Select of OnSelectionChanged from No Function DropdownItemSelector .

Try running it to see if it's working properly.

Dynamically add items

You can specify which items can be selected in the editor, but there may be times when the state changes during the game and you want to change the items you select. In this case, you will change the item selected in the program.

The object arranges "drop-down" and "button x2" as shown below. You can freely set parameters other than alignment.

Create a script and name DropdownDynamic it . The code should look like this:

using UnityEngine;
using UnityEngine.UI;

public class DropdownDynamic : MonoBehaviour
{
  /// <summary>アイテム処理を行うドロップダウンオブジェクト。</summary>
  [SerializeField] Dropdown Dropdown;

  /// <summary>追加ボタンをクリックしたとき。</summary>
  public void OnClickAdd()
  {
    // アイテムを追加します
    Dropdown.options.Add(new Dropdown.OptionData { text = $"Item {Dropdown.options.Count}" });

    // ドロップダウンの内容を更新します
    Dropdown.RefreshShownValue();
  }

  /// <summary>削除ボタンをクリックしたとき。</summary>
  public void OnClickRemove()
  {
    // アイテムを削除します
    if (Dropdown.options.Count >= 1)
		{
      Dropdown.options.RemoveAt(Dropdown.options.Count - 1);
    }

    // ドロップダウンの内容を更新します
    Dropdown.RefreshShownValue();
  }
}

Dropdown.options has a control over the items to be selected, so Add you can dynamically control the items by doing or Remove on them.

EventSystem Attach scripts and objects to .

Assign a method to the click event of the add and delete buttons, respectively.

When you're done, run it. If the item is erased in the editor, the item will not be displayed even if you click it.

If you click the add button four times, you can see that four items have been added.

If you click the delete button twice, you can see that two items have been deleted.