다음을 통해 공유


Xamarin.iOS의 레이아웃 옵션

보기의 크기를 조정하거나 회전할 때 레이아웃을 제어하는 두 가지 메커니즘이 있습니다.

  • 자동 크기 조정 – 디자이너의 자동 크기 조정 검사기에서 속성을 설정하는 AutoresizingMask 방법을 제공합니다. 이렇게 하면 컨트롤이 컨테이너의 가장자리에 고정되거나 크기가 수정됩니다. 자동 크기 조정은 모든 버전의 iOS에서 작동합니다. 이 내용은 아래에서 자세히 설명합니다.
  • 자동 레이아웃 – UI 컨트롤의 관계를 세밀하게 제어할 수 있는 iOS 6에 도입된 기능입니다. 디자인 화면에서 다른 요소를 기준으로 요소의 위치를 제어할 수 있습니다. 이 항목은 Xamarin iOS 디자이너 가이드를 사용하여 자동 레이아웃에서 자세히 설명합니다.

자동 크기 조정

사용자가 장치를 회전하고 방향이 변경되는 경우와 같이 창의 크기를 조정하면 시스템은 자동 크기 조정 규칙에 따라 해당 창 내의 보기 크기를 자동으로 조정합니다. 아래 그림과 같이 iOS 디자이너의 UIView Properties Pad 또는 속성 패드 속성을 사용하여 AutoresizingMask C#에서 이러한 규칙을 설정할 수 있습니다.

스크린샷은 I O S 디자이너의 Properties Pad를 보여줍니다.

컨트롤을 선택하면 자동 크기 조정 동작을 선택할 뿐만 아니라 컨트롤의 위치와 차원을 수동으로 지정할 수 있습니다. 아래 스크린샷에 설명된 것처럼 자동 크기 조정 컨트롤의 스프링 및 스트럿을 사용하여 선택한 뷰의 상위 뷰 관계를 정의할 수 있습니다.

스크린샷은 I O S 디자이너의 Properties Pad에서 자동 크기 조정 컨트롤을 보여줍니다.

스프링조정하면 부모 보기의 너비 또는 높이에 따라 보기의 크기가 조정됩니다. 스트럿조정하면 해당 특정 가장자리에서 뷰가 기본자체와 부모 뷰 사이의 상수 거리를 얻을 수 있습니다.

이러한 설정은 코드에서 설정할 수도 있습니다.

textfield1.Frame = new RectangleF(15, 277, 79, 27);
textfield1.AutoresizingMask = UIViewAutoresizing.FlexibleRightMargin | UIViewAutoresizing.FlexibleBottomMargin;

자동 크기 조정 설정을 테스트하려면 프로젝트의 옵션에서 지원되는 다양한 디바이스 방향을 사용하도록 설정합니다.

자동 크기 조정 설정

뒤에 있는 코드에서는 두 텍스트 컨트롤의 크기를 가로로 조정하는 다음 코드를 사용할 수 있습니다.

textview1.AutoresizingMask = UIViewAutoresizing.FlexibleWidth;
textfield1.AutoresizingMask = UIViewAutoresizing.FlexibleWidth;
imageview1.AutoresizingMask = UIViewAutoresizing.FlexibleTopMargin | UIViewAutoresizing.FlexibleLeftMargin;

디자이너를 사용하여 컨트롤을 조정할 수도 있습니다. 아래에 표시된 대로 스트럿을 선택하면 보기 아래쪽에서 잘리지 않고 이미지가 오른쪽 맞춤 상태로 유지됩니다.

왼쪽 및 아래쪽이 선택된 자동 크기 조정 컨트롤을 보여 줍니다.

다음 스크린샷은 화면이 회전될 때 컨트롤의 크기를 조정하거나 위치를 변경하는 방법을 보여 줍니다.

스크린샷은 텍스트와 그래픽이 조정된 세로 및 가로로 모바일 디바이스 디스플레이를 보여줍니다.

설정으로 인해 텍스트 보기와 텍스트 필드가 모두 늘이면 왼쪽 여백과 오른쪽 여백이 동일하게 유지됩니다 FlexibleWidth . 이미지는 위쪽 및 왼쪽 여백이 유연하므로 화면이 회전할 때 이미지를 보기에 유지하여 아래쪽 및 오른쪽 여백을 유지합니다. 복잡한 레이아웃은 일반적으로 사용자 인터페이스를 일관성 있게 유지하고 보기의 범위가 변경(회전 또는 기타 크기 조정 이벤트로 인해)될 때 컨트롤이 겹치지 않도록 하기 위해 표시되는 모든 컨트롤에서 이러한 설정의 조합이 필요합니다.