この記事について
この記事は私がゲーム制作・学習等で学んだ知識を元にToggle・ToggleGroupの使い方をわかりやすく説明していきます。
この記事で学べること
- Toggleの基本的な使い方
- スクリプトでトグルのON/OFFを取得・変更する方法
- トグルグループを使ったラジオボタン風UIの作成
- よくあるエラーと解決策
※ シンプルなボタンを使いたい方はこちらを参考にしてください。
Toggle（トグル）とは？
ToggleはUnityのUI コンポーネントのひとつで、
いわゆる チェックボックス や ON/OFFスイッチ の役割を持つボタンです。
クリックやタップで ON（チェックあり） / OFF（チェックなし） の状態を切り替えることができます。
特徴
- 設定画面のチェック項目
- サウンドON/OFF
- 通知ON/OFF
- 複数選択が可能なチェックリスト
- オプション選択
- 条件付きのアンケート項目
- Toggle Groupと組み合わせて単一選択
- ラジオボタン的な使い方（例：難易度選択 Easy/Normal/Hard）
Toggle（トグル）の導入方法
Toggle（トグル）の追加方法
① Hierarchy から追加
・ [Hierarchy]→[右クリック]→ [UI] → [Toggle] を選択
② Toggleの構成要素
- Toggle → チェックボックスの制御
- Background → チェックボックスの背景
- Checkmark → チェックが入った時の画像
- Label（TextMeshPro推奨） → トグルのラベルテキスト
Toggle（トグル）の基本操作
InspectorでToggle（トグル）のIsOn（チェック）を切り替え
Toggle（トグル）のチェックボタンは「Is On」で設定可能。
スクリプトでIsOn（チェック）を切り替え / onValueChanged
Toggleの状態取得やイベント処理はスクリプトで制御することが多々あります。気になる方は以下のサイトを参考にしてください。
Toggle（トグル）のカスタマイズ
Toggle（トグル）のカスタマイズはチェックボックスの背景、チェックマーク、テキストが変更できる。また、Toggleコンポーネントに「Transition」があるがチェック動作によって色のイベントが可能。
Toggle Group（ラジオボタン風UIの作成）
Toggle Groupを使うと、1つのトグルだけONにするラジオボタン風のUI を作れる。
Toggle Groupの設定方法
- 適当な名前を付けたCreate Empty（空のGameObject）にAdd Componentから「Toggle Group」スクリプトをアタッチする。
- 子オブジェクトとしてToggleを複数追加（子オブジェクトは任意）
- 各ToggleのToggle Groupに親のToggle Groupを設定
Toggle Groupをスクリプトで取得
ToggleGroupの状態取得やイベント処理もスクリプトで制御することが多々あります。気になる方は以下のサイトを参考にしてください。
よくあるエラーと解決策
Toggleのイベントが動作しない
・ InspectorのOn Value Changedに関数をセットしているか確認
・ スクリプトでonValueChanged.AddListener()を設定しているかチェック
Toggle Groupが正しく動作しない
・ 各ToggleにToggle Groupを設定しているか確認
・ Allow Switch Offが有効なら全トグルをOFFにできる（ONなら1つは必ず選択される）
スクリプトでisOn = trueにしても動作しない
・ ForceLabelUpdate();を実行すると強制更新される
myToggle.isOn = true;
myToggle.ForceLabelUpdate();まとめ
- isOnでトグルのON/OFFを取得・変更できる
- onValueChanged.AddListener() で切り替え時に処理を実行
- Toggle Groupを使えばラジオボタン風のUIを作れる
- スクリプトでチェックマークや背景のカスタマイズが可能
