【Unity】【UI Toolkit】Toolbar系のUI要素を使ってツールバーを構成する

UnityのUI ToolkitでToolbar系のUI要素を使ってツールバーを構成する方法についてまとめました。

はじめに
実装
結果
参考

Unity 2022.2.17

はじめに

UI Toolkitでは、下図のようなEditorWindowにおける「ツールバー」を構成するUIが一通り用意されています。

本記事ではこれらを使ってツールバーを構築する方法についてまとめます。

実装

以下は一通りの要素を使ってツールバーを構成したEditorWindowのスクリプトです。

using UnityEditor;
using UnityEditor.UIElements;
using UnityEngine;
using UnityEngine.UIElements;

public sealed class Example : EditorWindow
{
    private void CreateGUI()
    {
        var toolbar1 = new Toolbar();
        rootVisualElement.Add(toolbar1);

        // Menu
        var menu = new ToolbarMenu();
        menu.text = "Menu";
        menu.menu.AppendAction("First", action => Debug.Log("First"));
        menu.menu.AppendAction("Second", action => Debug.Log("Second"));
        toolbar1.Add(menu);

        // Button
        var button = new ToolbarButton();
        button.text = "Button";
        button.clicked += () => Debug.Log("Button");
        toolbar1.Add(button);

        // Toggle
        var toggle = new ToolbarToggle();
        toggle.text = "Toggle";
        toggle.RegisterValueChangedCallback(evt => Debug.Log($"Toggle: {evt.newValue}"));
        toolbar1.Add(toggle);

        // SearchField
        var searchField = new ToolbarSearchField();
        searchField.RegisterValueChangedCallback(evt => Debug.Log($"SearchField: {evt.newValue}"));
        toolbar1.Add(searchField);

        var toolbar2 = new Toolbar();
        rootVisualElement.Add(toolbar2);

        // Breadcrumb
        var breadcrumb = new ToolbarBreadcrumbs();
        breadcrumb.PushItem("First", () => Debug.Log("First"));
        breadcrumb.PushItem("Second", () => Debug.Log("Second"));
        breadcrumb.PushItem("Third", () => Debug.Log("Third"));
        toolbar2.Add(breadcrumb);

        // Spacer
        toolbar2.Add(new ToolbarSpacer());

        // PopupSearchField
        var popupSearchField = new ToolbarPopupSearchField();
        popupSearchField.RegisterValueChangedCallback(evt => Debug.Log($"PopupSearchField: {evt.newValue}"));
        popupSearchField.menu.AppendAction("First", action => Debug.Log("First"));
        popupSearchField.menu.AppendAction("Second", action => Debug.Log("Second"));
        popupSearchField.menu.AppendAction("Third", action => Debug.Log("Third"));
        toolbar2.Add(popupSearchField);
    }

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

結果

Window > Exampleから上記のウィンドウを表示すると下図の結果が得られます。

参考

docs.unity3d.com