소개

이 기사는 Xamarin Advent Calendar 2018의 10일째로 Xamarin.iOS에서 AutoLayout을 코드에서 작성할 때 유용한 라이브러리를 소개합니다.

iOS 앱 개발에서 사용자 인터페이스 만들기

여러분은 iOS 앱 개발에서 어떻게 사용자 인터페이스를 만들고 있습니까?
Storyboard를 Xcode로 편집할 때는 인터페이스 빌더 , Visual Studio에서 편집하는 경우는 iOS Designer

Storyboard를 사용하는 단점

Storyboard를 사용하는 개발은 다음과 같은 단점이 있다고 인식합니다.

팀 개발에서 Git 충돌이 거의 확실하게 발생하여 XML을 편집하는 것보다 Interface Builder에서 다시 작성하는 것이 좋습니다.

Dependency Injection (Initializer Injection)을 할 수 없다 (Stotyboard가 아닌 xib라면 가능)

소스 코드와의 관계를 잘 모르겠습니다

Git의 충돌은 심각한 문제로 '한 화면 한 Storyboard'라든지 'Storyboard를 편집하는 사람은 혼자만' 등으로 운용하고 있는 팀도 있다고 들었습니다.

Storyboard를 사용하지 않고 소스 코드로 사용자 인터페이스 만들기

Storyboard에 단점을 느끼고 소스 코드로 사용자 인터페이스를 만드는 방법을 채용하는 사람도 있습니다.
Microsfot Docs에는 "Xamarin.iOS에서 코드로 iOS 사용자 인터페이스 만들기"이라는 설명 페이지가 있습니다.

Auto Layout을 소스 코드로 작성하면

View의 위치를 ​​AutoLayout으로 쓰면 다음과 같이 됩니다.

translatedLabel.HeightAnchor.ConstraintEqualTo(20).Active = true;
translatedLabel.CenterXAnchor.ConstraintEqualTo(View.CenterXAnchor).Active = true;
translatedLabel.TopAnchor.ConstraintEqualTo(translateButton.BottomAnchor, 20).Active = true;
translatedLabel.LeftAnchor.ConstraintEqualTo(View.LayoutMarginsGuide.LeftAnchor).Active = true;
translatedLabel.RightAnchor.ConstraintEqualTo(View.LayoutMarginsGuide.RightAnchor).Active = true;

이 금액으로 View의 한 부분입니다.
하나의 화면은 몇개의 View의 집합에 의한 것으로, 제약은 많이 있지요.
다음은 번역 앱의 화면 구성 예와 그 제약입니다.

더 간결하게 쓰고 싶다

AutoLayout 코딩을 지원하는 라이브러리가 있습니다.

Cirrious.FluentLayout

htps : // 기주 b. 이 m/Fぅ엔 tぁ하자 t/ 확실히하자 s. F 엔 t ぁ t

Masonry

htps : // 기주 b. 코 m / 마린 / 아 마린 코 m 포넨 ts / t Ree / Ma S r / Eo S / Mason ry

PureLayout.Net

htps : // 기주 b. 코 m/맘보네/뿌레아 t. 네 t

SnapKit.Xamarin

htps : // 기주 b. 이 m/Ty ぇ리안/S인 pt. 마린

Xamarin.iOS를 지원하는 지원 라이브러리 중에서 Cirrious.FluentLayout이 가장 많이 사용되는 것 같습니다.
Cirrious.FluentLayout을 사용하면 이전 코드를 다음과 같이 작성할 수 있습니다.

View.AddConstraints( 
  translatedLabel.Height().EqualTo(20),
  translatedLabel.WithSameCenterX(View),
  translatedLabel.AtTopOf(translateButton, 20),
  translatedLabel.ToLeftMargin(View),
  translatedLabel.ToRightMargin(View)
);

상당히 보기 쉬워진 것이 아닐까요.

AutoLayout을 코드로 작성할 때의 주의점

UIKit API 사양을 변경할 때 코드 수정 필요

Interface Builder를 사용하면 자동으로 대응할 수 있는 경우가 많다

그러나 지원 라이브러리가 즉시 대응하면 부담이 줄어 듭니다

AutoLayout의 제약 위반이 런타임에 만 알 수 있습니다.

Interface Builder를 사용하고 있으면 편집시에 알 수있다

지원 라이브러리 업데이트가 중지되는 위험

기타: Objective-C/Swift에서 사용할 수 있는 지원 라이브러리

Objective-C/Swift용 지원 라이브러리는 여러가지 있습니다.

roberthein/TinyConstraints

nakiostudio/EasyPeasy

SnapKit/SnapKit

PureLayout/PureLayout

robb/Cartography

freshOS/Stevia

Raizlabs/Anchorage

내가 Swift로 코딩 할 때 TinyConstraints을 사용하고 있습니다.

이상입니다.