UI Toolkit には、レイアウトやスタイリングのプロパティに基づいてビジュアル要素を配置するレイアウトエンジンが搭載されています。レイアウトエンジンは、HTML/CSS のレイアウトシステムである Flexbox のサブセットを実装した Yoga のレイアウト法則を使用しています。
Yoga と Flexbox の手引きとして、以下の外部リソースを参照してください。
デフォルトでは、すべてのビジュアル要素はレイアウトの一部です。レイアウトには以下のデフォルトの動作があります。
UI Toolkit には、ボタン、トグル、テキストフィールド、などの標準 UI コントロール用の ビルトインコントロール が含まれます。これらのビルトインコントロールには、レイアウトに影響するスタイルがあります。
以下のリストは、レイアウトエンジンのパフォーマンスを向上させるためのコツです。
要素のサイズを定義するには、width
と height
を設定します。
要素に調整できるサイズを割り当てるには、flexGrow
プロパティ (USS: flex-grow: <value>;
) を使用します。flexGrow
プロパティの値は、その兄弟によって決定されるときに、基本ウェイトを要素のサイズに割り当てます。
水平レイアウトに切り替えるには、flexDirection
プロパティを row
(USS: flex-direction: row;
) に設定します。
元のレイアウト位置に基づいて要素をオフセットするには、相対位置を使用します。
要素を親位置の矩形に対して相対的に配置するには、position
プロパティを absolute
に設定します。この場合、兄弟や親のレイアウトには影響しません。
The following example creates a UI element that’s anchored to the lower left corner of the screen. This is achieved by creating a parent element that fills the entire screen, and then positioning a child element in its lower left corner.
flexGrow
プロパティを 1 に設定します。position
プロパティを absolute
に設定します。left
と bottom
の位置オフセットを 0 にします。これがその XML コードです。
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
<ui:VisualElement style="flex-grow: 1;">
<ui:VisualElement style="position: absolute; left: 0; bottom: 0;" />
</ui:VisualElement>
</ui:UXML>