[Unity][UI]DropDownの使い方の基本を解説

　Unity UIのDropDownを解説してきます。DropDownはリストを表示するためのUIで押されたタイミングで、リスト一覧をボタンの下部に表示するものです。今回はDropDownのリスト追加、変更、取得といった操作の基本について解説していきます。

Goal

DropDownの基本を理解して、Optionリストを作成してみる！

https://amzn.to/3bd8XOX

Topic

DropDown GameObjectの追加
リストの編集
Scriptからリストを変更する
リストの値の参照
Optionの値変更を見張る
まとめ

DropDown GameObjectの追加

　DropDownはUI GameObjectの中にあるので、Panelに追加していきます。

　すると、OptionAと表示された下矢印付きのボックスが表示されます。

　ちょっと実行してどのようなものか動かしてみます。

　このようにデフォルトでABC３つの項目がリストに登録されていることがわかります。

リストの編集

Inspectorからリストの初期値を変更する

まずはビルドの段階でリストが表示されるようリストの初期値を編集してみます。（静的なリスト変更）にしてみます。DropDownのInspectorを見ると、DropDown>Optionsに先ほど表示されたABCがあることがわかります。これが実行時に表示されているリストになります。

　こちらを以下のように編集してみます。リストの追加と表示される文字を変えてみました。表示されているDropDownのLabelも変更されており、実行するとリストの中身も変更されていることが確認できます。

Scriptからリストを変更する

　必ずしも最初からリストの中身が決まっている場合だけではありません。何か取得した情報をリストに追加したり、削除したり、変更したりすることもあるかと思います。Scriptを使ってリストを操作（動的にリストを操作）する手順について説明します。まず、DropDownのInspector>Add ComponentからScriptを追加します。

　作成したScriptを開いて、以下のコードに編集します。解説はコメントで入れてあります。

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

public class DropDownScr : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
        Dropdown ddtmp; /*  */
        List<string> optionlist = new List<string>();

        //Optionsに表示する文字列をリストに追加
        optionlist.Add("dynamic add 1");
        optionlist.Add("dynamic add 2");
        optionlist.Add("dynamic add 3");
        optionlist.Add("dynamic add 4");

        //DropdownコンポーネントのOptionsという項目にOptionsのリストがありました
        //それを編集するためにDropdownコンポーネントを取得
        ddtmp = GetComponent<Dropdown>();

        //一度すべてのOptionsをクリア
        ddtmp.ClearOptions();

        //リストを追加
        ddtmp.AddOptions(optionlist);
    }

    // Update is called once per frame
    void Update()
    {
        
    }
}

　このスクリプトでアプリを実行すると起動後にリストが変更されていることが確認できます。

　ここではStart()に記述したので、起動時に変更されていますが任意のタイミングで変更が可能です。ボタンを押されたタイミングで変更したい場合は例えば以下の用にボタンのScriptを変更しておけばよいです。

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

public class ButtonScr : MonoBehaviour
{
    private AndroidJavaObject _javaClass = null;
    // Start is called before the first frame update
    void Start()
    {
    }

    // Update is called once per frame
    void Update()
    {
        
    }

    public void OnClick()
    {
        Dropdown ddtmp; /*  */
        List<string> optionlist = new List<string>();

        //Optionsに表示する文字列をリストに追加
        optionlist.Add("dynamic add by Button 1");
        optionlist.Add("dynamic add by Button 2");
        optionlist.Add("dynamic add by Button 3");
        optionlist.Add("dynamic add by Button 4");

        //「Dropdown」というGameObjectのDropDownコンポーネントを操作するために取得
        ddtmp = GameObject.Find("Dropdown").GetComponent<Dropdown>();

        //一度すべてのOptionsをクリア
        ddtmp.ClearOptions();

        //リストを追加
        ddtmp.AddOptions(optionlist);
    }
}

　DropDownというGameObjectにあるDropDownコンポーネントの操作が必要になりますが、ButtonScrはそのGameObjectがどこにあるかFindします。見つかったGameObjectにGetComponentすることで、このスクリプトからも先ほど同様、DropDownコンポーネントにアクセスできるようになります。

　実行した結果、以下のようにボタンを押される前と後でOptionsが変更されています。ボタン押下前

　ボタン押下後

　このようにScriptで動的にリストを変更することができます。自身以外のGameObjectから参照する際は、FindでGameObjectを見つけてアクセスする点に注意してください。

リストの値の参照

　値を参照するにはどのオプションが選択されているかを示すvalueというパラメータを使います。ボタンを押された時に選択されているリストを取得するButtonScrは以下になります。

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

public class ButtonScr : MonoBehaviour
{
    private AndroidJavaObject _javaClass = null;
    // Start is called before the first frame update
    void Start()
    {
    }

    // Update is called once per frame
    void Update()
    {
        
    }

    public void OnClick()
    {
        Dropdown ddtmp; /*  */
        List<string> optionlist = new List<string>();

        //Optionsに表示する文字列をリストに追加
        optionlist.Add("dynamic add by Button 1");
        optionlist.Add("dynamic add by Button 2");
        optionlist.Add("dynamic add by Button 3");
        optionlist.Add("dynamic add by Button 4");

        //「Dropdown」というGameObjectのDropDownコンポーネントを操作するために取得
        ddtmp = GameObject.Find("Dropdown").GetComponent<Dropdown>();

        //DropDownコンポーネントのoptionsから選択されてているvalueをindexで指定し、
        //選択されている文字を樹徳
        string selectedvalue = ddtmp.options[ddtmp.value].text;

        //ログに出力
        Debug.Log(selectedvalue);

    }
}

　optionsというリストのインデックスvalueを指定することでリストの文字列を取得して、ログに出力しています。実行結果は以下になります。

Optionの値変更を見張る

　最後にOptionの値が変更された際にイベントとして通知を受ける方法について説明します。変更通知を受けるためにまずDropDownScrに以下の関数を追加します。

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

public class DropDownScr : MonoBehaviour
{
//中略
    public void OnSelected()
    {
        Dropdown ddtmp;

        //DropdownコンポーネントをGet
        ddtmp = GetComponent<Dropdown>();

        //Dropdownコンポーネントから選択されている文字を取得
        string selectedvalue = ddtmp.options[ddtmp.value].text;

        //ログに出力
        Debug.Log(selectedvalue);
    }
}

　Optionsの値が変更された時にこの関数が呼び出されるように、コンポーネントに追加します。GameObjectをドラッグ＆ドロップして、Functionを選択します。