【Unity】UI ToolkitのTwoPaneSplitViewをコードから動的に生成せずに利用する方法

はじめに

UI ToolkitのTwoPaneSplitViewというVisualElementがあるのですが、それがめちゃくちゃ便利です。2つの要素をリサイズできるようにしつつ分割して表示してくれるものになります。
docs.unity3d.com

TwoPaneSplitView

よくコードからTwoPaneSplitViewを生成する方法が紹介されていますが、実用するうえではUXMLに直書きしたい場合の方が多いのではないのかなと思います。しかしUnityのデフォルトではLibrary/Standardにはありません。(Unity2022.3.22f1時点で確認)

Library/StandardにTwoPaneSplitViewはない

今回はコードから生成せずにTwoPaneSplitViewを利用する方法を紹介したいと思います。

概要

改めて紹介するとTwoPaneSplitViewとは水平または垂直に2つのペインに子要素を配置するコンテナです。

TwoPaneSplitView

The TwoPaneSplitView element is a container that arranges its children in two panes, either horizontally or vertically. The user can resize the panes by dragging the divider between them. A TwoPaneSplitView must have exactly two children.

// DeepL翻訳
TwoPaneSplitView要素は、水平または垂直に2つのペインに子要素を配置するコンテナです。 ユーザーは、ペイン間の仕切りをドラッグすることによって、ペインのサイズを変更することができます。 TwoPaneSplitViewは、正確に2つの子を持つ必要があります。

https://docs.unity.cn/Manual/UIE-uxml-element-TwoPaneSplitView.html

コードからの生成方法

これはよく紹介されているので書かなくてもいいかもしれませんが、例えば以下のようなコードで生成できます。

public void CreateGUI()
{
    // 最初の子要素を固定ペインとする場合は 0、2 番目の子要素を固定ペインとする場合は 1。
    var fixedPaneIndex = 0;

    // 固定ペインの初期の幅または初期の高さ。
    var fixedPaneInitialWidth = 200f;

    // 分割ビューの方向。(Horizontal or Vertical)
    var orientation = TwoPaneSplitViewOrientation.Horizontal;

    var splitView = new TwoPaneSplitView(fixedPaneIndex, fixedPaneInitialWidth, orientation);
    rootVisualElement.Add(splitView);

    // 左ペイン
    var leftPane = new VisualElement();
    splitView.Add(leftPane);

    // 右ペイン
    var rightPane = new VisualElement();
    splitView.Add(rightPane);
}

uxmlに書き込む方法

TwoPaneSplitViewを配置したい場所に以下の要素を入れ込んでください。

<ui:TwoPaneSplitView class="unity-two-pane-split-view">
    <ui:VisualElement />
    <ui:VisualElement />
</ui:TwoPaneSplitView>

一度これを入れ込むことにより、あとはUI Builder上からでもイジれるようになります。

UI Builder上でTwoPaneSplitViewをいじっている様子