레이아웃 엔진으로 요소 위치 지정

UI 툴킷에는 레이아웃과 스타일링 프로퍼티에 따라 요소의 위치를 지정하는 레이아웃 엔진이 포함되어 있습니다.레이아웃 엔진은 HTML/CSS 레이아웃 시스템인 Flexbox의 하위 세트를 구현하는 Yoga의 레이아웃 원칙을 사용합니다.UI 툴킷 프로퍼티는 Yoga 레이아웃 동작과 일치합니다.UI 툴킷은 Flexbox의 프로퍼티 대부분을 지원합니다.

기본적으로 모든 요소는 레이아웃의 일부입니다.레이아웃에는 다음 기본 동작이 있습니다.

• 컨테이너가 자식을 수직으로 배포합니다.
• 컨테이너 직사각형의 포지션이 자식 직사각형을 포함합니다. 이 동작은 다른 레이아웃 프로퍼티에 의해 제한될 수 있습니다.
• 텍스트가 포함된 VisualElement는 크기 계산에 텍스트 크기를 사용합니다.이 동작은 다른 레이아웃 프로퍼티에 의해 제한될 수 있습니다.

UI 툴킷은 스탠다드 UI 컴포넌트(예: 버튼, 토글, 텍스트 필드)를 위한 빌트인 컨트롤을 포함합니다.이 빌트인 컨트롤에는 레이아웃에 영향을 주는 스타일이 있습니다.

메인 스타일 프로퍼티

다음은 메인 스타일 프로퍼티입니다.

• Flex > Direction(USS의 flex-direction):main-axis에 있는 레이아웃 방향을 정의합니다.기본값은 column이며 main-axis가 위에서 아래로 실행되도록 합니다.
• Flex > Grow(USS의 flex-grow):요소가 main-axis에서 커지는 방식을 정의합니다.같은 부모의 기타 모든 형제와 공유되는 비율입니다.이 프로퍼티는 요소를 스트레치하여 부모(에서 모든 형제를 뺀) 크기 전체를 차지하게 할 때 유용합니다.이렇게 하려면 Flex > Grow 값을 1로 설정합니다.flex-grow가 1로 설정된 형제가 두 개 있는 경우 각각 main-axis를 따라 부모의 가용 크기 중 50%를 차지합니다.
• Align > Align Items(USS의 align-items):cross-axis 또는 main-axis의 수직 축에 있는 요소의 얼라인먼트를 정의합니다.예를 들어, flex-direction: column과 align-items: flex-end가 설정된 VisualElement에 버튼이 두 개 있는 경우, 두 버튼은 컨테이너의 오른쪽 가장자리에 부딪힙니다.align-items의 옵션은 flex-direction 값에 종속되므로 flex-start, flex-end와 같은 이름을 갖습니다.
• Align > Justify Content(USS의 justify-content):main-axis에 있는 요소의 얼라인먼트를 정의합니다.예를 들어, flex-direction: column과 justify-content: flex-end가 설정된 VisualElement에 버튼이 두 개 있는 경우, 두 버튼은 컨테이너의 하단 가장자리에 부딪힙니다.justify-content의 옵션은 flex-direction 값에 종속되므로 flex-start, flex-end와 같은 이름을 갖습니다.

자세한 내용은 플렉스 레이아웃을 참조하십시오.

선택한 요소에 자식 요소가 있으면 UI 빌더에서 헤더의 토글을 사용하여 Viewport에서 플렉스와 관련된 스타일 프로퍼티를 토글할 수 있습니다. 아래 이미지는 #menu 요소의 가용 옵션을 나타냅니다.

스타일 프로퍼티를 사용하여 복잡한 동적 레이아웃을 생성할 수 있습니다.다음은 화면 오른쪽 하단에 Button을 고정하는 레이아웃의 예시입니다.

아래는 각 컨테이너 VisualElement에 설정된 인라인 스타일을 나타내는 이 레이아웃의 UXML입니다.

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <ui:VisualElement name="screen-is-blue" style="flex-grow: 1; justify-content: flex-end; background-color: blue;">
        <ui:VisualElement name="toolbar-is-orange" style="align-items: flex-end; background-color: orange;">
            <ui:Button text="Button" display-tooltip-when-elided="true" />
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>

컨테이너는 모양을 드러내기 위해 색칠되어 있습니다. 중첩된 VisualElement 컨테이너를 사용하면 각 요소의 포지션과 크기를 명시적으로 설정하지 않고도 모든 동적 레이아웃을 구현할 수 있습니다. 그러면 레이아웃이 동적으로 유지되며, 크기가 변화하는 더 큰 컨테이너(예: 크기가 변화하는 화면)에 맞춰 자동 조정됩니다.

Absolute 포지션

UI 빌더는 Position 스타일 프로퍼티도 지원합니다.Position > Absolute 모드는 기본 Flexbox 기반 레이아웃 엔진에서 요소가 보이지 않도록 합니다.마치 더 이상 공간을 차지하지 않는 것처럼 보입니다.Absolute 포지션의 요소는 Relative 포지션인 형제 위에 표시됩니다.

Absolute 포지션을 사용하는 동안 Position > Left, Top, Right, Bottom 스타일 프로퍼티를 사용하여 부모의 각 가장자리로부터 요소를 오프셋하고 크기를 조절할 수 있습니다.이로 인해 화면에서 절대 좌표가 설정되지는 않지만, 부모 요소에 비해 오프셋이 설정됩니다.계속 Relative 모드를 사용하여 부모 요소의 위치를 지정할 수 있습니다.Left 오프셋과 Right 오프셋을 모두 설정하면 요소의 Width 스타일 프로퍼티가 무시되며, 다음 수식에 따라 계산된 너비가 적용됩니다.

element-computed-width = parent-width - left-offset - right-offset

Left, Top, Right, Bottom은 앵커로도 해석할 수 있습니다.예를 들어, 다음과 같이 화면 왼쪽 하단에 Button을 고정할 수 있습니다.

아래 UXML은 인라인 스타일을 나타냅니다.

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

위치 지정 시 Left를 0으로 설정하는 것과 Left를 설정하지 않는 것은 다릅니다.

• Left를 0으로 설정했다는 것은 오프셋을 0으로 설정한다는 의미입니다.
• Left unset은 오프셋을 설정하지 않으며, 다른 스타일 프로퍼티가 요소의 너비나 높이를 정의하도록 둡니다.

요소의 파란색 선택 테두리의 각 가장자리와 코너에 있는 추가적인 크기 조절 핸들을 통해 Canvas에서 직접 이러한 오프셋 스타일 프로퍼티를 수정할 수도 있습니다. 설정된 항목과 설정되지 않은 항목을 구분하는 것이 매우 중요하므로, Canvas는 요소의 각 면에 주황색 정사각형으로 “앵커” 토글을 포함합니다. Canvas 핸들은 요소의 크기를 시각적으로 조절할 때 설정되는 스타일 프로퍼티를 설정된 “앵커”에 따라 조정합니다. 예를 들어, Canvas에서 요소의 크기를 오른쪽 테두리 핸들을 통해 조절하는 경우:

• Left 및 Right 프로퍼티를 모두 설정하면 핸들이 Right 프로퍼티를 업데이트합니다.
• Left 프로퍼티를 설정하고 Right 프로퍼티는 설정하지 않으면 핸들이 Width 프로퍼티를 업데이트합니다.

Relative 포지션과 Absolute 포지션 모두 사용하기

Absolute 포지션 모드는 UI 툴킷의 빌트인 레이아웃 엔진을 우회하므로 가급적 사용하지 마십시오.또한 전체 레이아웃을 변경하는 경우 개별 요소를 수동으로 업데이트해야 하는 까다로운 UI가 초래될 수 있습니다.하지만 Absolute 포지션 모드가 적합한 사용 사례 중 하나는 오버레이입니다.이 포지션 모드는 복잡한 UI를 복잡한 다른 UI 위에 오버레이하는 경우(예: 팝업이나 드롭다운) 유용합니다. Absolute 포지션은 오버레이 컨테이너 자체에만 사용할 수 있으며, 오버레이 내에서는 계속해서 Relative 모드를 사용해야 합니다.다음은 간단한 중앙 팝업의 예시입니다.

다음은 참조용 UXML입니다.

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <ui:VisualElement name="complex-ui-screen">
        <ui:Toggle label="Toggle" />
        <ui:MinMaxSlider picking-mode="Ignore" label="Min/Max Slider" min-value="10" max-value="12" low-limit="-10" high-limit="40" />
        <ui:Label text="Label" />
        <ui:Button text="Button" />
        <ui:Button text="Button" />
    </ui:VisualElement>
    <ui:VisualElement name="overlay" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.71); align-items: center; justify-content: center;">
        <ui:VisualElement name="popup" style="background-color: rgba(70, 70, 70, 255);">
            <ui:Label text="Exit?" name="message" />
            <ui:Button text="Ok" name="ok-button" style="width: 108.3333px;" />
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>

위의 예제는 Absolute 포지션의 사용을 강조 표시합니다. 모든 Position > Left, Top, Right, Bottom을 0으로 설정하여 포지션을 화면 가장자리에서 0 픽셀만큼 떨어지도록 하면 #overlay 요소가 #complex-ui-screen 컨테이너 요소와 겹칩니다. #overlay 요소에 반투명 배경을 설정하여 다른 UI를 더 어둡게 보이도록 할 수도 있습니다. #popup 컨테이너 VisualElement가 중앙에 위치하도록 Relative 포지션을 설정하려면 #overlay를 사용하십시오.

베스트 프랙티스

다음 리스트는 레이아웃 엔진의 성능을 향상하는 데 도움이 되는 팁을 제공합니다.

• width와 height를 설정하여 요소의 크기를 정의하십시오.

• flexGrow 프로퍼티(USS:flex-grow:<value>;)를 사용하여 요소에 크기를 유연하게 할당하십시오.flexGrow 프로퍼티의 값은 요소의 크기가 해당 형제들에 의해 결정될 때 요소의 크기에 기본 가중치를 할당합니다.

• flexDirection 프로퍼티를 row(USS:flex-direction: row;)로 설정하여 가로 레이아웃으로 전환하십시오.

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

• position 프로퍼티를 absolute로 설정하여 부모 포지션 직사각형을 기준으로 요소를 배치하십시오. 형제 또는 부모의 레이아웃에는 영향을 주지 않습니다.

추가 리소스

• USS 프로퍼티 레퍼런스
• USS 일반 프로퍼티
• USS로 UI 스타일링
• 상대 및 절대 위치 지정 C# 예시