Unity UI のドロップダウンを使用する

ページ更新日 : 2023年12月27日水曜日

ページ作成日 : 2022年3月24日木曜日

検証環境

Windows

Windows 11

Unity エディター

2020.3.25f1

この Tips の前提設定

この Tips の説明の前提として以下の設定を事前に行っています。

はじめに

ドロップダウンは複数の選択項目からユーザーにひとつ選択してもらう時に使うことができます。選択項目が多数あっても画面上には選択したものしか表示されないので、省スペース化に役に立つ、ユーザーが何を選択しているかがわかりやすい、などのメリットがあります。

ドロップダウンを配置する

ヒエラルキーから「ドロップダウン」を選択してビューに追加します。

ドロップダウンの位置は任意に調整してください。サイズが小さいようであれば枠をドラッグして大きくします。

中のテキストのサイズは Dropdown ではなく中にある Label を選択して設定します。

実行するとドロップダウンの動作を確認できます。初期状態では選択できるアイテムが３つあるので選択の切替が可能です。ただし、ドロップダウンのサイズや Label のフォントサイズを変えた場合はドロップダウンで表示されるテキストのサイズと一致しなくなります。

ドロップダウンアイテムのサイズを調整する

ドロップダウンを配置したときにオブジェクトのサイズやフォントサイズを変更していない場合はこの設定は不要ですが、変更している場合はドロップダウンアイテムの設定も必要になります。

ドロップダウンオブジェクトには選択アイテムが表示されるときにどのようなレイアウトで表示するかの定義が含まれています。 Dropdown の中にある Template がそれに該当します。いくつか設定しないときれいに表示されません。

まず、配置したドロップダウンの各パラメータが以下のように設定してある前提で説明しています。違うパラメータで設定している場合は数値を置き換えて読んでください。今回のサンプルでは他のパラメータも設定していますが、ドロップダウンアイテムとは関係ないので省きます。

オブジェクト	パラメータ名	値
Dropdown	高さ	72
Dropdown > Label	フォントサイズ	40

アイテムのフォントサイズ

まずアイテムのフォントサイズを変更します。オブジェクトは「Dropdown > Template > Viewport > Content > Item > Item Label」を選択します。フォントサイズは Label と同じ 40 を指定します。選択項目を多く見せたいのであれば多少小さくしても構いません。

フォントサイズを大きくしても１アイテムの表示サイズは変わらないので実行しても何も見えない場合があります。

アイテムのサイズ

次に１アイテムのサイズを設定します。選択するオブジェクトは「Dropdown > Template > Viewport > Content > Item」です。高さを 72 にします。選択項目を多く見せたいのであれば多少小さくしても構いません。

これでアイテムの要素が見えるようになるのですが、なぜか選択アイテムの上下がスクロールに関係なく少し切れてしまいます。

これを直すには「Dropdown > Template > Viewport > Content」の高さを Item と同じ 72 に設定します。これで上下のアイテムがきちんと見えるようになります。

ちなみにデフォルトのドロップダウンの設定では Item よりも Content の高さが若干大きく設定されており、これによって選択アイテムの上下に若干余白が表示され圧迫感が減るようになっています。

チェックマークのサイズ

チェックマークのサイズも小さいので修正します。対象オブジェクトは「Dropdown > Template > Viewport > Content > Item > Item Checkmark」です。

幅と高さを変更するとそのままチェックマークも大きくなるのでここでは 72 を設定します。

実行するとチェックマークは大きくなっていますが位置がおかしいのでこれも直します。

まず Item Checkmark のピボットX を 0 に設定し、位置X も 0 に設定します。これによりチェックやラベルの大きさに関係なくいい場所に配置できます。

あとはラベルと重なっているので Item Lebel を選択して左位置をチェックマークのサイズと同じにします。

スクロールバーサイズ

スクロールバーも小さくてクリックしにくいので大きくします。サイズについては人によってこだわりがあるので決め打ちするものではないのですが、ここではドロップダウンの高さの 2/3 である 48 を設定します。

選択するオブジェクトは「Dropdown > Template > Scrollbar」で幅の値を設定します。

ドロップダウンアイコンのサイズ

アイテム側ではないですが、ドロップダウンアイコンも小さいままなので変更します。選択するオブジェクトは「Dropdown > Arrow」です。

アイコンのサイズについては幅と高さを設定すれば大きさが変わります。ここではドロップダウンの高さと同じ 72 に設定します。

このままだと位置がずれているのでピボットX を 1 に、位置X を 0 に設定します。これによりサイズに関係なくいい感じの位置にアイコンを表示されることができます。

ドロップダウンアイテムの表示数

アイテムのサイズを大きくしたことにより一度に表示できる選択アイテムが減っているのでこれを多くするようにします。この設定は「Dropdown > Template」で指定します。表示させる個数をアイテム数で指定するわけではなく高さでサイズを設定するので指定する値は「アイテムの高さ×個数」になります。ここでは１０個程度表示させたいので 72 x 10 = 720 を設定します。

表示エリアを大きくしていますが、現時点ではアイテムは３つだけなので３個分だけ表示されます。

選択アイテムを設定する

デフォルトでは「Option A ～ Option C」の３つのアイテムが設定されていますが、これらのアイテムは Dropdown オブジェクトの Dropdown コンポーネントにあります。

インスペクターを下にスクロールすると「Options」の項目がありますので、ここで自由に名前を変えたり追加削除ができます。

初期選択アイテムを設定する

アイテムの選択は番号によって決定されています。 Dropdown オブジェクトの Dropdown コンポーネントにある「値」で初期選択を指定できます。アイテムの番号は 0 から始まるので、４番目を初期選択させる場合は 3 を設定します。

アイテム選択時に処理を行う

ドロップダウンでアイテムを選択したタイミングでなんらかの処理を行いたい場合があると思います。これはボタンをクリックしたときに処理させるときと同様の手順で実装が可能です。

オブジェクトはドロップダウンとテキストを１つずつ配置しています。ドロップダウンでアイテムを選択したら右にあるテキストオブジェクトに内容を表示させるようにします。オブジェクトの配置以外は重要ではないので好きなように設定してください。

まずはプロジェクトでスクリプトを作成します。ここでは DropdownItemSelector という名前にしています。

スクリプトを開いてコードを以下のようにします。

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}";
  }
}

スクリプトを保存したら作成したスクリプトを EventSystem オブジェクトにアタッチします。ボタンの Tips でも説明していますが、本 Tips では特別な理由がない限りは一貫してスクリプトを EventSystem にアタッチすることにしています。

値を取得するドロップダウンオブジェクトと値を設定するテキストオブジェクトをアタッチします。

次に処理対象のドロップダウンオブジェクトを選択し、インスペクターの Dropdown コンポーネント内にある「値の変化時 (Int32)」を追加します。

左下の項目には動作させるスクリプトをアタッチしているオブジェクトを入れる必要があるので、ここでは EventSystem をセットします。

「No Function」から DropdownItemSelector の OnSelectionChanged を選択します。

実際に動かして正しく動作しているか確認してみてください。

動的にアイテムを追加する

エディター上で選択できるアイテムを指定することはできますが、ゲーム中に状態が変わり選択するアイテムを変更したい場合があると思います。この場合はプログラムで選択するアイテムを変更する形になります。

オブジェクトは以下のように「ドロップダウン」「ボタンx2」を配置します。配置以外のパラメータは自由に設定して構いません。

スクリプトを作成し名前は DropdownDynamic とします。コードは以下のようにします。

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 には選択するアイテムが管理されているのでこれに対して Add や Remove を行うことによりアイテムを動的に制御することができます。

EventSystem にスクリプトとオブジェクトをアタッチします。

追加ボタン、削除ボタンのクリックイベントにそれぞれメソッドを割り当てます。

設定が終わったら実行します。エディタ上でアイテムを消している場合はクリックしてもアイテムは表示されません。

追加ボタンを４回クリックするとアイテムが４つ追加されていることを確認できます。

削除ボタンを２回クリックするとアイテムが２つ削除されていることを確認できます。

Unity UI のボタンを使用する

ドロップダウンアイテムの一覧を表示したときに選択しているアイテムが先頭にくるようにスクロールする