テラシュールブログ

旧テラシュールウェアブログUnity記事。主にUnityのTipsやAR・VR、ニコニコ動画についてのメモを残します。

【Unity】uGUIドロップダウンメニュー(コンボボックス)の使い方

f:id:tsubaki_t1:20151109041609j:plain

ドロップダウンについてです。

ドロップダウン(或いはコンボボックス)とは、よくある「ボタンを押したら選択肢が出てきて、その中から選択する」的なアレです。

目次

とりあえずの使い方

まずはドロップダウンメニューを作ります。

Hierarchyビュー>Create>UI>Dropdownを選択します。
するとCanvasの下にDropdownオブジェクトが作られます。

f:id:tsubaki_t1:20151109034735j:plain

f:id:tsubaki_t1:20151109035340j:plain

ドロップダウンメニューの選択結果を受け取るコードを作成し、ドロップダウンメニューに登録します。

まずは下のコードを記述します。

using UnityEngine;
using System.Collections;

public class DropdownCallback : MonoBehaviour {

	public void OnValueChanged(int result)
	{
		// 処理
	}
}

これをテキトウなオブジェクト(今回はDropdownオブジェクト)にアタッチして、コンボボックスのOnValueChangedに登録します。
イベント登録についてはUnityの新GUI、UGUIのイベント制御について - テラシュールブログ

f:id:tsubaki_t1:20151109040242j:plain

これで値が変更になった時にOnValueChangedが呼ばれるようになります。

カスタマイズ

要素を増やす

要素を増やすには、DropdownコンポーネントのOptionsを増やします。

上の部分が選択肢、下の部分が選択後右に出る画像です。初期設定だと右に出る程度の使い方ですが、実際はボタンの絵を差し替える勢いで使うものだと思われます。

f:id:tsubaki_t1:20151109040538j:plain

f:id:tsubaki_t1:20151109040629j:plain

Optionsをスクリプトで更新したい場合は、GetComponent<UnityEngine.UI.Dropdown>().optionsを操作します。普通に配列なので、足したり引いたりは多分それほど難しくないと思います。

UIの表示を変える

UIの表示部分は大まかに「ボタン部分」と「選択肢の部分」の二通りに分かれます。ボタンの部分であれば、DropdownコンポーネントのImageを差し替えてやればOKです。

f:id:tsubaki_t1:20151109041126j:plain

f:id:tsubaki_t1:20151109041704j:plain

選択肢の部分は、Dropdown/Templateオブジェクトを操作します。

Dropdown/Templateオブジェクトが選択肢部分の背景(スクロール機能を備えています)、

f:id:tsubaki_t1:20151109041224j:plain

f:id:tsubaki_t1:20151109041850j:plain

f:id:tsubaki_t1:20151109041822j:plain

選択結果のチェックを差し替えるには、Item CheckmarkのImageを差し替えます。

f:id:tsubaki_t1:20151109042042j:plain

f:id:tsubaki_t1:20151109042125j:plain

f:id:tsubaki_t1:20151109042128j:plain

 

関連

tsubakit1.hateblo.jp