Unityで配置するUI⑬

こんにちは、サメ太郎です。
今回は「ドロップダウン」についてご紹介していきます。
前回のスクロールビュー同様、情報量の多い内容を分かりやすく適切にまとめるために活用していきましょう。

実際に使用されている部分はこちらからご確認ください！
↓メタバース「バーチャルCOMCOM」リンク↓
https://comfort-inc.co.jp/metaverse/
↓メタバース×HPスターターパック版　リンク↓
https://comfort-inc.co.jp/lp_meta/lp_metaverse_starter-pack.html

ドロップダウンを作成しよう！

では早速ドロップダウンを作成してみましょう。
「UI →ドロップダウン」を追加すると、以下のような構造が自動的に生成されます。

基本的な設定はDropdownを選択した状態のインスペクターから行います。

Optionsで選択肢の内容を設定できます。
Option Aとある部分を書き換えれば、選択肢の内容も変わります。
選択肢を増やしたいときは、＋ボタンを押せば好きな数だけ項目を増やすこともできるので作成する内容が決まったらこの部分を設定しましょう。

Value(値)では初期表示の設定ができます。
Optionsの項目は上から0,1,2,…と項目番号が管理されているので、Optionsの途中の項目を最初に表示したい場合はこの部分に項目番号をいれてみましょう。

Optionsの項目はシーン再生時に確認するとよくわかりますが、上から順番にドロップダウンの中で表示されるので基本的にはOptionsの項目を追加する時に見せたい順番になるよう気を付けておくとその後の管理が楽になります。

もっとドロップダウンを調整しよう！

項目を整理することはもちろんですが、見た目にもこだわっていきましょう！
Templateの中身を編集すると表示範囲や選択肢を並べる部分、各選択肢の見た目を調整できます。
今回は各選択肢の見た目設定についてご紹介します。
選択肢部分の見た目設定はItem内の項目からそれぞれ設定できます。

Item…初期状態で選択するか(Toggle部分で設定可能)
Item Background…選択肢の背景画像
Item Checkmark…選択されているときに表示されるチェックマーク
Item Label…選択肢の文字を表示するもので、フォントサイズや色、整列などTextで設定できることは自由にカスタマイズ可能

それぞれカラーやサイズの設定ができますが、特に私が設定に幅があるなと思っているのがCheckmark部分です。
Item Checkmarkの設定をする前(通常時)はチェックマークの画像(スプライト)がアタッチされています。
この項目のアンカープリセットや位置、画像(スプライト)をBackgroundと同じように設定し、色だけBackgroundと比べて目立つ色にしてみましょう。
そうすると、選ばれている項目の背景色が変わって見えます。

チェックマークで選択中の表示をすることも良いのですが、項目数が多い場合や項目の文字数が多いなど、ユーザーが選択中の項目を見落とす可能性が高くなる場合はこのような一工夫をしてもいいと思います。
特に項目数が多い場合はドロップダウン内のリストをスクロールする必要があるので、スクロール中でも一目で選択中の項目を発見できる方がいいですよね。

今回はドロップダウンについてご紹介しました。
スクロールビューとは違った観点で、情報量の多い項目の見せ方があると思っていただければと思います。
今回紹介した内容以外にも、見た目や動きの設定をすることでよりユーザーが分かりやすい操作性になるので、ぜひ細かい設定にも挑戦してみてくださいね！