멈추지 않고 끈질기게
[Unity][UI] 레이아웃 그룹(Layout Group) 본문
※ 해당 포스팅은 개인의 공부 정리용 글입니다. 틀린 내용이 있다면 추후 수정될 수 있습니다.
※ 해당 포스팅은 Unity 2021.3.15f1 버전을 기준으로 작성되었습니다.
※ 해당 포스팅은 하기 출처들의 내용을 참고하였습니다.
- https://docs.unity3d.com/kr/2021.3/Manual/script-VerticalLayoutGroup.html
- https://docs.unity3d.com/kr/2021.3/Manual/script-GridLayoutGroup.html
이번 포스팅에서는 유니티의 레이아웃 그룹에 대해 알아보겠습니다.
1. 레이아웃 그룹(Layout Group)
레이아웃 그룹은 하위 UI 오브젝트들의 배치를 일괄적으로 관리하기 위한 컴포넌트로, 인스펙터 창에서 layout group으로 검색하여 추가할 수 있습니다. 레이아웃 그룹의 종류에는 수평 레이아웃 그룹(Vertical Layout Group), 수직 레이아웃 그룹(Horizontal Layout Group), 그리드 레이아웃 그룹(Grid Layout Group)의 3종류가 있습니다.
레이아웃 그룹 컴포넌트가 추가 시, 해당 오브젝트의 하위 오브젝트들은 Rect Transform에서 앵커 및 x, y 좌표를 수정할 수 없습니다. 레이아웃 그룹 컴포넌트에서 하위 오브젝트들의 위치를 일괄적으로 관리하기 때문입니다. 레이아웃 그룹을 포함한 오브젝트의 하위에 오브젝트를 추가할 경우, 레이아웃 그룹의 기준에 따라 자동으로 정렬되어 배치됩니다.
또한 레이아웃 그룹 컴포넌트는 오브젝트당 하나만 포함할 수 있습니다. 이미 레이아웃 그룹을 포함하고 있는 오브젝트에 다른 레이아웃 그룹을 추가할 경우 경고창이 나오며 취소됩니다.
2. Vertical Layout Group, Horizontal Layout Group
수직 레이아웃 그룹은 이름 그대로 수직 방향으로, 수평 레이아웃 그룹은 수평 방향으로 하위 오브젝트들을 정렬합니다. 수직, 수평 레이아웃은 동일한 속성들을 보유하고 있습니다.
Padding은 전체 범위의 여백값을 조정하는 속성으로, 상하좌우 4개로 나뉘어 있습니다. Spacing은 하위 오브젝트 사이의 여백을 나타내며, 수평 레이아웃 그룹에서는 x좌표, 수직 레이아웃 그룹에서는 y좌표의 간격이 됩니다.
Child Alignment는 Rect Transform의 앵커와 같은 정렬 기준으로, 해당 값을 기준으로 하위 오브젝트들을 정렬합니다. 예를 들어 수평 레이아웃 그룹에서 MIddle Left로 설정할 경우 y축 기준 중앙, x축 기준 좌측에 첫번째 오브젝트를 배치하며 오브젝트를 추가할 때마다 해당 오브젝트 우측으로 배치합니다. 수직 레이아웃 그룹에서 Upper Center로 설정할 경우 y축 기준 상단, x축 기준 중앙에 첫번째 오브젝트를 배치하며 오브젝트를 추가할 때마다 해당 오브젝트 아래로 배치합니다.
Reverse Arranngement 플래그 체크 시 하위 오브젝트들의 배치 순서를 반대로 만듭니다. 예를 들어 사진 4의 우측처럼 수직 레이아웃 그룹, Upper Center인 경우 원래 첫 오브젝트를 가장 위에 배치하고 순서대로 아래로 배치하나, 해당 플래그 체크 시 첫 오브젝트가 가장 아래로 배치되며 새로 추가하는 오브젝트가 가장 상단에 배치됩니다. 사진 5를 보면 원래 최상단에 위치했던 오브젝트가 Reverse Arragement 체크 후 최하단에 위치하는 것을 알 수 있습니다.
Control Child Size는 레이아웃 그룹이 하위 오브젝트의 사이즈(Width, Height)를 제어할지 여부를 결정합니다. 해당 속성의 Width, Height 플래그 체크 시 하위 오브젝트의 Width, Height 값을 직접 수정할 수 없게 됩니다. 다른 설정 없이 Control Child Size의 width나 Height를 체크할 경우 해당 값이 0으로 바뀌어 사라져버리며, 후술할 Child Force Expand와 함께 쓸 경우 남는 공간을 모두 채우는 식으로 설정됩니다.
사진 6은 수평 레이아웃 그룹에 Control Child Size와 Child Force Expand를 함께 사용하는 예시입니다. 두 속성의 Width 플래그를 체크하면 하위 오브젝트들의 Width가 상위 오브젝트의 가로 길이를 n등분 하는 값으로 설정됩니다. Height 플래그 체크 시 수평 레이아웃의 경우 하위 오브젝트들의 Height 값이 상위 오브젝트의 세로 길이가 되며(Padding 값 제외), 두 플래그 모두 체크 시 Padding, Spacing을 제외하고 레이아웃 영역을 꽉 채우는 모습이 됩니다.
(Control Child Size를 활용하는 방법에는 이 외에도 다른 컴포넌트와 연계하여 사용하는 방법이 있다고 하며, 해당 내용은 숙지하는 대로 추가하도록 하겠습니다.)
Use Child Scale을 통해 하위 오브젝트의 Scale 값을 고려하여 배치할지 정할 수 있습니다. Width 플래그는 하위 오브젝트 Scale의 x값을, Height 플래그는 하위 오브젝트 Scale의 y값을 고려할지 결정합니다. 예를 들어 수평 레이아웃 그룹에서 하위 오브젝트 중 하나의 Scale의 x값을 늘렸을 경우, 해당 속성의 Width 플래그가 체크되어 있지 않다면 다른 오브젝트와 겹치는 현상이 발생합니다. 해당 플래그를 체크하면 하위 오브젝트의 스케일까지 고려하여 배치하므로 이러한 현상을 해결할 수 있습니다.
사진 7은 수평 레이아웃 그룹에서 맨 왼쪽 오브젝트의 Scale의 x값을 2.5로 늘린 경우입니다. Use Child Scale에서 Width 플래그를 체크하기 전에는 레이아웃 영역을 벗어나고 기존 오브젝트와 겹쳐서 노출되나, 체크 후 영역 안에서 겹치지 않게 정렬되는 모습을 볼 수 있습니다.
Child Force Expand 체크 여부에 따라 공간이 남을 경우 n등분하여 배치할지 결정할 수 있습니다. Width 플래그는 x축으로 배치할 공간이 남는지, Height 플래그는 y축으로 배치할 공간이 남는지 체크합니다. 예를 들어 수직 레이아웃 그룹에서 해당 속성의 Height를 체크할 경우, 하위 오브젝트가 몇개 없어 공간이 남을 경우 Spacing 값에 상관 없이 공간을 n등분하여 배치합니다.
사진 8은 수직 레이아웃 그룹, Upper Center, Spacing 값은 5로 설정한 상태입니다. Child Force Expand의 Height 플래그를 체크 후 원래 Spacing 값에 상관없이 공간을 3등분하여 배치한것을 알 수 있습니다.
3. Grid Layout Group
그리드 레이아웃 그룹은 수직, 수평 레이아웃 그룹이 혼합된 느낌으로, 하위 오브젝트들을 바둑판처럼 정렬합니다. 그리드 레이아웃은 수직, 수평 레이아웃과는 조금 다른 속성들을 보유합니다.
Cell Size는 하위 오브젝트들의 크기를 조절하는 속성입니다. 그리드 레이아웃 그룹의 하위 오브젝트들은 이 값에 따라 동일한 크기를 가지며, 따라서 Rect Transform에서 posX, posY 뿐만 아니라 Width, Height 값도 변경할 수 없습니다. Spacing 은 수직, 수평 레이아웃 그룹과 마찬가지로 하위 오브젝트들 간의 여백이며, X축과 Y축 값이 분리되어 있습니다.
Start Corner와 Start Axis 값을 기준으로 하위 오브젝트들을 배치하게 됩니다. 예를 들어 Start Corner는 Upper Left, Start Axis는 Horizontal일 경우 좌측 상단에서부터 우측으로 수평으로 나열합니다. Start Corner는 Upper Right, Start Axis는 Vertical일 경우에는 우측 상단에서부터 아래쪽으로 수직으로 나열합니다.
Child Alignment는 하위 오브젝트 집단의 위치를 정렬하는 기준입니다. 수평, 수직 레이아웃 그룹의 그것과 마찬가지로 총 9가지 종류가 있으며, 사진 10의 우측의 경우 Child Alignment가 Upper Left로 설정되어 있는 상태입니다. 사진 11의 좌측은 사진 10의 우측과 동일한 설정에서 Child Alignment를 Middle Center로, 우측은 Lower Right로 설정한 경우입니다.
Constraint는 하위 오브젝트들의 행렬 수를 설정합니다. 디폴트 값인 Flexible의 경우 Start Corner와 Start Axis를 기준으로 배치하다가 다음 배치할 오브젝트가 레이아웃 그룹의 영역을 벗어날 경우, 자동으로 열이나 행을 바꾸는 방식입니다. Fixed Column Count로 설정 시 최대 열 갯수를, Fixed Row Count로 설정 시 최대 행 갯수를 하위 속성인 Constraint Count 값으로 고정합니다. 해당 설정들의 경우 하위 오브젝트들이 레이아웃 영역을 벗어날 수 있습니다.
사진 12는 Start Corner - Upper Left, Start Axis - Vertical인 그리드 레이아웃 영역에서 Constraint 설정을 비교한 것으로, Fixed Column Count와 Fixed Row Count의 Constraint Count는 2로 설정하였습니다. 해당 속성에 따라 하위 오브젝트의 배치가 크게 달라지며, Fixed Column Count에서는 레이아웃 영역을 벗어나는 모습을 확인할 수 있습니다.
'Unity' 카테고리의 다른 글
| [Unity] 애니메이션 추가하기 (0) | 2023.07.01 |
|---|---|
| [Unity][UI] Content Size Fitter (0) | 2023.04.13 |
| [Unity][번외] Transform.SetPositionAndRotation (0) | 2023.02.15 |
| [Unity][2D] 타겟을 향한 회전 (0) | 2023.02.11 |
| [Unity] 코루틴(CoRoutine) (0) | 2022.12.17 |
