위와 같이 scrollview content 내부에 text를 넣고, text 가 늘어나는 만큼 content도 늘어나는 scrollview를 제작하고 싶다.
그럴때 사용하는게 Content Size Fitter 와 Vertical(or Horizontal or Grid) Layout Group 이다.
위 컴포넌트를 항상 습관적으로 사용해왔지만 정확히 어떤 식으로 동작하는지는 몰랐어서 이번 기회에 공부 및 기록해 둔다.
1. ContentSizeFitter
이 친구는 붙은 컴포넌트의 사이즈를 변경하는 기능을 한다.
"나 얼마나 커져야해?"
라는 질문을 하는거라고 생각하면 쉽다.
처음에 말한 예제의 text object 에 붙이면 text 가 늘어나는 만큼 text object도 늘어난다.
2. ~ Layout Group
여러 종류의 layoutgroup이 있지만 이번 글에서는 layoutgroup의 역할만 설명할 것이다.
- 자식의 사이즈를 조회
- 자식의 높이 (또는 길이 또는 전부) 를 합산
- "우리의 전체 높이는 000px 입니다" 라고 layout system에 보고
- 앞서 말한 contentsizefitter 가 같이 붙어 있다면, 보고된 값으로 object 사이즈 계산
2-1. Layout Group 옵션 상세 설명
2-1-1. Control Child Size
"자식의 크기를 내가 직접 제어"
근데 여기서 위 예시에서는 이미 자식 text 에서는 content size fitter 가 사이즈를 제어하고 있는데?
라는 생각을 할 수 있다.
여기서 control child size 는 단순히 크기를 셋팅하는 거에만 그치지 않고, 위 layout group의 역할 중 3번 (layout system 의 사이즈 보고)을 진행한다.
자식의 크기를 강제로 덮어씌우는건 아니고, (< 처음에 이렇게 오해했다) 자식의 크기를 LayoutGroup이 책임지고 결정한다, 라는 의미다.
2-1-2. Use Child Scale
"자식의 scale 값도 크기 계산에 포함"
일반적으로 UI는 scale을 건드리지 않으므로 보통 꺼둔다.
2-1-3. Child Force Expand
"남는 공간이 있으면 자식들에게 강제로 나눠줌"
vertical 스크롤뷰에서 사용할 때는 Height 는 반드시 체크하지 않는다.
자식들이 content 사이즈를 맞추기 위해 강제로 늘어나기 때문에, content 가 안 늘어나도 자식이 억지로 사이즈를 맞춰버린다.
Plus. Unity Layout 시스템 동작 순서
Unity UI 의 Layout시스템은 ILayoutElement -> ILayoutController 순서로 동작한다.
ILayoutElement : 크기 정보를 "제공" 하는 역할
ILayoutController : 크기를 "결정"하는 역할
ILayoutElement 에는 Text(TMP) 나 Image ("나 000px 필요해")가 있고,
ILayoutController에는 LayoutGroup 이나 Content Size Fitter 가 있다.
LayoutGroup 없이는, ContentSizeFitter 가 읽을 자식 값을 계산해주는 주체가 없다.
한줄 요약
~ Layout Group = 자식 크기를 읽어서 부모에게 전달하는 중간 계산자
Content Size Fitter는 이 계산 결과를 받아서 실제 크기로 적용하는 역할만 함
둘이 함께여야 "자식 크기 → 부모 크기 자동 반영" 이 완성됨
