Unity：UI Elements でツールバーを実装する


# はじめに

*こんにちは、のんびりエンジニアのたっつーです。*
*[ブログ](https://www.fast-system.jp/)を運営しているのでよろしければ見てください。*

今回は「[いくつかサンプル書いたよ](https://www.fast-system.jp/unity-ui-elements-samples/)」の記事の１つの共通コントロールの作成方法と使い方を解説したいと思います。
ぜひ、お付き合いいただければと思います(#^^#)

# UI Elementsとは？

[こちらの記事](https://www.fast-system.jp/unity-uielements-howto/)をご参照いただければと思います。

# ツールバーの実装

さっそくですが、ツールバーの実装をしてみたいと思います。

***Editor フォルダを作成***し、右クリックのメニューから***「UIElements Editor Window」を選択***してください。
![image-38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227880/8cdcc7f3-d3ab-66a4-d685-76b64933dae0.png)

「Sample2」を入力してください。
![image-42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227880/2b11c5a8-5cf5-b87f-d5e5-d5095158b90e.png)

以下の３ファイルが生成されました、次にこの３ファイルを編集したいとおもいます。
![image-43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227880/3db1ae3b-acc1-9927-615c-04b7c3eb4ba2.png)

***Sample2.uss は使わないので削除***してください！

次に、Sample2.uxml を以下のように変更してください。

```xml:Sample2.uxml
<?xml version="1.0" encoding="utf-8"?>
<engine:UXML
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:engine="UnityEngine.UIElements"
    xmlns:editor="UnityEditor.UIElements"
    xsi:noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd"
    xsi:schemaLocation="UnityEngine.UIElements ../../UIElementsSchema/UnityEngine.UIElements.xsd">
  
  <engine:Label text="Sample2 UXML" />
</engine:UXML>
```

次に、Sample2.cs を以下のように変更してください。

```c#:Sample.cs
using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
using UnityEditor.UIElements;


public class Sample2 : EditorWindow
{
    [MenuItem("UIElementsSamples/Sample2")]
    public static void ShowExample()
    {
        Sample2 wnd = GetWindow<Sample2>();
        wnd.titleContent = new GUIContent("Sample2");
    }

    public void OnEnable()
    {
        VisualElement root = rootVisualElement;

        // Create Toolbar
        {
            var toolbar = new Toolbar();
            root.Add(toolbar);

            var btn1 = new ToolbarButton { text = "Button" };
            toolbar.Add(btn1);

            var spc = new ToolbarSpacer();
            toolbar.Add(spc);

            var tgl = new ToolbarToggle { text = "Toggle" };
            toolbar.Add(tgl);

            var spc2 = new ToolbarSpacer() { name = "flexSpacer1", flex = true };
            toolbar.Add(spc2);

            var menu = new ToolbarMenu { text = "Menu" };
            menu.menu.AppendAction("Default is never shown", a => { }, a => DropdownMenuAction.Status.None);
            menu.menu.AppendAction("Normal menu", a => { }, a => DropdownMenuAction.Status.Normal);
            menu.menu.AppendAction("Hidden is never shown", a => { }, a => DropdownMenuAction.Status.Hidden);
            menu.menu.AppendAction("Checked menu", a => { }, a => DropdownMenuAction.Status.Checked);
            menu.menu.AppendAction("Disabled menu", a => { }, a => DropdownMenuAction.Status.Disabled);
            menu.menu.AppendAction("Disabled and checked menu", a => { }, a => DropdownMenuAction.Status.Disabled | DropdownMenuAction.Status.Checked);
            toolbar.Add(menu);

            var spc3 = new ToolbarSpacer() { name = "flexSpacer2", flex = true };
            toolbar.Add(spc3);

            var popup = new ToolbarMenu { text = "Popup", variant = ToolbarMenu.Variant.Popup };
            popup.menu.AppendAction("Popup", a => { }, a => DropdownMenuAction.Status.Normal);
            toolbar.Add(popup);
        }

        // Import UXML
        {
            var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/Sample2.uxml");
            // var styleSheet = AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/Editor/Sample2.uss");
            VisualElement labelFromUXML = visualTree.CloneTree();
            // labelFromUXML.styleSheets.Add(styleSheet);
            root.Add(labelFromUXML);
        }
    }
}
```

## 動作結果

どうでしたか簡単に実装が行えたと思います。
![sample2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227880/192000ef-4e38-6cfe-354a-c72e59a8ee5b.gif)

# 終わりに

*よければ ブログ「[Unity+AssetStoreおすすめ情報](https://www.fast-system.jp/)」の方にも色々記載しているのでぜひご参照いただければと思います。*