일반적으로 사각 트랜스폼을 사용하여 UI 요소를 배치하는 경우 포지션 및 크기가 수동으로 지정됩니다(선택적으로 부모 사각 변환을 사용하여 늘릴 동작 포함).
그러나 경우에 따라 UI 요소의 내용에 맞게 사각형의 크기를 자동으로 조정할 수도 있습니다. 이는 Content Size Fitter라는 컴포넌트를 추가하여 수행 할 수 있습니다.
Text 컴포넌트가 있는 사각 트랜스폼을 텍스트 콘텐츠의 크기에 맞추려면 Text 컴포넌트가 있는 동일한 게임 오브젝트에 Content Size Fitter 컴포넌트를 추가합니다. 그런 다음, 가로 피트 및 세로 피트 드롭다운을 모두 우선으로 설정해야 합니다.
여기서 일어나는 일은 Text 컴포넌트가 최소 및 선호 크기가 얼마나 큰가에 대한 정보를 제공할 수 있는 레이아웃 요소로 작동합니다. 수동 레이아웃에서는 이 정보가 사용되지 않습니다. 콘텐츠 사이즈 피터는 레이아웃 요소에서 제공하는 레이아웃 정보를 듣고 사각 트랜스폼의 크기를 제어하는 레이아웃 컨트롤러 타입입니다.
UI 요소 크기가 콘텐츠 크기에 맞게 자동으로 조정될 때 사각 트랜스폼의 피벗에 더 많은 주의를 기울여야 합니다. 요소의 크기가 조정될 때 피벗은 포지션이 고정되므로 피벗 포지션을 설정하여 요소가 확장 또는 축소될 방향을 제어할 수 있습니다. 예를 들어, 피벗이 중심에 있으면 요소는 모든 방향으로 똑같이 확장되고 피벗이 왼쪽 상단에 있으면 요소가 오른쪽 아래로 확장됩니다.
버튼처럼 백그라운드 이미지와 Text 컴포넌트가 있는 자식 게임 오브젝트가 포함된 UI 요소가 있는 경우, 전체 UI 요소를 텍스트 크기에 맞추고 약간의 패딩을 더하는 것이 좋습니다.
이렇게 하려면 우선 수평 레이아웃 그룹을 UI 요소에 추가한 다음 콘텐츠 크기 피터도 추가해야 합니다. 가로 피트와 세로 피트 중 하나 이상을 우선으로 설정해야 합니다. 수평 레이아웃 그룹의 패딩 프로퍼티를 사용하여 패딩을 추가하고 미세 조정할 수 있습니다.
수평 레이아웃 그룹을 사용해야 하는 이유는 무엇입니까? 수직 레이아웃 그룹일 수도 있습니다. 단 한 명의 자녀만 있는 한 동일한 결과를 산출합니다.
가로(또는 세로) 레이아웃 그룹은 레이아웃 컨트롤러와 레이아웃 요소로 작동합니다. 처음에는 그룹의 자식(이 경우에는 자식 텍스트)에서 제공하는 레이아웃 정보를 수신 대기합니다. 그런 다음, 모든 자식을 포함할 수 있으려면 그룹이 (최소한, 그리고 이상적으로)얼마나 커야 하는지 결정하고, 최소/이상적인 크기에 대한 정보를 제공하는 레이아웃 요소로 작동합니다.
콘텐츠 크기 필터는 동일 게임 오브젝트의 레이아웃 요소에서 제공하는(이 경우 가로 또는 수직 레이아웃 그룹에서 제공하는) 레이아웃 정보를 수신 대기합니다. 그런 다음, 설정에 따라 이 정보를 토대로 사각 트랜스폼의 크기를 제어합니다.
사각 트랜스폼의 크기가 설정된 후에는 가로(또는 세로) 레이아웃 그룹이 자식의 포지션과 크기가 사용 가능한 공간에 맞게 지정되도록 합니다. 레이아웃 그룹의 자식 포지션 및 크기 지정 방법에 대한 자세한 내용은 수평 레이아웃 그룹에 대한 페이지를 참조하십시오.
레이아웃 그룹(가로 또는 세로)이 있고 그룹의 각 UI 요소가 각각의 내용에 맞도록 하려면 어떤 작업을 수행합니까?
각 자식마다 콘텐츠 크기 피터를 추가할 수는 없습니다. 그 이유는 콘텐츠 크기 피터가 자체적인 사각 변환을 제어하려고 하지만 부모 레이아웃 그룹도 자식 사각 트랜스폼을 제어하려고 하기 때문입니다. 이로 인해 충돌이 발생하여 정의되지 않은 동작이 발생합니다.
하지만 이렇게 할 필요도 없습니다. 부모 레이아웃 그룹이 이미 각 자식의 크기를 콘텐츠에 맞출 수 있습니다. 해야 할 일은 레이아웃 그룹에서 자식 포스 확장 토글을 비활성화합니다. 자식 자체도 레이아웃 그룹인 경우 이에 해서도 자식 포스 확장을 비활성화해야 할 수 있습니다.
자식이 더 이상 가변 너비로 확장되지 않는 경우 자식 정렬 설정을 사용하여 레이아웃 그룹에서 정렬을 지정할 수 있습니다.
다른 자식이 아닌 추가 사용 공간을 채우기 위해 일부 자식을 확장하려면 어떻게 해야 합니까? 확장하려는 하위 항목에 Layout Element 컴포넌트를 추가하고 해당 레이아웃 요소에 Flexible Width 또는 Flexible Height 프로퍼티를 사용하면 쉽게 제어할 수 있습니다. 상위 레이아웃 그룹에는 자식 포스 확장 토글이 계속 있어야 합니다. 그렇지 않으면 모든 하위 항목이 유연하게 확장됩니다.
게임 오브젝트 하나에는 최소 및 가변 크기와 이상적인 크기에 대한 레이아웃 정보를 각각 제공하는 여러 개의 컴포넌트가 포함될 수 있습니다. 우선 순위 시스템에 따라 다른 값보다 우선 적용되는 값이 결정됩니다. Layout Element 컴포넌트는 Text, Image 및 Layout Group 컴포넌트보다 우선 순위가 높으므로 이런 컴포넌트에서 제공하는 레이아웃 정보를 치환하기 위해 사용할 수 있습니다.
레이아웃 그룹은 자식에서 제공되는 레이아웃 정보를 수신 대기할 때 오버라이드된 가변 크기를 감안합니다. 그런 다음, 자식의 크기를 제어할 때 이상적인 크기보다 더 크게 만들지 않습니다. 하지만 레이아웃 그룹에 자식 포스 확장 옵션이 활성화된 경우 모든 자식의 가변 크기를 항상 1 이상으로 제어합니다.
이 페이지에서는 몇 가지 일반적인 사용 사례에 대한 솔루션을 설명했습니다. 자동 레이아웃 시스템에 대한 자세한 설명은 UI 자동 레이아웃 페이지를 참조하십시오.