【Unity】チェックボックス/ラジオボタンを作る(Toggle)

バージョン

Unity 2022.3.45f1

UnityでUI用のチェックボックスやラジオボタンを作成する方法です。
UnityではToggle(トグル)を使用して以下のようなチェックボックス(ラジオボタン)を作ります。

チェックボックスを作成する
1. Toggleゲームオブジェクトを作成
2. Toggleをスクリプトから制御
ラジオボタンを作成する
1. Toggle Groupの設定
2. スクリプト実行

チェックボックスを作成する

Toggleゲームオブジェクトを作成

まずはToggle用のゲームオブジェクトを作成します。

ヒエラルキーで右クリック
「UI」→「Toggle」

これでToggleゲームオブジェクトが生成され、チェックボックスとして使用できます。

Toggleをスクリプトから制御

よく使うのは以下のものです。

[SerializeField] private Toggle toggle;

//Toggleのゲームオブジェクト名を取得
string toggleName = toggle.name;

//現在のToggleの状態を取得
bool isOn = toggle.isOn;

//イベント(OnValueChanged)にリスナを追加
toggle.onValueChanged.AddListener(SampleListener);

public void SampleListener(bool isOn){}

実際にToggleオブジェクトに次のスクリプトをアタッチして実行します。
ToggleのチェックがONの場合は背景がピンク、OFFの場合は水色になります。

using UnityEngine;
using UnityEngine.UI;

public class ToggleSample : MonoBehaviour
{
    [SerializeField] private Image image;
    private Toggle toggle;

    void Start()
    {
        toggle = GetComponent<Toggle>();
        toggle.onValueChanged.AddListener(Change);
    }

    /// <summary>
    /// OnValueChangedに追加するメソッド
    /// </summary>
    /// <param name="isOn">Toggleの状態</param>
    public void Change(bool isOn)
    {
        if (isOn)
        {
            //ON
            image.color = new Color32(255, 200, 255, 255);
            Debug.Log($"ON");
        }
        else
        {
            //OFF
            image.color = new Color32(200, 255, 255, 255);
            Debug.Log($"OFF");
        }
    }
}

スクリプトのアタッチと背景用のImageを準備しておきます。

実行結果は以下の通りです。

このような感じでチェックボックスを実装できます。

ラジオボタンを作成する

上記のようにToggleを複数まとめてWebのラジオボタンのような仕組みができます。

Toggle Groupの設定

ToggleにはToggle Groupという設定があり、Toggleがどのグループに属しているか指定することができます。
同じToggle Groupに属しているToggleはどれか1つだけがONになります。
OFF状態のToggleをONにした時、同じグループのON状態のToggleは自動的にOFFに切り替わります。

今回は空のオブジェクトに設定していきます。

空オブジェクト生成→インスペクターで「Add Component」をクリック
「Toggle Group」と入力
「Toggle Group」が出てきたらクリック

インスペクターにToggle Groupが追加されたらOKです。

次にToggleに対して作成したToggle Groupを指定します。

「Toggle Group」→ Toggleの「Group」プロパティにドラッグ&ドロップ

スクリプト実行

次のスクリプトを各Toggleにアタッチします。

using UnityEngine;
using UnityEngine.UI;

public class ToggleSample : MonoBehaviour
{
    private Toggle toggle;

    void Start()
    {
        toggle = GetComponent<Toggle>();
        toggle.onValueChanged.AddListener(Change);
    }

    /// <summary>
    /// OnValueChangedに追加するメソッド
    /// </summary>
    /// <param name="isOn">Toggleの状態</param>
    public void Change(bool isOn)
    {
        if (isOn)
        {
            //ON
            Debug.Log($"ON: {toggle.name}");
        }
        else
        {
            //OFF
            Debug.Log($"OFF: {toggle.name}");
        }
    }
}

ヒエラルキーはこんな感じで4つToggleを準備しておきます。
初期状態はToggleAがONになっています。