유니티 UI 크기 변경 - yuniti UI keugi byeongyeong

일반적으로 사각 트랜스폼을 사용하여 UI 요소를 배치하는 경우 포지션 및 크기가 수동으로 지정됩니다(선택적으로 부모 사각 변환을 사용하여 늘릴 동작 포함).

그러나 경우에 따라 UI 요소의 내용에 맞게 사각형의 크기를 자동으로 조정할 수도 있습니다. 이는 Content Size Fitter라는 컴포넌트를 추가하여 수행 할 수 있습니다.

텍스트 크기에 맞추기

Text 컴포넌트가 있는 사각 트랜스폼을 텍스트 콘텐츠의 크기에 맞추려면 Text 컴포넌트가 있는 동일한 게임 오브젝트에 Content Size Fitter 컴포넌트를 추가합니다. 그런 다음, 가로 피트 및 세로 피트 드롭다운을 모두 우선으로 설정해야 합니다.

어떻게 작동합니까?

여기서 일어나는 일은 Text 컴포넌트가 최소 및 선호 크기가 얼마나 큰가에 대한 정보를 제공할 수 있는 레이아웃 요소로 작동합니다. 수동 레이아웃에서는 이 정보가 사용되지 않습니다. 콘텐츠 사이즈 피터는 레이아웃 요소에서 제공하는 레이아웃 정보를 듣고 사각 트랜스폼의 크기를 제어하는 ​​레이아웃 컨트롤러 타입입니다.

피벗 기억

UI 요소 크기가 콘텐츠 크기에 맞게 자동으로 조정될 때 사각 트랜스폼의 피벗에 더 많은 주의를 기울여야 합니다. 요소의 크기가 조정될 때 피벗은 포지션이 고정되므로 피벗 포지션을 설정하여 요소가 확장 또는 축소될 방향을 제어할 수 있습니다. 예를 들어, 피벗이 중심에 있으면 요소는 모든 방향으로 똑같이 확장되고 피벗이 왼쪽 상단에 있으면 요소가 오른쪽 아래로 확장됩니다.

자식 텍스트가 있는 UI 요소의 크기에 맞추기

버튼처럼 백그라운드 이미지와 Text 컴포넌트가 있는 자식 게임 오브젝트가 포함된 UI 요소가 있는 경우, 전체 UI 요소를 텍스트 크기에 맞추고 약간의 패딩을 더하는 것이 좋습니다.

이렇게 하려면 우선 수평 레이아웃 그룹을 UI 요소에 추가한 다음 콘텐츠 크기 피터도 추가해야 합니다. 가로 피트와 세로 피트 중 하나 이상을 우선으로 설정해야 합니다. 수평 레이아웃 그룹의 패딩 프로퍼티를 사용하여 패딩을 추가하고 미세 조정할 수 있습니다.

수평 레이아웃 그룹을 사용해야 하는 이유는 무엇입니까? 수직 레이아웃 그룹일 수도 있습니다. 단 한 명의 자녀만 있는 한 동일한 결과를 산출합니다.

어떻게 작동합니까?

가로(또는 세로) 레이아웃 그룹은 레이아웃 컨트롤러와 레이아웃 요소로 작동합니다. 처음에는 그룹의 자식(이 경우에는 자식 텍스트)에서 제공하는 레이아웃 정보를 수신 대기합니다. 그런 다음, 모든 자식을 포함할 수 있으려면 그룹이 (최소한, 그리고 이상적으로)얼마나 커야 하는지 결정하고, 최소/이상적인 크기에 대한 정보를 제공하는 레이아웃 요소로 작동합니다.

콘텐츠 크기 필터는 동일 게임 오브젝트의 레이아웃 요소에서 제공하는(이 경우 가로 또는 수직 레이아웃 그룹에서 제공하는) 레이아웃 정보를 수신 대기합니다. 그런 다음, 설정에 따라 이 정보를 토대로 사각 트랜스폼의 크기를 제어합니다.

사각 트랜스폼의 크기가 설정된 후에는 가로(또는 세로) 레이아웃 그룹이 자식의 포지션과 크기가 사용 가능한 공간에 맞게 지정되도록 합니다. 레이아웃 그룹의 자식 포지션 및 크기 지정 방법에 대한 자세한 내용은 수평 레이아웃 그룹에 대한 페이지를 참조하십시오.

레이아웃 그룹의 자식을 각각의 크기에 맞추기

레이아웃 그룹(가로 또는 세로)이 있고 그룹의 각 UI 요소가 각각의 내용에 맞도록 하려면 어떤 작업을 수행합니까?

각 자식마다 콘텐츠 크기 피터를 추가할 수는 없습니다. 그 이유는 콘텐츠 크기 피터가 자체적인 사각 변환을 제어하려고 하지만 부모 레이아웃 그룹도 자식 사각 트랜스폼을 제어하려고 하기 때문입니다. 이로 인해 충돌이 발생하여 정의되지 않은 동작이 발생합니다.

하지만 이렇게 할 필요도 없습니다. 부모 레이아웃 그룹이 이미 각 자식의 크기를 콘텐츠에 맞출 수 있습니다. 해야 할 일은 레이아웃 그룹에서 자식 포스 확장 토글을 비활성화합니다. 자식 자체도 레이아웃 그룹인 경우 이에 해서도 자식 포스 확장을 비활성화해야 할 수 있습니다.

자식이 더 이상 가변 너비로 확장되지 않는 경우 자식 정렬 설정을 사용하여 레이아웃 그룹에서 정렬을 지정할 수 있습니다.

다른 자식이 아닌 추가 사용 공간을 채우기 위해 일부 자식을 확장하려면 어떻게 해야 합니까? 확장하려는 하위 항목에 Layout Element 컴포넌트를 추가하고 해당 레이아웃 요소에 Flexible Width 또는 Flexible Height 프로퍼티를 사용하면 쉽게 제어할 수 있습니다. 상위 레이아웃 그룹에는 자식 포스 확장 토글이 계속 있어야 합니다. 그렇지 않으면 모든 하위 항목이 유연하게 확장됩니다.

어떻게 작동합니까?

게임 오브젝트 하나에는 최소 및 가변 크기와 이상적인 크기에 대한 레이아웃 정보를 각각 제공하는 여러 개의 컴포넌트가 포함될 수 있습니다. 우선 순위 시스템에 따라 다른 값보다 우선 적용되는 값이 결정됩니다. Layout Element 컴포넌트는 Text, Image 및 Layout Group 컴포넌트보다 우선 순위가 높으므로 이런 컴포넌트에서 제공하는 레이아웃 정보를 치환하기 위해 사용할 수 있습니다.

레이아웃 그룹은 자식에서 제공되는 레이아웃 정보를 수신 대기할 때 오버라이드된 가변 크기를 감안합니다. 그런 다음, 자식의 크기를 제어할 때 이상적인 크기보다 더 크게 만들지 않습니다. 하지만 레이아웃 그룹에 자식 포스 확장 옵션이 활성화된 경우 모든 자식의 가변 크기를 항상 1 이상으로 제어합니다.

추가 정보

이 페이지에서는 몇 가지 일반적인 사용 사례에 대한 솔루션을 설명했습니다. 자동 레이아웃 시스템에 대한 자세한 설명은 UI 자동 레이아웃 페이지를 참조하십시오.

안녕하세요 극꼼입니다!

지난번에 레터박스를 이용해 디폴트 해상도에서 벗어나면 남는 부분을 까맣게 처리했는데요, 

https://geukggom.tistory.com/104

[Unity] 해상도에 따른 화면 비율 유지(feat. 레터박스(Letter box))

안녕하세요 극꼼입니다. 오늘은 해상도가 달라져도 화면 비율을 유지할 수 있는 래터박스를 만들어보도록 하겠습니다. 저는 16:10 비율로 만든 후, 다른 비율의 해상도일 경우 남은 빈 공간을 검

geukggom.tistory.com

이번 포스팅에서는 캔버스 내에서 배경이 되는 UI가 화면 빈 공간에 맞춰 크기가 달라지게 하는 방법에 대해 다뤄보겠습니다.

아래는 예시)

UI Canvas의 인스펙터창에는 Canvas Scaler라는 컴포넌트가 있습니다. 

여기서 UI Scale Mode를 'Scale With Screen Size'로 설정해줍니다.

해상도가 바뀌어도 화면 크기에 맞춰 UI 크기가 바뀌도록 해줍니다.

Screen Match Mode는 'Match Width Or Height'로 설정해줍니다. 디폴트 해상도(Reference Resolution) 비율보다 가로 또는 세로비율이 더 커질 경우 어디를 기준으로 둘건지를 정해줍니다. 

Width쪽으로 Match를 옮길 경우, 화면에 가로폭이 모두 보이는 방향으로 UI크기를 조절해주므로

이렇게 세로방향에 빈 공간이 생기게 됩니다.

반대로, Height로 설정할 경우, 화면에 세로폭이 모두 보이는 방향으로 UI 크기를 조절해주므로

위와 같이 가로에 공간이 남게 됩니다. 

이렇게 빈 공간이 생기지 않게 그때그때 Match값이 달라지도록 해줄겁니다.

* 그 전에, 배경 외의 UI는 

Rect Transform 컴포넌트에서 Anchor Preset을 미리 설정해줘야 화면 밖으로 밀려나지 않습니다.

코드는 간단합니다.

//Default 해상도 비율
float fixedAspectRatio = 9f / 16f; 

//현재 해상도의 비율
float currentAspectRatio = (float)Screen.width / (float)Screen.height;

//현재 해상도 가로 비율이 더 길 경우
if (currentAspectRatio > fixedAspectRatio) thisCanvas.matchWidthOrHeight = 0;       
//현재 해상도의 세로 비율이 더 길 경우
else if (currentAspectRatio < fixedAspectRatio) thisCanvas.matchWidthOrHeight = 1;

배경 UI의 해상도 비율보다 현재 해상도 비율의 가로 비율이 더 길 경우 Match값을 0으로,

세로 비율이 더 길 경우 Match값을 1로 설정해줍니다. 

코드를 적용하면 포스팅 처음에 올린 예시들처럼 배경 UI의 크기가 조절됩니다.