【Unity】【C#】uGUI ドロップダウンの要素をコードで設定と取得、外観のカスタマイズなど

2017/01/14 Sat [edit]

　どちらかというと備忘録。調べているとき色々な方法があったので、少しまとめておいた感じ。どのやり方でも違いはないので、用途によって使いやすい方を選べば良いと思う。

※ Unity 5.5.0f3 / Windows10(x64) で確認

■ドロップダウンの要素をコードで設定する
■ドロップダウンの要素を取得する
■ボタンを押したとき、ドロップダウンの要素を取得する
■uGUI の見た目を変更する（簡易的な外観のカスタマイズ）

■ドロップダウンの要素をコードで設定する

　まずはドロップダウンを画面に置いてしまおう。「GameObject」メニューから「UI＞Dropdown」で「Canvas」以下に生成される。インスペクタで下の方へスクロールして見てみると、予め３つの要素が設定されている。これをコードで変更することになる。なお、GUI 関連をシーンビューで見るときは、「2D」のボタンをオンした方が見やすいかも知れない。

　要素を設定するコードは以下のようになる。インスペクタで操作するドロップダウンオブジェクトを設定して、スクリプトで変更する感じだ。「using UnityEngine.UI」を入れて置いた方が簡潔だろう。なお、クラス名は任意で良い。

●要素を文字列のリストで設定する

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

public class DropdownTest : MonoBehaviour {

    public Dropdown dropdown;    //操作するオブジェクトを設定する

    // Use this for initialization
    void Start () {
        if (dropdown) {
            dropdown.ClearOptions();    //現在の要素をクリアする
            List<string> list = new List<string>();
            list.Add("1");
            list.Add("2");
            list.Add("5");
            dropdown.AddOptions(list);  //新しく要素のリストを設定する
            dropdown.value = 1;         //デフォルトを設定(0～n-1)
        }
    }
}

　このスクリプトを適当なオブジェクトにアタッチして、操作するオブジェクトをドラッグ＆ドロップで設定しておく。今回は「Canvas」にアタッチしてあるが、どこでも良い。プレイして「Dropdown」をインスペクタで見てみると要素が変わっていることがわかる。なお、デフォルトの値(value)は要素の先頭を０とした連番となっている。ここでは２番目([1])の要素を設定している。

●プレイ中

　もう１つ、直接プロパティに設定する方法もある。内容的には上記の例と同じものだが、追加するリストには「Dropdown.OptionData」クラスの要素を使う。リストの内容はこの形式で保持されていると考えれば良いだろう。

●要素を「Dropdown.OptionData」のリストに直接設定する

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

public class DropdownTest : MonoBehaviour {

    public Dropdown dropdown;    //操作するオブジェクトを設定する

    // Use this for initialization
    void Start () {
        if (dropdown) {
            dropdown.options.Clear();    //現在の要素をクリアする
            dropdown.options.Add(new Dropdown.OptionData("1"));//新しく要素を追加する
            dropdown.options.Add(new Dropdown.OptionData("2"));
            dropdown.options.Add(new Dropdown.OptionData("5"));
            dropdown.value = 1;          //デフォルトを設定(0～n-1)
            //dropdown.RefreshShownValue();//更新を確認(画像を設定したとき)
        }
    }
}

　こちらを使った場合はアイコン画像(Sprite)なども一緒に設定できる。以下に資料を載せておくので必要があれば参照して欲しい。「Dropdown.RefreshShownValue()」は画像も更新したときは必要になるようだ。文字列だけなら無くても構わない。

（参考）
・Unity5のドロップダウンのオプション値をスクリプトで設定する

■ドロップダウンの要素を取得する

　次に設定した要素を取得してみよう。今回は値(value)とテキストを取得することにする。ちなみに値の方は先頭からの連番(0～n-1)になる。

　この場合はコールバックイベントの「Dropdown.onValueChanged(int)」が使える。まずはスクリプトを用意して、「＋」ボタンを押してインスペクタに設定しよう。なおここでは「DropdownTest」スクリプトは「Canvas」オブジェクトにアタッチしてあるものとする。

●「OnValueChanged(int)」コールバックを使って要素を取得する

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

public class DropdownTest : MonoBehaviour {

    public Dropdown dropdown;    //操作するオブジェクトを設定する

    // Use this for initialization
    void Start () {
        if (dropdown) {
            dropdown.ClearOptions();    //現在の要素をクリアする
            List<string> list = new List<string>();
            list.Add("1");
            list.Add("2");
            list.Add("5");
            dropdown.AddOptions(list);  //新しく要素のリストを設定する
            dropdown.value = 1;         //デフォルトを設定(0～n-1)
        }
    }

    public void OnValueChanged(int value) {
        Debug.Log("value = " + value);  //値を取得（先頭から連番(0～n-1)）
        Debug.Log("text(options) = " + dropdown.options[value].text);  //リストからテキストを取得
        Debug.Log("text(captionText) = " + dropdown.captionText.text); //Labelからテキストを取得
    }
}

　プレイしてドロップダウンを変更してみると値がコンソールにデバッグ表示される（はじめの１回はデフォルト設定の変更のため。０からならデフォルト設定は必要ない）。

　値(連番)ではなくて、直接選択されたテキストを使いたいときもあるだろう。この場合は大まかに２つの方法がある。１つは上記のドロップダウンに設定したリストを取得する方法と、選択したときに表示されるラベルを取得する方法だ。

　内容的にはリストの方は設定した値を取得しているだけなので説明はいらないと思うが、「Label」からというのはヒエラルキーで「Dropdown＞Label」と開くと、このオブジェクトに選択したテキストが設定されているのがわかるからだ。「Dropdown.captionText」はそのテキストを保持しているオブジェクトと考えれば良いだろう。

■ボタンを押したとき、ドロップダウンの要素を取得する

　まずはドロップダウンがある状態から、「GameObject」メニューの「UI＞Button」でボタンを追加しよう。このボタンを押したとき、選択されているドロップダウンの要素を取得するようにする。基本的には今までの方法と変わらない。取得タイミングをボタン押下にしただけだ。

　ボタンには「Button.onClick()」というコールバックが標準で備わっている。ドロップダウンのときと同じようにスクリプトを用意して、「＋」ボタンを押してインスペクタで設定しよう。先のドロップダウンの例をそのまま使うなら、以下のようになる。

●「OnClick()」コールバックを使って要素を取得する

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

public class DropdownTest : MonoBehaviour {

    public Dropdown dropdown;    //操作するオブジェクトを設定する

    // Use this for initialization
    void Start () {
        if (dropdown) {
            dropdown.ClearOptions();    //現在の要素をクリアする
            List<string> list = new List<string>();
            list.Add("1");
            list.Add("2");
            list.Add("5");
            dropdown.AddOptions(list);  //新しく要素のリストを設定する
            dropdown.value = 1;         //デフォルトを設定(0～n-1)
        }
    }

    public void OnClick() {
        Debug.Log("dropdown.value = " + dropdown.value);  //値を取得（先頭から連番(0～n-1)）
        Debug.Log("text(options) = " + dropdown.options[dropdown.value].text); //リストからテキストを取得
        Debug.Log("text(captionText) = " + dropdown.captionText.text); //Labelからテキストを取得
    }
}

　この例のようにドロップダウンの初期化とボタンの操作を１つのクラスで管理する場合は上記のやり方で十分だが、別々のクラスで管理したいときはどうすれば良いのだろうか。もちろん同じように操作するオブジェクトを設定させても良いが、コールバックのオーバーロードをすればもう少し簡潔に書くこともできる。

●コールバックのオーバーロードを使って要素を取得する
（初期化のみのクラス「DropdownTest」）

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

public class DropdownTest : MonoBehaviour {

    public Dropdown dropdown;    //操作するオブジェクトを設定する

    // Use this for initialization
    void Start () {
        if (dropdown) {
            dropdown.ClearOptions();    //現在の要素をクリアする
            List<string> list = new List<string>();
            list.Add("1");
            list.Add("2");
            list.Add("5");
            dropdown.AddOptions(list);  //新しく要素のリストを設定する
            dropdown.value = 1;         //デフォルトを設定(0～n-1)
        }
    }
}

（要素の取得のみのクラス「ButtonTest」）

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

public class ButtonTest : MonoBehaviour {
    //OnClick のオーバーロード
    public void OnClick(Dropdown dropdown) {
        Debug.Log("dropdown.value = " + dropdown.value);    //値を取得（先頭から連番(0～n-1)）
        Debug.Log("text(options) = " + dropdown.options[dropdown.value].text); //リストからテキストを取得
        Debug.Log("text(captionText) = " + dropdown.captionText.text); //Labelからテキストを取得
    }
}

　この「ButtonTest」を例えばボタンにアタッチし、要素を取得するドロップダウンをインスペクタで設定すれば、スクリプトはかなり簡潔になる。ドロップダウンの状態は「Dropdown」オブジェクトが保持しているわけだから、これを引数にして直接渡してしまえば良いわけだ。もちろん「Label」オブジェクトを引数にするのもアリだろう。

●プレイ中にボタンを押すと…

■uGUI の見た目を変更する（簡易的な外観のカスタマイズ）

　一番簡単な方法として、各オブジェクトの「Image＞Source Image」を入れ替えれば良い。試しに Asset Store (Ctrl-9) から「Cartoon UI Pack」をインポートして使ってみよう。キーワードに「Cartoon UI」を入れて「無料のみ」のボタンを押せば簡単に見つかる。