【Unity】【UI Toolkit】GroupBoxを使って自由なデザインのラジオボタン作る

UnityのUI ToolkitでGroupBoxを使って自由なデザインのラジオボタン作る方法についてまとめました。

はじめに
実装する
実行結果
関連
参考

Unity 2022.2.17

はじめに

いくつかの選択肢から一つを選ぶUIを作る際には、下図のようにラジオボタンがよく使われます。

RadioButtonGroupを使うと、このようなラジオボタンによる選択肢を簡単に作ることができます。
次の記事はRadioButtonGroupによる実装方法を紹介した記事です。

light11.hatenadiary.com

RadioButtonGroupを使った実装は非常に手軽ですが、一方でラジオボタンのレイアウトが単純なテキストだけになり、自由に変更できないという欠点もあります。

これに対してGroupBoxを使うと、自由なレイアウトでラジオボタンを作ることができます。
本記事ではこの方法についてまとめます。

実装する

早速GroupBoxを使ってラジオボタンを実装してみます。

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

public sealed class Example : EditorWindow
{
    private void CreateGUI()
    {
        // GroupBoxを作る
        var groupBox = new GroupBox("Group Box");
        
        // RadioButtonを持つVisualElementを作って、GroupBoxの子要素にする
        var first = CreateRadioButtonContainer("First", _ => Debug.Log("First"));
        var second = CreateRadioButtonContainer("Second", _ => Debug.Log("Second"));
        var third = CreateRadioButtonContainer("Third", _ => Debug.Log("Third"));
        groupBox.Add(first);
        groupBox.Add(second);
        groupBox.Add(third);

        // 作ったGroupBoxをWindowのrootVisualElementに追加する
        rootVisualElement.Add(groupBox);
    }

    private VisualElement CreateRadioButtonContainer(string text, EventCallback<ChangeEvent<bool>> callback)
    {
        var root = new VisualElement
        {
            style =
            {
                flexDirection = FlexDirection.Row
            }
        };
        
        // RadioButtonとTextFieldを作って、VisualElementの子要素にする
        var radioButton = new RadioButton();
        radioButton.RegisterValueChangedCallback(callback);
        var textField = new TextField
        {
            value = text,
            style =
            {
                flexGrow = 1
            }
        };
        root.Add(radioButton);
        root.Add(textField);
        
        return root;
    }

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