Unity:: Layout Group & Layout Element

개요

이번 글에서는 Unity Component 중 Layout group을 통해 간편하게 UI 요소들을 정렬하는 방법에 대해 알아보고
Layout Element를 통해 UI 요소들의 비율을 조정하는 방법에 대해 알아보고자 한다.

---

Layout Group

UI 요소를 자동으로 정렬하는 Component

• Horizontal Layout Group
• Vertical Layout Group
• Grid Laytout Group

Vertical Layout Group & Horizontal Layout Group

정렬하고자 하는 구성 요소들의 부모 오브젝트에 Layout Group을 붙여주면 아래와 같이 정렬된다.

Vertical Layout Group (수직 정렬)

Horizontal Layout Group (수평 정렬)

---

Q. 자식 오브젝트들을 부모 크기에 맞추고 싶어요

Control Child Size + Child Force Expand 체크
Child Force Expand만 체크하면 안 됨!
같이 체크해야 자식 오브젝트 크기가 자동으로 조절됨

---

Grid Layout Group

Constraint 옵션을 통해 가로 혹은 세로의 개수를 정할 수 있다.

---

Layout Element

Q. 자식 요소의 크기를 각각 다르게 설정하고 싶어요

Horizontal / Vertical Layout group을 사용하면 자식 요소들의 크기가 모두 동일하게 고정된다.
각각 다르게 설정하고 싶다면 Layout Element의 Flexible Width / Height의 값을 설정해 보자.
 

각 자식 오브젝트에 Layout Element를 붙여주고 Flexible Width / Height 값을 조절하면 된다.
위 예제는 각각 Flexible Width를 2, 1, 1로 설정한 상태이다.
2:1:1 비율로 각 오브젝트의 크기가 자동으로 설정되는 것을 볼 수가 있다.
 
 
Layout Element는 Min / Preferred Width / Height 옵션을 통해 최소, 선호 크기 등의 옵션을 조절할 수 있다.
아래 유니티 공식 홈페이지에서 자동 레이아웃에 대한 더 자세한 설명을 참고할 수 있다.
https://docs.unity3d.com/kr/current/Manual/UIAutoLayout.html

자동 레이아웃 - Unity 매뉴얼