UIElementsで要素を水平に配置する方法

UIElementsのUSSで要素を水平に配置する方法。

水平配置したい要素を囲う要素を作って horizontal クラスをつけてあげる。

elements.uxml

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <ui:VisualElement name="Layout">
        <Style src="style.uss" />
        <ui:Label text="垂直" />
        <ui:Label text="垂直ボタン1" />
        <ui:VisualElement name="HorizontalLayout" class="horizontal">
            <ui:Label text="水平1" />
            <ui:Label text="水平2" />
            <ui:Button text= "水平ボタン"/>
        </ui:VisualElement>
        <ui:Label text="ここからまた垂直" />
        <ui:Button text= "垂直ボタン2"/>
    </ui:VisualElement>
</ui:UXML>

style.uss

.horizontal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

ExampleEditorWindow.cs

using UnityEditor;
using UnityEngine.UIElements;

public class ExampleEditorWindow: EditorWindow {
	[MenuItem("Window/Example")]
	public static void Open() => GetWindow<ExampleEditorWindow>("Example");

	private void OnEnable() {
		var root = rootVisualElement;
		root.styleSheets.Add(AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/Editor/style.uss"));

		var tree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/elements.uxml");
		root.Add(tree.CloneTree());
	}
}