Unity Dropdownの使い方

概要

UnityではドロップダウンのためのUIが標準で搭載されており、インスペクター上で右クリック⇒「UI」⇒「Dropdown」と選択することで「Canvas」の子オブジェクトとして「Dropdown」が生成されます。
デフォルトの状態で使用するとこのようになっているのですが、これを編集する方法を紹介します。

Dropdownの構成

中身はこのようになっています。本記事では「Dropdown」にアタッチされているスクリプトである「Dropdown」を操作します。

インスペクター上での編集

文字列の変更

ドロップダウンで表示する文字列は「Options」を編集することで変更できます。ただし、初期状態では下の画像のように「Option A」~「Option C」となっています。

使用例

変更後の実行結果

ドロップダウン変更の検出

「Option A」を選択した状態から、「Option C」を選択した状態に変更した」という動作を検出するためには、「On Value Change」を編集します。
以下に使用例を示します。

使用するスクリプト

関数の引数のvalueには選んだ要素の番号が格納されます。例えば、初期状態で「Option B」を選択するとvalue=1となります。

using UnityEngine;

public class TestDropdown : MonoBehaviour
{
    public void OnValueChanged(int value)//値更新後の処理
    {
        Debug.Log($"{value}番目の要素が選ばれた");
    }
}

On Value Changeの編集

先ほどのスクリプトを生成したDropdown」のオブジェクトにアタッチして、設定を行います。

実行結果

スクリプトからの編集

先ほどインスペクター上から編集したものをスクリプトから編集する方法を紹介します。
次のスクリプトを用意して、「Dropdown」のオブジェクトにアタッチして、実行するとインスペクター上で編集した場合と同様の結果が得られます。

using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class TestDropdown2 : MonoBehaviour
{
    List<string> options = new List<string>() { "Apple", "Orange", "Lemon" };

    public void Awake()
    {
        Dropdown dropdown = GetComponent<Dropdown>();

        //選択肢の編集
        dropdown.options?.Clear();//空にする
        foreach (var opt in options)//追加
        {
            Dropdown.OptionData optionData = new Dropdown.OptionData(opt);
            dropdown.options.Add(optionData);
        }

        //値更新後の処理
        dropdown.onValueChanged.AddListener((value) => OnValueChanged(value));
    }

    public void OnValueChanged(int value)//値更新後の処理
    {
        Debug.Log($"{value}番目の要素が選ばれた");
    }
}