パハットノート

※当サイトではGoogleアドセンス広告を利用しています

【Unity】ドロップダウン(Dropdown)の使い方



概要

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

デフォルトのdropdown




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




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

文字列の変更

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

Optionsの変更

変更後の実行結果

Optionsの変更後の動作




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

「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」のオブジェクトにアタッチして、設定を行います。
OnValueChageに関数を割り当て

実行結果

OnValueChangeに関数を割り当てた場合の実行結果



スクリプトからの編集

  • 先ほどインスペクター上から編集したものをスクリプトから編集する方法を紹介します。
  • 次のスクリプトを用意して、「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}番目の要素が選ばれた");
    }
}