레이아웃 엔진

UI Toolkit includes a layout engine that positions visual elements based on layout and styling properties. The layout engine uses the layout principles of Yoga, which implements a subset of Flexbox, a HTML/CSS layout system.

리소스

To get started with Yoga and Flexbox, use the following external resources:

• Yoga official documentation: UI Toolkit properties match Yoga layout behavior.
• CSS-Tricks guide to Flexbox: UI Toolkit supports most properties in Flexbox.

Behavior

기본적으로 모든 시각적 요소는 레이아웃의 일부입니다. 레이아웃은 다음의 기본 동작을 포함합니다.

• 컨테이너가 자식을 수직으로 배포합니다.
• The position of a container rectangle includes its children rectangles. This behavior can be limited by other layout properties.
• A visual element with text uses the text size in its size calculations. This behavior can be limited by other layout properties.

UI Toolkit includes built-in controls for standard UI components, such as a button, toggle, or text field. These built-in controls have styles that affect their layout.

Best practices

The following list provides tips to help improve the performance of the layout engine:

• 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.

• 상대 위치 지정을 사용하여 원본 레이아웃 포지션을 기준으로 요소를 오프셋하십시오.

• Set the position property to absolute to place an element relative to its parent position rectangle. This doesn’t affect the layout of its siblings or parent.

예제

The following example creates a UI element that is 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. Set the flexGrow property to 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

This is the resulting XML code:

<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>