【Unity開発】uGUIのDropDownの使い方【ひよこエッセンス】

Unity5.3.5f1 Personal(2016年7月)

ひよこエッセンスの時間です〜

今回はuGUIのドロップダウン機能を解説していきます〜

ドロップダウンを作る

とりあえずドロップダウンを作ってみます！
HierarchyからCreate > UI > DropDownを選択します〜

するとこんな感じにUIのGameObjectが生成されます〜

また、ゲーム画面にはドロップダウンが生成されています〜

Dropdownコンポーネント解説

Dropdownコンポーネントは、Dropdownと書かれたUIオブジェクトについています〜

HierarchyのDropdownをクリック

InspectorにDropdown(Script)というコンポーネントあり

Template
Templateは、ドロップダウンをクリックした時に生成されるDropdown Listというゲームオブジェクトの元になるオブジェクトです〜

Hierarchyで非アクティブだったオブジェクトですね！

ここらへん

試しにドロップダウンをクリックしてみると・・・

ドロップダウンをクリック！

下に選択するためのリストが出現します！この時Hierarchyを見てみると、Dropdown Listというオブジェクトが新たに生成されているのですが、その構成がTemplateとほぼ同一なのです！

Templateとかなり似てる・・・

つまりTemplateとはまさにその名前の通り、クリックした際に生成されるDropdown Listのテンプレートだったわけです！
イメージとしてはResourcesフォルダからPrefabを生成する感じですね〜

試しにItem CheckMarkの画像をひよこ画像に変えてみると・・・

こいつに変えてみる

Item Checkmarkを選択し、hiyoko画像をドラッグ＆ドロップ！

チェックマークがひよこに！

Caption Text
Caption Textには子オブジェクトのLabelが入っており、ここにはドロップダウンで選択したTextが入力されます〜
デフォルトでは「Option A」が入ってるところ、試しにOption Cを選択すると・・・

Option Cを選択！

TextがOption Cに変更される！

LabelのTextも変更されている

CaptionImage
Caption Imageは恐らくCaption Textのバックグラウンド画像を扱うのだと思うのですが・・・
変更しようとするとDropdownオブジェクトについているImageが非アクティブ化したり変な挙動をするので、バックグラウンド画像を変更したい時はImageを直接変更したほうが良いと思います〜

こいつを直接いじろう

Item Text
Item Textには、Templateの最深部にあるItem Labelが設定されています〜
ドロップダウンをクリックした時に生成されるDropdonw Listの、テキストですね！
試しにItem LabelのFont Sizeを5に変更して、ドロップダウンをクリックすると・・・

Font Sizeを小さくすると

Dropdown ListのTextが小さくなる！

とはいえTemplateからDropdown Listが生成されるのだとすれば、DropdownコンポーネントのItem TextにTemplateのItem Labelを指定する意味ってあるのかしら？

試しにItem Textを空にしてみてもう1回ドロップダウンをクリックしてみると・・・

テキストは小さいままでした〜
Item Textを設定する意味は見た目を反映させるためではなく、別にあるのでしょう〜

Item Image
Item Imageは、選択肢に設定したImageコンポーネントを設定することができます〜が、Item Textと同様なんのためにあるのかは分かりません〜

ん〜・・・もしかしたらTemplateは常に非アクティブ状態で、Scriptから色々と設定するのが難しいから、設定しやすくするためにItem TextとItem Imageは存在するのかもしれませんね！（分かんないですけど！

TemplateのItem下にhiyokoのImageを追加した図

Value/Options
Optionsは今まで触ってきた選択肢そのもので、Valuesは現在選択している選択肢を表します！
デフォルトだと
0 : Option A
1 : Option B
2 : Option C
という感じです！

OptionsにはTextとSpriteを設定することができます！
もちろん＋で追加、−で削除もできます！

2項目追加し、TextとSprite設定

Spriteを設定したんだけど反映されないな〜、なんでだろ・・・
Spriteに関しては、同一でよければ先ほどのようにTemplateの子オブジェクトとして、Imageオブジェクトを生成してしまうのがいいかもしれません〜
個別に設定したい場合は、う〜ん・・・どうすればいいんだろ・・・

OnValueChanged
Dropdown Listから選択肢を選択した時に、指定したScriptのメソッドを呼び出します〜

引数にInt32と書いているので、valueを渡せると思ったのですが、

using UnityEngine;
using System.Collections;

public class HiyokoColorChange : MonoBehaviour {

	SpriteRenderer _renderer;

	void Start(){
		_renderer = GetComponent<SpriteRenderer>();
	}

	public void ChangeColor(int value)
	{
		switch (value){
		case 0:
			_renderer.color = Color.red;
			break;
		case 1:
			_renderer.color = Color.blue;
			break;
		case 2:
			_renderer.color = Color.green;
			break;
		default:
			break;
		}
	}
}

HiyokoColorChange.cs

このようなScriptを適当なSpriteオブジェクトを作成して取り付け、

Dropdownの選択肢とOnValueMethodをこのように設定しましたが・・・

どれを選んでもhiyokoは赤色にしかならない、つまり引数が常に0のままです！
Inspectorビューで設定されている引数が0なので当たり前といえば当たり前なのですが、自動的にValueの値が送信されると思っていました〜

ご安心下さい！
かなりの力技ですが・・・解決する手はあります！

using UnityEngine;
using UnityEngine.UI;
using System.Collections;

public class HiyokoColorChange : MonoBehaviour {

	SpriteRenderer _renderer;

	void Start(){
		_renderer = GetComponent<SpriteRenderer>();
	}

	public void ChangeColor(Dropdown dropdown)
	{
		switch (dropdown.value){
		case 0:
			_renderer.color = Color.red;
			break;
		case 1:
			_renderer.color = Color.blue;
			break;
		case 2:
			_renderer.color = Color.green;
			break;
		default:
			break;
		}
	}
		
}

HiyokoColorChange.cs

Scriptをこのように変更し、引数にDropdown自身を指定します〜

ドラッグ＆ドロップ！

これで無事、指定した色に変更させることができるようになりました〜

かなり長い記事になってしまいましたが、これでだいぶドロップダウンが使いこなせるようになったかと思います〜

以上、ひよこエッセンスでした〜