[Unity] Auto Layout System

Auto Layout System에 대해 알아 볼 것이다.

자동 레이아웃 시스템은 RectTransform 위에서 동작하며, Layout Element가 제공하는 크기 정보를 Layout Controller가 사용하여 크기와 취를 자동 계산하는 시스템이다.

https://docs.unity3d.com/kr/560/Manual/UIAutoLayout.html

 

차례 

Layout Element

• Layout Element (Component)

Layout Controller

• Content Size Fitter (Component)
• Aspect Ratio Fitter (Component)
• Layout Group 
  • Horizontal Layout Group (Component)
  • Vertical Layout Group (Component)
  • Grid Layout Group (Component)

 

 

 

Layout Element

RectTransform에 있는 게임 오브젝트이며, 옵션으로 다른 컴포넌트가 있을 수도 있다. 

Layout Element는 크기가 어떻게 되어야 하는지 등의 특징 정볼르 가지고 있다. 

대표적으로 Image나 Text는 Layout Element를 제공한다.

Layout Element (Component)

https://docs.unity3d.com/kr/560/Manual/script-LayoutElement.html

Ingore Layout : 이 오브젝트를 Layout Group 계산에서 제외한다.

 

Min Width/Height : 요소의 최소 너비/높이

Preferred Width/Height : 요소의 선호 너비/높이

Flexible Width/Height : 요소의 여유 너비/높이

 

Layout Priority : 레이아웃 우선순위

 

 

Layout Controller

크기, Layout Element의 포지션을 제어하는 컴포넌트이다.

자신의 레이아웃 요소를 제어할 수도 있고, 자식 레이아웃 요소를 제어할 수도 있다.

 

Content Size Fitter (Component)

자기 자신의 RectTransform 크기를 레이아웃 요소에 맞게 조절하는 컴포넌트

Layout Group과 같이 사용하면 충돌이 날 수 있으니 주의

https://docs.unity3d.com/kr/560/Manual/script-ContentSizeFitter.html

Horizontal(Vertical) Fit : 가로(세로) 크기 조절 방식

• Unconstrained : 너비 조정 안함
• Minimum : 레이아웃 요소의 최소 너비에 기반하여 너비 조정
• Preferred : 레이아웃 요소의 기본 너비에 기반하여 너비 조정

Content Size Fitter 없음(좌) / Content Size Fitter (Preferred Size)(우)

 

Aspect Ratio Fitter (Component)

UI 요소의 가로:세로 비율을 강제로 유지시켜준다. 

https://docs.unity3d.com/kr/560/Manual/script-AspectRatioFitter.html

Aspect Mode : 종횡비 적용 방법

• None : 사각형을 종횡비에 맞추지 않는다.
• Width Controls Height : 높이가 너비에 따라 조정된다.
• Height Controls width : 너비가 높이에 따라 조정된다.
• Fit In Parent : 부모 안에 들어가되, 비율을 유지하면서 최대한 크게 조정된다.
• Envelope Parent : 부모를 완전히 덮으며 비율을 유지한다.
• Aspect Ratio : 종횡비 (너비를 높이로 나눈값)

불투명 회색 Panel은 Text의 부모 오브젝트이다.

 

Layout Group 

자식들을 자동 정력해주는 컴포넌트이다.

자신의 크기를 제어하지 않는다.

 

 

Horizontal Layout Group (Component)

자식 레이아웃 요소를 가로로 정렬한다. 

https://docs.unity3d.com/kr/560/Manual/script-HorizontalLayoutGroup.html

회색 panel의 자식오브젝트인 이미지가 정렬 되어있다.

Padding : 부모 내부의 여백

spacing : 자식들 사이 간격

Child Alignment : 자식 정렬 기준

Reverse arrangement : 정렬 순서 반대

Control Child Size : 부모가 자식 크기를 강제로 조절

Use Child Scale : 자식의 Scale 값 반영

Child Force Expand : 남는공간이 있을때, 자식 레이아웃 확장

 

Vertical Layout Group (Component)

자식 레이아웃 요소를 세로로 정렬한다. 

https://docs.unity3d.com/kr/560/Manual/script-VerticalLayoutGroup.html

 

 

Grid Layout Group (Component)

자식 레이아웃 요소를 격자로 정렬한다.

다른 레이아웃 그룹과 다르게, 자식들의 레이아웃 요소를 무시하고 고정된 크기를 할당한다. 

https://docs.unity3d.com/kr/560/Manual/script-GridLayoutGroup.html

Cell Size (X,Y) : 각 레이아웃 요소가 사용할 크기

Start Corner : 시작 위치 (왼쪽 위, 오른쪽 위, 왼쪽 아래, 오른쪽 아래)

Start Axis : 배치할 주축 (Horizontal : 행 먼저 채우기, Vertical : 열 먼저 채우기)

Constraint : 행렬 수 제한 방법

• Flexible : 자동 계산 
• Fixed Column Count : 열 개수 고정
• Fixed Row Count : 행 개수 고정