Position element with the layout engine

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 を設定します。

• Use the flexGrow property (USS: flex-grow: <value>;) to assign a flexible size to an element. The value of the flexGrow property assigns a base weight to the size of an element when it’s determined by its siblings.

• Set the flexDirection property to row (USS: flex-direction: row;) to switch to a horizontal layout.

• 元のレイアウト位置に基づいて要素をオフセットするには、相対位置を使用します。

• 要素を親位置の矩形に対して相対的に配置するには、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>