본문 바로가기
Unity 공부

[Unity UI] Text 크기에 맞추어 Button 크기 조절 (Dynamic UI)

by 개발하는 디토 2023. 3. 21.

문제

Button의 크기를 안에 든 Text component의 길이에 따라 유동적으로 변경하고 싶다.

 

해결

https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/HOWTO-UIFitContentSize.html

 

Making UI elements fit the size of their content | Unity UI | 1.0.0

Making UI elements fit the size of their content Normally when positioning a UI element with its Rect Transform, its position and size is specified manually (optionally including behavior to stretch with the parent Rect Transform). However, sometimes you m

docs.unity3d.com

 

한참 헤매다 찾았다.

Button에 2개의 component 추가 후 세팅

 

 

버튼 크기를 안에 들어있는 텍스트의 크기에 맞추고 싶은 경우

1. 버튼에 Content Size Fitter, Horizontal Layout Group을 달아준다.

2. Content Size Fitter의 Horizontal, Vertical Fit 모두 Preferred Size로 설정

3. Horizontal Layout Group의 Child Force Expand는 체크 해제하고 Control Child Scale을 사용

4. Horizontal Layout Group의 Padding에 적당한 값 입력

5. Horizontal Layout Group Child Alignment는 알아서 맘에 드는 값으로 설정

 

이렇게 할 경우 Text 사이즈에 버튼 크기가 맞춰지고, padding에 따라서 텍스트의 width, height보다 큰 크기의 버튼이 나타난다. Control Child Scale이 아닌 Use Childe Scale로 하면 런타임 중에 텍스트의 길이가 줄어들었을 때 버튼 크기가 늘어난 상태에서 줄어들지 않으므로 Control Child Scale로 하자.

 

나는 여기서 추가로 이런 버튼들을 부모에서 Horizontal Layout Group으로 관리하고 있는데 텍스트의 크기에 따라 버튼 크기는 잘 조절되는 것에 반해 Layout Group으로 관리되는 버튼들의 간격이 제대로 업데이트가 안 되는 현상이 발견되었다. 흠...

런타임 중에 버튼 크기가 변경되는 것이 Layout Group으로 자식 오브젝트들의 위치를 정렬한 다음에 일어나서 그런 것 같긴 한데 Canvas.ForceUpdateCanvases()를 사용해도 잘 안 되는 것 같아서 더 만져봐야 함.

댓글