初めに
UI の一つである Dropdown の使い方をまとめます。
Dropdown のコンポーネントの機能
| Label | テキストの表示方法を設定する |
|---|---|
| Arrow | Dropdown の右側の画像（デフォルトは下矢印）を設定する |
| Template | Dropdown を開いたときの見え方を設定する |
Template
Template はスクロールビューになっています。Template を使用せず、直接、開いたときに見えるリストを編集したい場合は、こちらから編集できます。
Interactable, Transition, Navigation
他の UI にも同様の機能がついています。下の記事にまとめていますので、そちらをご覧ください。
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 = "３つめ"; } } }
（実行）
最後に
今回、Image は背景色として使いましたが、Item Background ではなく別の Image を選択すれば、その画像が変更されます。背景色として使用する必要はありません。