Xamarin.ios의 레이아웃 옵션Layout Options in Xamarin.iOS

뷰의 크기를 조정 하거나 회전할 때 레이아웃을 제어 하는 두 가지 메커니즘이 있습니다.There are two different mechanisms for controlling the layout when a view is resized or rotated:

  • 자동 크기 조정 – 디자이너의 자동 크기 조정 inspector는 AutoresizingMask 속성을 설정 하는 방법을 제공 합니다.Autosizing – The Autosizing inspector in the designer provides a way to set the AutoresizingMask properties. 이렇게 하면 해당 컨테이너의 가장자리에 컨트롤을 고정 하거나 크기를 수정할 수 있습니다.This will let a control be anchored to the edges of their container and/or fix their size. 자동 크기 조정는 모든 버전의 iOS에서 작동 합니다.Autosizing works in all versions of iOS. 자세한 내용은 아래에 자세히 설명 되어 있습니다.This is described in more detail below
  • Auto Layout – UI 컨트롤의 관계를 세부적으로 제어할 수 있는 iOS 6에 도입 된 기능입니다.Auto Layout – A feature, introduced in iOS 6 that allows fine-grained control over the relationships of the UI controls. 디자인 화면에서 다른 요소를 기준으로 요소의 위치를 제어할 수 있습니다.It will allow control of the positions of elements relative to other elements on the design surface. 이 항목은 Xamarin IOS Designer를 사용 하 여 자동 레이아웃 가이드에 자세히 설명 되어 있습니다.This topic is covered in more detail in the Auto Layout with the Xamarin iOS Designer guide.

자동 크기 조정Autosizing

장치를 회전 하 고 방향이 변경 되는 경우와 같이 사용자가 창의 크기를 조정 하면 시스템은 자동 크기 조정 규칙에 따라 해당 창 내에서 뷰의 크기를 자동으로 조정 합니다.When a user resizes a window, such as when the device is rotated and the orientation changes, the system will automatically resize the Views inside that window according to their autosizing rules. 이러한 규칙은 아래 그림과 같이 C# iOS 디자이너의 Properties Pad 또는UIViewAutoresizingMask속성을 사용 하 여 설정할 수 있습니다.These rules can be set in C# using the AutoresizingMask property of the UIView or in the Properties Pad of the iOS Designer, as illustrated below:

컨트롤을 선택 하면 컨트롤의 위치 및 크기를 수동으로 지정할 수 있을 뿐만 아니라 자동 크기 조정 동작을 선택할 수 있습니다.When a control is selected, this allows you to manually specify the location and dimensions of the control, as well as choosing Autosizing behavior. 아래 스크린샷에 표시 된 것 처럼 자동 크기 조정 컨트롤의 스프링 및 struts를 사용 하 여 선택한 뷰의 부모에 대 한 관계를 정의할 수 있습니다.As illustrated in the screenshot below, we can use the springs and struts in the autosizing control to define the selected View's relationship to it's parent:

스프링 을 조정 하면 부모 뷰의 너비나 높이를 기준으로 뷰의 크기가 조정 됩니다.Adjusting a spring will cause the view to resize based on the width or height of its parent view. Strut 를 조정 하면 뷰가 해당 특정 가장자리에서 자신과 부모 뷰의 일정 한 거리를 유지 합니다.Adjusting a strut will make the view maintain a constant distance between itself and its parent view, on that particular edge.

이러한 설정은 코드에서 설정할 수도 있습니다.These settings can also be set in code:

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

자동 크기 조정 설정을 테스트 하려면 프로젝트의 옵션에서 지원 되는 다른 장치 방향을 사용 하도록 설정 합니다.To test the Autosizing settings, enable different Supported Device Orientations in the project’s options:

코드 뒤에 다음 코드를 사용할 수 있습니다. 이렇게 하면 두 텍스트 컨트롤이 가로로 크기가 조정 됩니다.In the code behind we can use the following code, which causes the two text controls to resize horizontally:

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

디자이너를 사용 하 여 컨트롤을 조정할 수도 있습니다.We can also adjust the controls using the Designer. 아래에 표시 된 대로 struts를 선택 하면 이미지는 보기의 아래쪽에서 잘리지 않고 오른쪽에 맞춰집니다.Selecting the struts as exhibited below will cause the image to stay right-aligned without being clipped off the bottom of the view:

이러한 스크린샷은 화면이 회전 될 때 컨트롤의 크기를 조정 하거나 위치를 변경 하는 방법을 보여 줍니다.These screenshots show how the controls resize or reposition themselves when the screen is rotated:

텍스트 뷰와 텍스트 필드는 모두 FlexibleWidth 설정으로 인해 왼쪽과 오른쪽 여백이 동일 하 게 유지 됩니다.Notice that the text view and text field both stretch to keep the same left and right margins, due to the FlexibleWidth setting. 이미지의 위쪽과 왼쪽 여백이 유연 합니다. 즉, 화면을 회전할 때 이미지를 보기에 유지 합니다.The image has the top and left margin flexible, which means it preserves the bottom and right margins – keeping the image in view when the screen is rotated. 일반적으로 복잡 한 레이아웃은 사용자 인터페이스를 일관 되 게 유지 하기 위해 표시 되는 모든 컨트롤에 이러한 설정을 조합 하 여 사용 해야 하며, 회전 또는 기타 크기 조정 이벤트로 인해 뷰의 경계가 변경 될 때 컨트롤이 겹치지 않도록 합니다.Complex layouts typically require a combination of these settings on every visible control to keep the user-interface consistent and to prevent controls from overlapping when the view’s bounds change (due to rotation or other resizing event).