RadioButtonGroupの見た目を変更する方法（UI Toolkit）

RadioButton（ラジオボタン）の見た目を変更する方法を、初歩から。

UI Toolkitの使い方の説明も兼ねてます。

Unityのバージョンは2022.3.8f1です。

Window > UI Toolkit > UI Builder

UI Builderの画面が開くので、左下の Scroll View を Hierarchy にドラッグ&ドロップ

Ctrl+Sで保存。名前は何でもいいです。

Hierarchyの中の ScrollView を選択すると、真ん中に領域と、右にInspectorが表示されます

下のほうにSizeがあるので、Heightを90に

リスト全体の高さは画面に応じて変わったほうが良いので、pxから%に変更

左下のLibraryから、Radio Button GroupをScrollViewへドラッグ&ドロップ。

以下のような構成になっていればOKです。

Radio Button Groupの見た目を変更するために、クラスをつけます。

StyleSheetのStyle Class Listに select-item と入力し、Add Style Class to List

黄色の文字で.select-itemが追加されます。（最初の.は自動で追加されます）

左上の + の右に、 .select-item > .unity-label と入力し、Enter

StyleSheetを追加するか聞かれるので、一番左の Add to New USS

適当な名前で保存

すると、（保存した名前）.ussのファイルが左上にできます

.ussファイルの左の三角形をクリックすると、.select-item > .unity-label が表示されるので選択

右のInspectorに見た目の設定が表示されるので、Displayをnoneに設定

ここからRadioButtonGroup内のRadioButtonのプレビューが表示されないため少し厄介なのですが、まずRadioButtonの高さを設定します。

左上の + の右のテキストボックスに

.select-item .unity-radio-button

と入力、Enter

できた.select-item .unity-radio-buttonを選択

SizeのHeightを100に設定

さらに、RadioButtonの〇ボタン部分を隠すため、左上の + の右のテキストボックスに

.select-item .unity-radio-button__checkmark-background

と入力、Enter

できた.select-item .unity-radio-button__checkmark-backgroundを選択

右のInspectorの Display から、Displayをnoneに設定

次に、見た目をどう変えてもいいのですが、ここでは選択したときに赤枠が追加されるようにしたかったので、左上の + の右側に

.select-item .unity-radio-button:checked

と入力、Enter（疑似クラスと呼ばれる、一時的につくクラスです）

できた .select-item .unity-radio-button:checked を選択

これがRadioButtonが選択されたときの状態になります。

右側のInspectorの下の Border を開いて、

Colorをここでは赤にします。〇を赤に動かして、

下の A のバーを一番右まで動かして 255 にしてください。

（デフォルトだと0、透明なので見えません）

ここでは Width を 3 に設定。

Ctrl + S で保存。（左上の * が消えればOK）

UI Builderから Unityエディタ本体に戻って、

+ > UI Toolkit > UI Document

Source Assetから、さっき作ったファイルを選択

+ > C# Script から、ファイル名を ItemSetting にして作成

同様に ItemManager を作成

ItemSettingは以下の通り。

デフォルトで継承されるMonoBehaviourを消す必要があります。

        Copy
        using System.Collections;
using System.Collections.Generic;
using UnityEngine;
// SerializableがないとInspectorに表示されない
// MonoBehaviourを継承するとリストにいれたとき、Inspectorに表示されない
[System.Serializable]
public class ItemSetting
    // .select-itemとすると対応しないので注意
    public const string GroupClassName = "select-item";
    [field: SerializeField]
    public string Name { get; set; }
    [field: SerializeField]
    public Texture2D Icon { get; set; }
    // [field: SerializeField]
    public GameObject Item { get; set; }

      

view raw Assets/Scripts/Radio/ItemSetting.cs delivered with ❤ by emgithub

ItemManagerは以下の通り。

        Copy
        using System.Collections;
using System.Collections.Generic;
using System.Linq;
using UnityEngine;
using UnityEngine.UIElements;
public class ItemManager : MonoBehaviour
    [SerializeField]
    private UIDocument itemSelector;
    [SerializeField]
    private List<ItemSetting> itemSettings = new();
    private ScrollView view;
    void Awake()
        view = itemSelector.rootVisualElement.Q<ScrollView>();
        // ラジオボタンを初期化
        var radioButtonGroup = itemSelector.rootVisualElement.Q<RadioButtonGroup>();
        radioButtonGroup.choices = itemSettings.ConvertAll(item => item.Name);
        radioButtonGroup.value = 0;
        // 選択時のイベント
        radioButtonGroup.RegisterCallback<ChangeEvent<int>>((e) =>
            radioButtonGroup.value = e.newValue;
            // 選択されたら非表示に
            // view.style.display = DisplayStyle.None;
        });
        // ラジオボタンの設定
        var radioButtons = radioButtonGroup.Children();
        for (int i = 0; i < itemSettings.Count; ++i) {
            var radioButton = radioButtons.ElementAt(i) as RadioButton;
            radioButton.style.backgroundImage = itemSettings[i].Icon;

      

view raw Assets/Scripts/Radio/ItemManager.cs delivered with ❤ by emgithub

ItemManagerをUIDocumentにドラッグ&ドロップ

UIDocumentを Item Managerの item Selectorにドラッグ&ドロップ

Item Managerの item Settings を適当に設定。

画像は適当に用意し、Texture Type を Sprite（2D and UI）にすれば良いです。

下のほうの Apply を押すのを忘れずに。

画像が以下のように三角形がつけばUIに設定できます。

それぞれ Icon の画像に設定

最後に Play を押せばRadio Buttonの挙動を確認できます。

選択すると赤枠がつきます

あとは色や大きさなど、UI Builderで自由にいじれると思います。

ここで作った.select-itemなど必要なクラスを作って、

それに対して見た目を設定する感じです。

CSSの知識があれば割と理解しやすいので、この際ついでに勉強しましょう。

プレビューできるところもあるので、変更した内容がすぐわかって理解しやすいです。

・・・というかこんなHTML&CSSもどきにするなら、そのままHTML＆CSSが使えるようにして欲しかったんですが・・・

元プログラマiのUnity開発日誌

このブログを検索

RadioButtonGroupの見た目を変更する方法（UI Toolkit）

コメント

コメントを投稿

	using System.Collections;
	using System.Collections.Generic;
	using UnityEngine;

	// SerializableがないとInspectorに表示されない
	// MonoBehaviourを継承するとリストにいれたとき、Inspectorに表示されない
	[System.Serializable]
	public class ItemSetting
	{
	// .select-itemとすると対応しないので注意
	public const string GroupClassName = "select-item";

	[field: SerializeField]
	public string Name { get; set; }

	[field: SerializeField]
	public Texture2D Icon { get; set; }

	// [field: SerializeField]
	public GameObject Item { get; set; }
	}

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

	public class ItemManager : MonoBehaviour
	{
	[SerializeField]
	private UIDocument itemSelector;

	[SerializeField]
	private List<ItemSetting> itemSettings = new();

	private ScrollView view;

	void Awake()
	{
	view = itemSelector.rootVisualElement.Q<ScrollView>();

	// ラジオボタンを初期化
	var radioButtonGroup = itemSelector.rootVisualElement.Q<RadioButtonGroup>();
	radioButtonGroup.choices = itemSettings.ConvertAll(item => item.Name);
	radioButtonGroup.value = 0;

	// 選択時のイベント
	radioButtonGroup.RegisterCallback<ChangeEvent<int>>((e) =>
	{
	radioButtonGroup.value = e.newValue;

	// 選択されたら非表示に
	// view.style.display = DisplayStyle.None;
	});

	// ラジオボタンの設定
	var radioButtons = radioButtonGroup.Children();
	for (int i = 0; i < itemSettings.Count; ++i) {
	var radioButton = radioButtons.ElementAt(i) as RadioButton;
	radioButton.style.backgroundImage = itemSettings[i].Icon;
	}
	}
	}