【Unity】【UI Toolkit】RadioButtonGroupを使ってラジオボタンによる選択肢を簡単に作る

UnityのUI Toolkitで、RadioButtonGroupを使ってラジオボタンによる選択肢を簡単に作る方法についてまとめました。

Unity 2022.2.17

RadioButtonGroupとは？

RadioButtonGroupを使うと、下図のようなラジオボタンによる選択肢を実装することができます。
いずれか一つだけを選択するUIを作成するのに便利です。

RadioButtonGroup

本記事ではこのRadioButtonGroupを使って上図のEditorWindowを実装する方法についてまとめます。

UXMLファイルを作成する

まずUI BuilderをつかってUXMLファイルを作成します。
RadioButtonGroupを配置し、Choicesにカンマ区切りで選択肢を入力します。

UXML

Valueにインデックスを入力すれば初期値を入力することもできます。

生成されたUXMLは以下の通りです。

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd" editor-extension-mode="True">
    <ui:RadioButtonGroup label="Radio Button Group" value="0" choices="First,Second,Third" />
</ui:UXML>

EditorWindowを作成する

次にこれをEditorWindowに表示して制御します。

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

public sealed class Example : EditorWindow
{
    [SerializeField] private VisualTreeAsset layout;

    private void CreateGUI()
    {
        layout.CloneTree(rootVisualElement);

        var radioButtonGroup = rootVisualElement.Q<RadioButtonGroup>();
        // RegisterValueChangedCallbackで値の変化を監視できる
        radioButtonGroup.RegisterValueChangedCallback(evt =>
        {
            Debug.Log(evt.newValue);
        });
    }

    [MenuItem("Window/Example")]
    private static void Open()
    {
        GetWindow<Example>();
    }
}

これに関しては特に特別なことはやっていません。
値の変更はコメントに書いた通りの方法で監視できます。

実行結果

EditorWindowのスクリプトができたら、Inspectorからlayoutプロパティに先ほど作ったUXMLファイルをアサインします。

アサイン後、Window > Exampleからウィンドウを開くと、下図の結果が得られます。

結果

正常にラジオボタンを構築できていることを確認できました。

スクリプトで構築する

RadioButtonGroupのレイアウトをUXMLを用いずにスクリプトで構築するには以下のようにします。

using System.Collections.Generic;
using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

public sealed class Example : EditorWindow
{
    private void CreateGUI()
    {
        var radioButtonGroup = new RadioButtonGroup(
            "Radio Button Group",
            new List<string> { "First", "Second", "Third" }
        );
        radioButtonGroup.RegisterValueChangedCallback(evt =>
        {
            Debug.Log(evt.newValue);
        });
        
        rootVisualElement.Add(radioButtonGroup);
    }

    [MenuItem("Window/Example")]
    private static void Open()
    {
        GetWindow<Example>();
    }
}

参考

docs.unity3d.com