Xamarin.iOS의 프로그래밍 방식 레이아웃 제약 조건
이 가이드에서는 iOS 디자이너에서 만드는 대신 C# 코드에서 iOS 자동 레이아웃 제약 조건을 사용하는 방법에 대해 설명합니다.
자동 레이아웃("적응형 레이아웃"이라고도 함)은 반응형 디자인 방식입니다. 각 요소의 위치가 화면의 한 지점으로 하드 코딩되는 과도 레이아웃 시스템과 달리 자동 레이아웃은 디자인 화면에서 다른 요소에 상대적인 요소의 위치인 관계에 관한 것입니다. 자동 레이아웃의 핵심은 화면의 다른 요소 컨텍스트에서 요소 또는 요소 집합의 배치를 정의하는 제약 조건 또는 규칙의 개념입니다. 요소는 화면의 특정 위치에 연결되지 않으므로 제약 조건은 다양한 화면 크기 및 장치 방향에서 잘 보이는 적응형 레이아웃을 만드는 데 도움이 됩니다.
일반적으로 iOS에서 자동 레이아웃을 사용하는 경우 Xcode의 인터페이스 작성기를 사용하여 UI 항목에 레이아웃 제약 조건을 그래픽으로 배치합니다. 그러나 C# 코드에서 제약 조건을 만들고 적용해야 하는 경우가 있을 수 있습니다. 예를 들어 동적으로 만든 UI 요소를 UIView사용하는 경우 .
이 가이드에서는 Xcode의 인터페이스 작성기에서 그래픽으로 만드는 대신 C# 코드를 사용하여 제약 조건을 만들고 사용하는 방법을 보여 줍니다.
프로그래밍 방식으로 제약 조건 만들기
위에서 설명한 대로 일반적으로 iOS 디자이너에서 자동 레이아웃 제약 조건을 사용합니다. 프로그래밍 방식으로 제약 조건을 만들어야 하는 경우 다음 세 가지 옵션 중에서 선택할 수 있습니다.
- 레이아웃 앵커 - 이 API는 제한되는 UI 항목의 앵커 속성(예:
BottomAnchorTopAnchor또는HeightAnchor)에 대한 액세스를 제공합니다. - 레이아웃 제약 조건 - 클래스를 사용하여
NSLayoutConstraint직접 제약 조건을 만들 수 있습니다. - 시각적 서식 언어 - 제약 조건을 정의하는 메서드와 같은 ASCII 아트를 제공합니다.
다음 섹션에서는 각 옵션을 자세히 설명합니다.
레이아웃 앵커
클래스를 NSLayoutAnchor 사용하면 제한되는 UI 항목의 앵커 속성을 기반으로 제약 조건을 만들기 위한 흐름 인터페이스가 있습니다. 예를 들어 보기 컨트롤러의 위쪽 및 아래쪽 레이아웃 안내선은 , BottomAnchor 및 앵커 속성을 노출TopAnchor하고 HeightAnchor 보기는 에지, 가운데, 크기 및 기준 속성을 노출합니다.
Important
iOS 뷰에는 앵커 속성의 표준 집합 외에도 해당 속성과 ReadableContentGuide 속성이 LayoutMarginsGuides 포함됩니다. 이러한 속성은 뷰의 여백과 읽을 수 있는 콘텐츠 가이드를 각각 사용하기 위한 개체를 노출 UILayoutGuide 합니다.
Layout Anchors는 읽기 쉽고 간단한 형식으로 제약 조건을 만드는 몇 가지 방법을 제공합니다.
- ConstraintEqualTo - 선택적으로 제공된
constant오프셋 값이 있는first attribute = second attribute + [constant]관계를 정의합니다. - ConstraintGreaterThanOrEqualTo - 선택적으로 제공된
constant오프셋 값이 있는first attribute >= second attribute + [constant]관계를 정의합니다. - ConstraintLessThanOrEqualTo - 선택적으로 제공된
constant오프셋 값이 있는first attribute <= second attribute + [constant]관계를 정의합니다.
예시:
// Get the parent view's layout
var margins = View.LayoutMarginsGuide;
// Pin the leading edge of the view to the margin
OrangeView.LeadingAnchor.ConstraintEqualTo (margins.LeadingAnchor).Active = true;
// Pin the trailing edge of the view to the margin
OrangeView.TrailingAnchor.ConstraintEqualTo (margins.TrailingAnchor).Active = true;
// Give the view a 1:2 aspect ratio
OrangeView.HeightAnchor.ConstraintEqualTo (OrangeView.WidthAnchor, 2.0f);
일반적인 레이아웃 제약 조건은 단순히 선형 식으로 표현할 수 있습니다. 다음 예제를 참조하세요.
레이아웃 앵커를 사용하여 다음 C# 코드 줄로 변환됩니다.
PurpleView.LeadingAnchor.ConstraintEqualTo (OrangeView.TrailingAnchor, 10).Active = true;
C# 코드의 부분은 다음과 같이 수식의 지정된 부분에 해당합니다.
| 방정식 | 코드 |
|---|---|
| 항목 1 | PurpleView |
| 특성 1 | LeadingAnchor |
| 관계 | ConstraintEqualTo |
| 승수 | 기본값은 1.0이므로 지정되지 않음 |
| 항목 2 | OrangeView |
| 특성 2 | TrailingAnchor |
| 상수 | 10.0 |
지정된 레이아웃 제약 조건 수식을 해결하는 데 필요한 매개 변수만 제공하는 것 외에도 각 Layout Anchor 메서드는 전달된 매개 변수의 형식 보안을 적용합니다. 따라서 다른 가로 앵커 형식 및 승수와 같은 LeadingAnchorTrailingAnchor 가로 제약 조건 앵커는 크기 제약 조건에만 제공됩니다.
레이아웃 제약 조건
C# 코드를 직접 생성하여 NSLayoutConstraint 자동 레이아웃 제약 조건을 수동으로 추가할 수 있습니다. Layout Anchors를 사용하는 것과 달리 정의된 제약 조건에 영향을 주지 않더라도 모든 매개 변수에 대한 값을 지정해야 합니다. 결과적으로 읽기 어려운 상용구 코드를 생성하게 됩니다. 예시:
//// Pin the leading edge of the view to the margin
NSLayoutConstraint.Create (OrangeView, NSLayoutAttribute.Leading, NSLayoutRelation.Equal, View, NSLayoutAttribute.LeadingMargin, 1.0f, 0.0f).Active = true;
//// Pin the trailing edge of the view to the margin
NSLayoutConstraint.Create (OrangeView, NSLayoutAttribute.Trailing, NSLayoutRelation.Equal, View, NSLayoutAttribute.TrailingMargin, 1.0f, 0.0f).Active = true;
//// Give the view a 1:2 aspect ratio
NSLayoutConstraint.Create (OrangeView, NSLayoutAttribute.Height, NSLayoutRelation.Equal, OrangeView, NSLayoutAttribute.Width, 2.0f, 0.0f).Active = true;
여기서 열거형은 NSLayoutAttribute 뷰의 여백에 대한 값을 정의하고 , Right및 열거형과 같은 Left속성에 해당 LayoutMarginsGuide 하며 NSLayoutRelationBottom, Top 열거형은 지정된 특성 Equal간에 만들어지는 관계를 정의 LessThanOrEqual 합니다GreaterThanOrEqual.
Layout Anchor API NSLayoutConstraint 와 달리 생성 메서드는 특정 제약 조건의 중요한 측면을 강조 표시하지 않으며 제약 조건에 대해 수행되는 컴파일 시간 검사 없습니다. 따라서 런타임에 예외를 throw하는 잘못된 제약 조건을 쉽게 생성할 수 있습니다.
시각적 형식 언어
Visual Format Language를 사용하면 생성되는 제약 조건의 시각적 표현을 제공하는 문자열과 같은 ASCII 아트를 사용하여 제약 조건을 정의할 수 있습니다. 다음과 같은 장점과 단점이 있습니다.
- 시각적 형식 언어는 유효한 제약 조건만 생성합니다.
- 자동 레이아웃은 Visual Format Language를 사용하여 콘솔에 제약 조건을 출력하므로 디버깅 메시지는 제약 조건을 만드는 데 사용되는 코드와 유사합니다.
- Visual Format Language를 사용하면 매우 컴팩트한 식을 사용하여 동시에 여러 제약 조건을 만들 수 있습니다.
- Visual Format Language 문자열에 대한 컴파일 쪽 유효성 검사가 없으므로 런타임에만 문제를 검색할 수 있습니다.
- 시각적 형식 언어는 완전성에 대한 시각화를 강조하기 때문에 일부 제약 조건 형식을 사용하여 만들 수 없습니다(예: 비율).
Visual Format Language를 사용하여 제약 조건을 만들 때 다음 단계를 수행합니다.
NSDictionary뷰 개체 및 레이아웃 안내선과 형식을 정의할 때 사용할 문자열 키를 포함하는 항목을 만듭니다.- 필요에 따라 제약 조건에 대한 상수 값으로 사용되는 키 및 값 집합(
NSNumber)을 정의하는 값을 만듭니NSDictionary다. - 항목의 단일 열 또는 행을 레이아웃하는 서식 문자열을 만듭니다.
- 클래스의
FromVisualFormat메서드를NSLayoutConstraint호출하여 제약 조건을 생성합니다. - 클래스의
ActivateConstraints메서드를NSLayoutConstraint호출하여 제약 조건을 활성화하고 적용합니다.
예를 들어 Visual Format Language에서 선행 제약 조건과 후행 제약 조건을 모두 만들려면 다음을 사용할 수 있습니다.
// Get views being constrained
var views = new NSMutableDictionary ();
views.Add (new NSString ("orangeView"), OrangeView);
// Define format and assemble constraints
var format = "|-[orangeView]-|";
var constraints = NSLayoutConstraint.FromVisualFormat (format, NSLayoutFormatOptions.AlignAllTop, null, views);
// Apply constraints
NSLayoutConstraint.ActivateConstraints (constraints);
시각적 형식 언어는 기본 간격을 사용할 때 항상 부모 뷰의 여백에 연결된 0포인트 제약 조건을 만들므로 이 코드는 위에 제시된 예제와 동일한 결과를 생성합니다.
한 줄에 여러 자식 보기와 같은 더 복잡한 UI 디자인의 경우 시각적 서식 언어는 가로 간격과 세로 맞춤을 모두 지정합니다. 위의 AlignAllTopNSLayoutFormatOptions 예제에서와 같이 행 또는 열의 모든 보기를 위쪽에 맞춥니다.
일반적인 제약 조건 및 시각적 형식 문자열 문법을 지정하는 몇 가지 예제는 Apple 의 Visual Format Language 부록 을 참조하세요.
요약
이 가이드에서는 iOS 디자이너에서 그래픽으로 만드는 것과 달리 C#에서 자동 레이아웃 제약 조건을 만들고 사용하는 방법을 설명했습니다. 먼저 레이아웃 앵커(NSLayoutAnchor)를 사용하여 자동 레이아웃을 처리하는 방법을 살펴보았습니다. 다음으로 레이아웃 제약 조건(NSLayoutConstraint)을 사용하는 방법을 보여 줍니다. 마지막으로 자동 레이아웃에 대한 시각적 형식 언어를 사용하여 표시했습니다.