해당 포스팅은 Layout과 Layout Controller의 개념을 알고 있다는 전제로 하는 설명이기 때문에
아래 링크에서 Layout Controller에 대한 개념을 보시는 것을 추천드립니다.
[Unity 3D] UI 레이아웃 개념과 컨트롤러(Layout Controller) 기초 정리
Layout Controller 오브젝트를 일정한 규칙에 따라 배치하는 것 Inspector : 디버그(Debug) 모드 Min Width : 최소한의 너비 Min Height : 최소한의 높이 Preferred Width : 선호되는 너비 Preferred Height : 선호되는 높이
howudong.tistory.com
Layout Element
- Layout Controller 안에 있는 UI 요소들이 사용할 수 있는 컴포넌트
- 자신의 사이즈를 오버라이딩
- 자신의 사이즈를 오버라이딩
- 현업에서 중요한 부분(현업자들도 모르는 경우가 많음!)
Layout Element 속성
- 현업에서 많이 쓰이는 것 → Min Width/Height, Preferred Width/Height
Min Width/Height
- 이 값이 유효하려면 Layout Controller의 짝이 되는 Child Control Width/Height가 체크되어 있어야 함
- UI의 최소 가로/세로 길이의 기준을 정하는 것
- Preferred Size가 얼마이던간에 해당 값을 최소 사이즈로 한다.
- Preferred Size가 얼마이던간에 해당 값을 최소 사이즈로 한다.
- Preferred Size보다 커야지만 유의미한 변화가 있음
→ Preffered Size보다 수를 줄여봤자 그거보다 작아지진 않는다.- Min Width가 Preferred Width인 268을 넘기 전까지는 변화가 없는 것을 확인할 수 있음
Ignore Layout
- Layout Controller에 의해 제약을 받지 않는다.
- Layout Controller에서 설정한 사이즈 설정 등에 대한 제한을 받지 않고 정렬되지 않는다.
Preferred Width/Height
- UI 이미지 요소 자체의 크기를 조정하는 것(직접적인 영향을 주는 것)
- 이 값을 바꾸면 Min Width/Height의 임계치도 낮아지게 된다.
- Min Width/Height와는 값이 작아도 커도 영향을 끼침
Flexible Width/Height
- 해당 방향으로의 확장 기능을 사용할 것인가?
- 0 또는 음수 → 사용하지 않음
- 양수 → 사용함
Layout Element를 Text UI에 응용하기
- Text UI도 Horizontal Layout에 요소로써 담으면 Image UI와 다를 바 없이 똑같이 적용된다.
차이점
- Preferred Size가 정해져 있지 않고 Text에 적혀 있는 문구를 모두 렌더링 할 수 있는 크기에 맞춰짐
- 즉 글자 크기에도 영향을 받는다.
- Text의 문구가 바뀔 때마다 Preferred Width/Height가 바뀌는 것을 확인할 수 있다.
Text UI에 Control Child Size 적용하기
- 해당 상태에서는 오른쪽처럼 문구를 많이 입력해도 잘려서 보이지 않는다.
- Control Child Size에 Width/Height를 체크해만 자식 요소의 사이즈에 맞춰진다.
Vertical Layout + Horizontal Layout + Control Child Size
- 위 3가지를 혼합하여 텍스트로 표 같은 형식의 레이아웃을 만들 수 있다.