レイアウトエンジンによる要素の配置

UI Toolkit には、レイアウトやスタイリングのプロパティに基づいてビジュアル要素を配置するレイアウトエンジンが搭載されています。レイアウトエンジンは、HTML/CSS のレイアウトシステムである Flexbox のサブセットを実装した Yoga のレイアウト法則を使用しています。

関連資料

Yoga と Flexbox の手引きとして、以下の外部リソースを参照してください。

• Yoga 公式ドキュメント: UI Toolkit のプロパティは Yoga のレイアウトの動作と一致します。
• CSS-Trickks guide to Flexbox: UI Toolkit は 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.

1. Create a new VisualElement.
2. flexGrow プロパティを 1 に設定します。
3. Create a new VisualElement and make it a child of the first one.
4. Set the position property on the element to absolute.
5. Set the position offset for left and bottom to 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>