Unity - UI：Dropdown の使い方 -

初めに

　UI の一つである Dropdown の使い方をまとめます。

Index

Dropdown の構造

　Dropdown のコンポーネントから制御することができるため、直接、子オブジェクトを編集することなく Dropdown を使用することもできます。

Dropdown のコンポーネントの機能

Label	テキストの表示方法を設定する
Arrow	Dropdown の右側の画像（デフォルトは下矢印）を設定する
Template	Dropdown を開いたときの見え方を設定する

Label

　Text コンポーネントがついています。フォントが変更したい場合はこちらから変更できます。

fineworks-fine.hatenablog.com

Arrow

　Image コンポーネントがついています。Dropdown の右側の画像を変更したい場合はこちらから変更できます。

fineworks-fine.hatenablog.com

Template

　Template はスクロールビューになっています。Template を使用せず、直接、開いたときに見えるリストを編集したい場合は、こちらから編集できます。

Interactable, Transition, Navigation

　他の UI にも同様の機能がついています。下の記事にまとめていますので、そちらをご覧ください。

fineworks-fine.hatenablog.com

Template

　Dropdown を開いたときに見えるリストのテンプレートを設定できます。デフォルトでは 子オブジェクトの Template が設定されています。

Caption Text、Caption Image、Item Text、Item Image

Caption Text	現在選択されているオプションのテキストを格納する Text コンポーネント
Caption Image	現在選択されているオプションの画像を格納する Image コンポーネント
Item Text	各項目のテキストを格納する Text コンポーネント
Item Image	各項目の画像を格納する Image コンポーネント

　分かりづらいため、具体例を用いて説明します。

　上の画像では、現在選択されているオプションは ”Option B" になります。各項目とは "Option A" から "Option C" までの3つの項目となります。
　現在選択しているオプションが表示される部分は Caption Text、Caption Image が表示され、リスト内のそれぞれの項目は Item Text、Item Image が表示されます。
　表示される文章や背景色を変更するには、後述する Options が必要になりますので、そちらで解説します。

Value、Options

　Options ではリストのテキストと画像を指定することができます。

　背景色については、こちらで各オプションごとに Sprite を指定する以外に、先ほどの Caption Image、Item Image を設定する必要があります。

　Caption Image には Dropdown 本体を、Item Image には Item Background をドラッグ&ドロップすると背景色をオプションごとに指定した Sprite にすることができます。

　オプションごとにインデックス（番号）が指定されています。最初は 0 、2番目が 1 ...と割り振られています。

　Value は現在選択されているインデックスを表します。

On Value Changed

　オプションが変更されたときに呼び出される関数を指定することができます。

　今回はオプションごとにテキストを変更してみます。

• スクリプトを作成

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;  //UIのため, 追加

public class DropdownScript : MonoBehaviour
{
    [SerializeField] private Dropdown dropdown;  //dropdownを取得
    [SerializeField] private Text text;  //変更するtextを取得

    void Start()
    {
      //起動時に現在選択されているオプションのテキストに変更するため
      ChangeText();
    }

    //選択されているオプションが変更されたとき呼び出される
    public void ChangeText()
    {
      if(dropdown.value == 0)
      {
        text.text = "１つめ";
      }
      else if(dropdown.value == 1)
      {
        text.text = "２つめ";
      }
      else if(dropdown.value == 2)
      {
        text.text = "３つめ";
      }
    }
}

• スクリプトをアタッチし、Dropdown と Text を取得する。その後、On Value Changed の関数として ChangeText を指定する。

（実行）

最後に

　今回、Image は背景色として使いましたが、Item Background ではなく別の Image を選択すれば、その画像が変更されます。背景色として使用する必要はありません。