【Unity】タブUIを実装してみる【UIToolkit】

最近 UIToolKit を勉強しています。
PlayMode 中での実装例もちょこちょこ聞くようになってきて、そろそろ IMGUI から卒業するための準備をしないとまずいかもと思っているからです。
これとか→UI Toolkitを使用したランタイムツールの開発事例紹介 - YouTube

(まだ2,3年は大丈夫だと思いますが...)

というわけで、タブを実装できる TabView の仕組みを見様見真似で作ってみました。
実装例はこんな感じです。

GitHub にサンプルと一緒にあげてあります。
僕も UIToolkit を初めて間もないので、同じく入門する方の参考になれば幸いです。
github.com

概要

TabView はタブを簡単に追加できます。
また、そのタブで何を表示するかは、自分で作った uxml を使えるようになっています。
上の動画サンプルは以下のコードで実装できます。

public class TabWindow : EditorWindow
{
    [MenuItem("Samples/TabWindow")]
    public static void Open()
    {
        GetWindow<TabWindow>("タブサンプル");
    }

    private void CreateGUI()
    {
        var tab = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("[TabViewを持っているuxmlのパス]");
        tab.CloneTree(rootVisualElement);
        var tabView = rootVisualElement.Q<TabView>();

        var tab1Content = new TabContentBase(AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("[Tab1で表示したいUIのuxmlのパス]"));
        var tab2Content = new TabContentBase(AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("[Tab2で表示したいUIのuxml]のパス"));
        tabView.AddTab("Tab1", tab1Content);
        tabView.AddTab("Tab2", tab2Content);

        // Tab1を選択
        tabView.SelectTab(0);
    }
}

また、以下の uxml が必要です。

TabView を含んで、かつ TabItem.uss を適用した uxml
各タブで表示する中身の uxml

1 の作り方ですが、TabView は UxmlFactory を実装しているので、UIBuilder から追加することができます。
UIBuilder の Library に表示されるので、D&D で追加してください。

タブのコンテンツ表示は ITabContent を実装できるので、タブの表示時、非表示時の処理を独自で実装できます。

...とはいえまだまだ分からないことだらけなので、もっとうまい方法があるかもです。
だれかコメント求む～～～といった感じです...

所感

IMGUI よりも少しだけリッチな見た目のエディタ用UIを実装できるのが楽しいです
何よりもレイアウトを UIBuilder で見ながら作れるので、めちゃくちゃ楽ですし、何より楽しいです。(HTML,CSSの知識が乏しいので苦戦はしています...)
まだまだ IMGUI、uGUI に比べて機能は少ないので、基礎から学ぶには今くらいが絶好なんじゃないかなと思います。

7080 + 1

ゲームプログラミングの記事を書いてます。

【Unity】タブUIを実装してみる【UIToolkit】

概要

所感