유니티 반응형 UI 기초지식 / Unity How to Make Flexible Responsive UI

UI에서 자주 사용되는 텍스트와 이미지 정렬과 배치 방법에 대해 알아봅시다.

 

 

 

1. 텍스트 길이에 따라 Rect 변경

Text에 Content Size Fitter를 추가하고 Horizontal Fit을 Preferred Size로 두면 가로 길이가 유동적으로 늘어납니다.

Text 컴포넌트의 Align By Geometry를 체크하면 메쉬기준으로 정렬이 되니 더 이상적으로 정렬이 됩니다.

 

 

 

2. 텍스트 길이에 따라 왼쪽부터 늘어나도록 Rect 변경

Rect Transform의 Pivot의 X를 0으로 하면 왼쪽이 기준이되어 오른쪽으로 늘어납니다.

반대로 1로하면 오른쪽이 기준이 되어 왼쪽으로 늘어납니다.

기본값이 0.5라서 중앙에서부터 늘어났던 것입니다.

 

 

 

3. 텍스트 길이에 따라 이미지가 양쪽에 위치하게 하기

이미지를 텍스트의 자식으로 두개 만듦니다.

왼쪽은 Rect Transform 앵커를 왼쪽으로 두고 Pos X를 음수 값으로 거리를 줍니다.

오른쪽은 Rect Transform 앵커를 오른쪽으로 두고 Pos X를 양수 값으로 거리를 줍니다.

 

텍스트는 Rect Transform의 Pivot의 X를 0.5로 두어 중앙으로부터 늘어나게 합니다.

 

 

 

4. 텍스트 길이에 따라 배경 이미지 크기 바꾸기

텍스트를 이미지의 자식으로 넣습니다.

배경 이미지에는 Horizontal Layout Group 컴포넌트를 추가하고 Padding의 Left, Right를 원하는 만큼 줍니다.

Child Force Expand의 Width와 Height를 체크해제합니다.

Content Size Fitter를 추가하고 Horizontal Fit을 Preferred Size로 둡니다.

 

이미지의 높이를 줄이고 Horizontal Layout Group의 Child Alignment를 Lower Center로 하면

밑줄로 이미지를 사용하게 할 수도 있습니다.

Padding이 있기에 글자의 길이보다 더 길게 표현됩니다.

 

 

 

5. 이미지 텍스트 이미지 텍스트 형태의 재화 표현하기

최상단 Image는 각 재화간의 배치를 담당합니다.

Content Size Fitter를 넣고 Horizontal Fit을 Preferred Size로 둡니다.

Horizontal Layout Group을 넣고 Child Force Expand의 Width와 Height를 체크해제 하고 Spacing을 줍니다.

재화의 배치가 왼쪽으로 늘어나고 싶으면 Rect Transform의 Pivot X를 1로,

오른쪽으로 늘어나고 싶으면 0, 중앙으로부터 늘어나고 싶으면 0.5로 합니다.

 

최상단 아래 있는 각 재화를 담당하는 Image는 아이콘 이미지와 텍스트를 담당합니다.

Content Size Fitter를 넣고 Horizontal Fit을 Preferred Size로 둡니다.

Horizontal Layout Group을 넣고 Child Force Expand의 Width와 Height를 체크해제 하고 Spacing을 줍니다.

Child Alignment를 Middle Center로 하여 중앙으로 정렬하게 합니다.

 

재화 Image 아래 Image는 이미지의 크기에 따라 Rect가 바뀌지 않으므로 Content Size Fitter를 넣지 않습니다.

 

재화 Image 아래 Text는 Content Size Fitter를 넣고 Horizontal Fit을 Preferred Size로 둡니다.

 

 

 

 

 

6. 스크립트로 대입시 Content Size Fitter 강제 업데이트

using UnityEngine;
using UnityEngine.UI;

public class Test : MonoBehaviour
{
    [SerializeField] Text text;
    [SerializeField] Text text2;



    [ContextMenu("Click")]
    void Click() 
    {
        text.text = "000000000000";
        FitLayout(text.rectTransform);
    }

    [ContextMenu("Click2")]
    void Click2()
    {
        text2.text = "0000000000000000";
        FitLayout(text2.rectTransform);
    }

    void FitLayout(RectTransform rect) 
    {
        LayoutRebuilder.ForceRebuildLayoutImmediate(rect);
        if (rect.parent && rect.parent.GetComponent<RectTransform>()) FitLayout(rect.parent.GetComponent<RectTransform>());
    }
}

스크립트로 Text의 수치를 유니티 사이클이 아닌 주기에 변경을 시키면 (업데이트 프레임이 아닌 시간)

텍스트는 들어가는데 Content Size Fitter가 어긋나 버립니다.

그러기 때문에 수치를 대입함과 동시에 FitLayout함수를 호출하면 최상위 부모까지 강제로 레이아웃을 업데이트 시킵니다.

 

 

이상으로 유니티에서 반응형으로 크기가 바뀌는 UI 배치하는 방법에 대해 알아보았습니다.