UI Toolkit에는 레이아웃 및 스타일 속성을 기반으로 시각적 요소를 배치하는 레이아웃 엔진이 포함되어 있습니다. 레이아웃 엔진은 HTML/CSS 레이아웃 시스템인 Flexbox의 하위 집합을 구현하는 Yoga의 레이아웃 원칙을 사용합니다.
Yoga Layout | A cross-platform layout engine
Why You May Consider Yoga PERFORMANCE Yoga was built to be fast and performance will always be one of Yoga's primary goals. For a layout engine to be able to power any range of applications, it needs to be fast and never stand in the way of a fluid user ex
yogalayout.com
A Complete Guide to Flexbox | CSS-Tricks
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes hi
css-tricks.com
행동(Behavior)
기본적으로 모든 시각적 요소는 레이아웃의 일부입니다. 레이아웃에는 다음와 같은 기본 동작이 있습니다.
- 컨테이너는 자식을 세로로 배치합니다.
- 컨테이너 사각형의 position에는 자식 사각형이 포함됩니다(자식 사각형의 영향을 받습니다). 이 행동은 다른 레이아웃 속성에 의해 제한될 수 있습니다.
- 텍스트가 있는 시각적 요소는 크기 계산에 텍스트 크기를 사용합니다. 이 행동은 다른 레이아웃 속성에 의헤 제한될 수 있습니다.
UI Toolkit에는 버튼, 토글 또는 텍스트 필드와 같은 표준 UI 구성 요소에 대한 기본 제공 컨트롤이 포함되어 있습니다. 이러한 기본 제공 컨트롤에는 레이아웃에 영향을 주는 스타일이 있습니다.
Unity - Manual: Controls
Controls A control is an element of a graphical user interface, such as a button, label or checkbox. It includes the visuals of the control, and the scripted logic to operate and interact with the control. In UI(User Interface) Allows a user to interact wi
docs.unity3d.com
모범 사례
다음 목록은 레이아웃 엔진의 성능을 향상시키는 데 도움이 되는 팁을 제공합니다.
- width를 설정하여 height요소의 크기를 정의합니다.
- flexGrow 속성을 사용(USS: flex-grlow: <value>;)하여 요소에 유연한 크기를 할당합니다. 속성 값은 flexGrow형제에 의해 요소의 크기가 결정될 때 기본 가중치를 할당합니다.
- flexDirection 속성을 row (USS: flex-direction: row;)로 설정하여 가로 레이아웃으로 전환합니다.
- 상대 위치 지정(relative positioning)을 사용하여 원래 레이아웃 위치를 기반으로 요소를 오프셋합니다.
- position 속성을 absolute로 설정하여 부모 위치 사각형을 기준으로 요소를 배치합니다. 이것은 형제 또는 부모의 레이아웃에 영향을 미치지 않습니다.
예시
다음 예제에서는 화면의 왼쪽 하단 모서리에 고정된 UI요소를 만듭니다. 전체 화면을 채우는 부모 요소를 만든 다음 왼쪽 하단 모서리에 자식 요소를 배치하면 됩니다.
1. 새 VisualElement 만들기
2. flexGrow 속성을 1로 설정합니다.
3. 새 VisualElement를 만들고 첫 번째 VisualElement의 자식으로 만듭니다.
4. position 요소의 속성을 absolute로 설정
5. left및 bottom에 대한 오프셋을 0으로 설정합니다.
<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>
'유니티 > UI System' 카테고리의 다른 글
| [UIToolkit]UXML 템플릿 작성 - 1 (0) | 2022.03.30 |
|---|---|
| [UIToolkit]UXML을 사용한 UI 구조 (0) | 2022.03.30 |
| [UIToolkit]Visual Tree (0) | 2022.03.25 |
| [UIToolkit]UI Toolkit 개요 (0) | 2022.03.25 |
| 유니티 넷플릭스 스타일UI - ScrollrectEx 응용 (0) | 2020.12.25 |
