#概要
Unityのバージョンは5.2.3f1
uGUIのToggle（チェックボックス）とラジオボックスの作り方についてのメモです。
Toggleのコンポーネントの内容は以下の通りです。
- Toggle
- Background(Image)
- Checkmark(Image)
- Label(Text)
内容はマニュアルを見ると詳しく載っています。
http://docs.unity3d.com/ja/current/Manual/script-Toggle.html
http://docs.unity3d.com/ja/current/Manual/script-ToggleGroup.html
Toggleの表現はButtonとほぼ同じなので、Buttonの記事を参照。
http://qiita.com/seka/items/344bfb325f300649cd5b
Textについての説明はこちら
Imageについての説明はこちら
#ラジオボックスを作る
- Create Emptyで空のオブジェクトを作る（名前はToggleGroup）
- この空のオブジェクトにAdd Component>UI>Toggle Groupを追加する
- 子オブジェクトにToggleを追加する（とりあえず３つくらい）
- 各ToggleのIs Onのチェックを解除してチェックを非表示にしておく
- 各ToggleのGroupに親オブジェクトのToggleGroupを選択する
これでラジオボックスができる。（必ずどれか一つにチェックが入るようにするには、Toggle GroupのAllow Switch Offを解除する）
#Toggleのイベント
チェックボックスのクリックイベントはOn Value Changed(Boolean)で制御します。
チェックボックスは押してから離したときにイベントが発生します。
イベントの追加方法は
1.右下の＋をクリック
2.None(Object)に制御するオブジェクトを選択
3.No Functionで制御するメソッドもしくは変数を指定する
#Toggle Groupで作ったラジオボックスのイベント
チェックが付いてない所をクリックするとイベントは２回発生するので注意。
最初にチェックが外れるToggleでイベントが発生して、その後チェックが付くToggleのイベントが発生します。
#ToggleのSprict制御
using UnityEngine.UI;
using System.Linq;
private Toggle toggle1;
private ToggleGroup toggleGroup1;
void Start()
{
toggle1 = GetComponent<Toggle>();
toggleGroup1 = GetComponent<ToggleGroup>();
}
void Update()
{
Debug.Log(toggleGroup1.AnyTogglesOn()); // いずれかのトグルがオンになっているか
if (toggleGroup1.AnyTogglesOn())
{
toggle1 = toggleGroup1.ActiveToggles().FirstOrDefault(); // チェックが付いているトグルを取得
Debug.Log(toggle1.name);
}
}
// このメソッドをOn Click()に指定するとボタンを押したときにメソッドを呼び出す
public void OnClick()
{
Debug.Log(toggle1.isOn); // トグルの状態
}
#その他のメモ
- WebのUIではよく使われる（アンケートの選択など）
- ラジオボックスはスマホのUIでよくあるタブナビゲーションやセグメンテットコントロールをつくるのに応用できる。（iPhoneのAppStoreのUIが参考になる）
- ToggleのアニメーションはCheckmarkのImage TypeをFilled、Fill MethodをHorizontal、Fill OriginをLeftにして、クリックしたらFill AmountをScriptで徐々に変化させるといい感じになる。（チェックマークが丸の場合はFill MethodをRadial 360にするといい）
#参考になりそうなサイトやAsset
スマホの場合、ボタンをつくる上で注意することはボタンのサイズ(小さすぎると押しづらい)
http://www.dotproof.jp/2013/08/06/minimum-tap-size/
チェックボックスとラジオボックスの表現の参考サイト
http://weboook.blog22.fc2.com/blog-entry-379.html
http://commte.net/blog/archives/3948
チェックのアニメーションの参考サイト
http://tympanus.net/Development/AnimatedCheckboxes/
#今後の課題
タブ型ナビゲーションなどの作り方は別の記事で書く予定。