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

Unity5.1.1f1 Personal(2015年7月)

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

今回はuGUIのToggleについて書いていきます〜

uGUIのToggleまとめ

①Toggle解説

Toggleはいわゆるチェックボックスです〜まずは作ってみましょう！

HierarchyビューからCreate > UI > Toggleを選択します〜

すると画面にToggleが表れます〜

Toggle出現

それではInspectorビューを見ていきましょう〜

ToggleのInspectorビュー

Interactable〜Navigationは以下エッセンスと同内容なので割愛します〜

hiyotama.hatenablog.com

まずはIs Onです〜Toggleにチェックが入っているとこちらにもチェックが入り、trueを表します〜

スクリプト上で値を取得する場合は、isOnを使います〜以下ソースです〜

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

public class ToggleScript : MonoBehaviour {

	Toggle toggle;
	
	void Start () {
		toggle = GetComponent<Toggle>();
	}
	
	void Update () {
		Debug.Log(toggle.isOn);
	}
}

ToggleScript.cs

続いてToggle Transitionです〜これはToggleのチェックマークのアニメーションを変更できます〜
Noneだと単純な切り替え、Fadeだとフェードイン、フェードアウトのアニメーションとなるようですが、正直あんまり違いは分かりません〜

続いてGraphicですが、ここではチェックマークの画像を指定できます〜デフォルトでは子オブジェクトのBackground > Checkmarkが指定されています〜

続いてGroupです〜こちらは別途Toggle Groupというコンポーネントを付けて、同一Toggle Groupが指定されたToggleの中では1つしかチェックを付けられない、という機能です〜

試しにToggleをもうひとつ作成し、

最初に作成したToggleに、Add Component > UI >Toggle GroupでToggle Groupコンポーネントをつけて、

両ToggleのGroupに作成したToggle Groupを指定して下さい〜すると、

片方にチェックを入れると片方が消える

グループ内ではチェックを入れられるToggleは1つに限定されます〜

ちなみに通常はグループ内で必ず１つはtrueでなければならないのですが、Toggle GroupコンポーネントにあるAllow Switch Offをtrueにすると、全てのToggleをfalseにすることができます〜

Allow Switch Off = trueで全てのチェックを外せる

最後にOn Value Changedですが、Toggleの値が変更された時に指定したメソッドを呼び出すことができます〜先ほどのスクリプトに加筆して確認してみましょう〜

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

public class ToggleScript : MonoBehaviour {

	Toggle toggle;
	
	void Start () {
		toggle = GetComponent<Toggle>();
	}
	
	void Update () {
//		Debug.Log(toggle.isOn);
	}
	
	public void ChangeToggle ()
	{
		Debug.Log("Toggleが変更されました");
	}
}

ToggleScript.cs

今回追加したChangeToggleメソッドは外部から呼び出すので、publicにしておいて下さい〜

スクリプトの変更が完了したら、On Value Changedのプラスボタンで新しいイベントを追加し、オブジェクトにToggleを、メソッドにToggleScriptのChangeToggleを指定しましょう〜

これでToggleの値を変更する度に、ChangeToggleメソッドが呼び出されるようになりました〜

値が変わる度にメソッド呼び出し

以上、ひよこエッセンスのToggleのまとめでした〜

ありがとうございました〜