앵커

앵커 는 캔버스 패널 에 UI 위젯 위치를 설정하는 데 사용됩니다. 앵커는 다양한 화면 크기와 종횡비 설정을 지원합니다.

최소(X,Y) 및 최대(X,Y) 앵커 파라미터와 오프셋 파라미터로 각 위젯의 위치가 결정됩니다.

여러 앵커 프리셋에서 선택하거나, 최소(X,Y) 및 최대(X,Y) 파라미터로 수동으로 구성할 수도 있습니다. 여기서 Min(0,0) 및 Max(0,0) 로 캔버스 패널의 좌측 상단이, Min(1,1) 및 Max(1,1) 로 우측 하단이 결정됩니다. 앵커 프리셋은 오프셋 파라미터 세트에 따라 달라집니다.

앵커 작동 방식

앵커 메달 은 캔버스 패널의 앵커 위치를 보여 주며, 아래 이미지의 노란색 박스로 표시됩니다.

아래 이미지는 캔버스 패널에 배치된 이미지 위젯 을 보여줍니다. 이렇게 하려면 **팔레트 패널**에서 **Canvas Panel로 이미지*를 드래그해야 합니다. 앵커의 디폴트 설정( 모서리 위치)을 사용하세요.

세로 노란색 선은 X축 버튼 오프셋으로, 앵커 메달에서 이미지까지 X축 방향에서의 거리를 슬레이트 단위로 결정합니다.

가로 노란색 선은 Y축 버튼 오프셋으로, 앵커 메달에서 이미지까지 Y축 방향에서의 거리를 슬레이트 단위로 결정합니다.

오프셋 파라미터는 캔버스 패널 크기를 기반으로 하며 크기 변경에 따라 조정됩니다.

그래프의 화면 크기 버튼을 클릭하면 현재 사용되는 크기를 변경할 수 있습니다. UI 위젯이 다른 화면 크기나 종횡비에서 어떻게 보이는지 확인하고 알맞게 조정해 주는 습관을 들이는 것이 좋습니다.

위젯의 앵커 및 오프셋 파라미터를 설정할 때 디바이스 화면 크기와 종횡비의 차이를 고려하는 것이 중요합니다. 뷰포트 밖으로 위젯을 이동하지 않아야 합니다. 일부 화면 크기에 대한 앵커 설정이 부적절한 경우 발생할 수 있습니다.

아래 이미지는 잘못된 경우를 보여 줍니다. 노란색 상자는 앵커 포인트의 위치를 표시합니다. 이미지가 뷰포트에서 벗어납니다.

앵커 위치를 오른쪽 하단으로 설정합니다.

이 설정을 사용하면 화면이 잘리지 않고 이미지가 뷰포트 내부로 이동되는 것을 방지할 수 있습니다. 아래 이미지로 확인할 수 있습니다. 노란색 상자는 앵커 포인트 위치를 표시합니다.

이 예제는 앵커 위치를 어떻게 정하는지, 그 위치가 화면 크기에 따라 위젯의 위치에 어떻게 영향을 끼치는지를 나타냅니다. 앵커 메달의 추가 옵션을 통해 다양한 화면 크기에 대한 위젯의 반응을 설정할 수 있습니다(수동 앵커 섹션 참고).

프리셋 앵커

프리셋 앵커는 위젯에 대한 앵커 포인트 세팅의 가장 일반적인 방법입니다. 이를 통해 UI 위젯의 위치를 설정하는 데 필요한 대부분의 사항을 충족할 수 있습니다.

디테일 패널의 앵커 드롭다운 창에서 프리셋을 선택합니다. 각 프리셋은 앵커 포인트 위치를 결정합니다. 은색 상자는 이 위치를 표시합니다.

예를 들어, 필요한 위젯에 대해 중앙/중앙 프리셋 앵커 옵션을 선택합니다.

또한 앵커 메달은 여러 컴포넌트로 분할되면 앵커 메달의 프리셋 스트레칭 방법이 있습니다.

뷰포트 크기에 맞게 무언가를 늘이고자 할 때 유용합니다 (아래 참고).

여기서는 캔버스 하단을 따라 가로로 늘어나도록 하는 앵커 배치를 선택했습니다.

스트레칭은 앵커 메달이 하나가 아닌 두 조각으로 나뉘는 것으로 반영됩니다.

핀 중 하나를 드래그하여 앵커 메달을 분할할 수 있습니다.

이전에 설명한 대로 앵커 세팅이 설정된 프로그레스 바가 아래처럼 나타납니다.

뷰포트 종횡비가 다른 경우 다음과 같이 보일 수도 있습니다.

수동 앵커

프리셋 사용에 추가로, 위젯 앵커를 달고자 하는 곳에 앵커 메달을 수동으로 배치할 수도 있습니다. 이는 한 위젯의 앵커를 다른 위젯을 기준으로 달고자 할 때 특히나 유용한데, 그 예제는 다음과 같습니다.

위 그림에서, 다른 캔버스 패널 안에 배치된 캔버스 패널 내 프로그레스 바 위젯 옆에 이미지 위젯이 있습니다. 이미지/프로그레스 바가 들어있는 캔버스 패널의 앵커는 화면 좌상단 구석으로 되어 있습니다. 이런 경우의 예라면, 생명력 바 옆에 플레이어 캐릭터 이미지를 들 수 있습니다.

아래는 (표시되지는 않았지만 이미지 포함) 프로그레스 바의 앵커가 캔버스 패널 좌상단으로 되어있습니다.

프로그레스 바가 늘어는 나되 오른편에서 고정된 간격을 유지하고 일정량만큼 밖으로 뻗어나가게 만들고 싶다 칩시다. 그럴 때는 앵커 메달의 중앙 왼쪽 부분을 아래와 같이 당겨 나눠놓으면 됩니다.

이제 아래 그림에서 캔버스 패널의 오른편을 늘이면 프로그레스 바는 늘어나되 오른편에서 일정한 간격은 유지하고 중앙쪽 바깥으로 뻗어나가는 것을 볼 수 있습니다.

이제 위젯이 들어있는 캔버스 패널의 크기를 조정하려 하니까 문제가 생깁니다. 이미지 위젯이 처음 설정했던 위치에 그대로 (또는 바랬던 것처럼 프로그레스 바 옆에) 있지 않는 것입니다.

이미지의 앵커를 그것이 들어있는 캔버스 패널의 좌상단 구석에 유지하는 대신, 수동으로 옮겨 새 앵커 지점을 설정할 수 있습니다.

위에서, 앵커를 프로그레스 바 자체의 좌상단 구석으로 옮겼습니다. 즉 이제 두 위젯이 들어있는 캔버스 패널의 크기를 조절하면...

이미지 위젯이 프로그레스 바와 고정된 간격을 유지합니다. 하지만 또다른 문제가 있는데, 캔버스 패널을 왼쪽으로 밀면...

이미지가 왼편에서 고정된 위치에 남아있도록 거리를 설정하지 않았기에 이미지가 잘립니다. 이럴땐 앵커 메달을 나눠주면 됩니다.

위에서 앵커 지점, 프로그레스 바에서 이미지를 얼마나 멀리 확장시킬지, 왼편의 여백까지도 설정했습니다. 이제 크기를 조절해 보면...

이미지 왼편/오른편의 여백이 딱 맞게 유지됩니다만, 위/아래는 어떤가요? 캔버스 패널을 아래로 잡아당기니까, 이미지가 프로그레스 바 중앙에 더이상 맞지 않습니다.

앵커 메달을 한 번 더 조정해 주면 고칠 수 있습니다. 여기서는 프로그레스 바를 기준으로 이미지를 상/하단에서 얼마만큼 밀어줄 것인지 설정했습니다.

이제 캔버스 패널 크기를 어느 방향으로 조절해도, 이미지의 크기와 위치가 마찬가지로 늘어나는 프로그레스 바를 기준으로 잘 유지됩니다.