Unity UI - Content Size Fitter 응용: 텍스트 정보 창 만들기

이전 포스트에서 Layout Group과 Content Size Fitter를 사용해 자동으로 정렬, 늘어나는 UI를 만들어 보았습니다.

 

이번엔 텍스트 창에 응용해 보겠습니다.

 

텍스트(TMP)에 Size Fitter를 넣고 Preffered Size로 설정합니다.

 

이후 패널의 배경이 될 오브젝트에 Horizontal/Vertical Layout Group과 Content Size Fitter를 넣고

원하는 만큼 Padding을 조정하면 자동 조정 텍스트 패널이 완성됩니다.

 

 

그러나 막상 적용시키면 보다시피 실시간으로 맞춰지는 패널이라고 말하기엔 약간 부족한 결과를 보입니다.

 

public class test : MonoBehaviour
{
  private string TextA = "Lehu";
  private string TextB = "ASDFQWERZXCV";
  private string TextC = "Hello<br>World!";

  [SerializeField] private TextMeshProUGUI MyText = null;
  public void ChangeText(int index)
  {
    switch(index)
    {
      case 0:MyText.text= TextA; break;
      case 1: MyText.text= TextB; break;
      case 2: MyText.text= TextC; break;
    }
  }
}

 

스크립트로 인한 텍스트 변경에도 한 박자 늦게 반응하기도 합니다.

 

여기까지 보면 의외로 허술하게 나사빠진 기능처럼 보이지만,

여기서 스크립트에 한 줄만 추가하면 모든 문제가 해결됩니다.

public class test : MonoBehaviour
{
  private string TextA = "Lehu";
  private string TextB = "ASDFQWERZXCV";
  private string TextC = "Hello<br>World!";

  [SerializeField] private TextMeshProUGUI MyText = null;
  public void ChangeText(int index)
  {
    switch(index)
    {
      case 0:MyText.text= TextA; break;
      case 1: MyText.text= TextB; break;
      case 2: MyText.text= TextC; break;
    }
    LayoutRebuilder.ForceRebuildLayoutImmediate(MyText.transform as RectTransform); //추가된 코드
  }
}

 

해당 텍스트를 변경한 후

LayoutRebuilder.ForceRebuildLayoutImmediate(Recttransform) 코드를 실행하면 해당 RectTransform의 사이즈가 즉시 변경되며 사이즈 계산 딜레이가 생기지 않게 됩니다.

불안하신 분은 텍스트의 Rect뿐만 아니라 부모의 Rect도 강제 적용시켜도 무방합니다.

public class test : MonoBehaviour
{
  private string TextA = "Lehu";
  private string TextB = "ASDFQWERZXCV";
  private string TextC = "Hello<br>World!";

  [SerializeField] private TextMeshProUGUI MyText = null;
  public void ChangeText(int index)
  {
    if (IsChanging) return;
    switch(index)
    {
      case 0:StartCoroutine(changetext(TextA)); break;
      case 1: StartCoroutine(changetext(TextB)); break;
      case 2: StartCoroutine(changetext(TextC)); break;
    }
    LayoutRebuilder.ForceRebuildLayoutImmediate(MyText.transform as RectTransform);
  }
  private bool IsChanging = false;
  private IEnumerator changetext(string str)
  {
    IsChanging = true;
    WaitForSeconds _wait = new WaitForSeconds(0.1f);
    MyText.text = "";
    for(int i=0;i<str.Length;i++)
    {
      MyText.text += str[i];
      LayoutRebuilder.ForceRebuildLayoutImmediate(MyText.transform as RectTransform);
      yield return _wait;
    }
    yield return null;
    IsChanging = false;
  }
}

 

글자 하나하나 입력할 때마다 LayoutRebuilder를 실행시켜주면 빠릿빠릿하게 크기가 알아서 적용됩니다.

 

 

이를 활용하여 동적으로 텍스트를 불러오는 정보 패널 등에서 사용할 수 있습니다.