ひとりでのアプリ開発 - fineの備忘録 -

ひとりでアプリ開発をするなかで起こったことや学んだことを書き溜めていきます

20220329162023

Unity - UI:Dropdown の使い方 -

初めに

 UI の一つである 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 = "1つめ";
      }
      else if(dropdown.value == 1)
      {
        text.text = "2つめ";
      }
      else if(dropdown.value == 2)
      {
        text.text = "3つめ";
      }
    }
}
  • スクリプトをアタッチし、Dropdown と Text を取得する。その後、On Value Changed の関数として ChangeText を指定する。

(実行)


最後に

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