[iOS] AutoLayout을 코드로 작성하는 방법

Auto Layout을 코드로 작성할 수 있는 방법에는 3가지가 있어요.

[1] Layout Anchor를 사용하는 방법

[2] NSLayoutConstraint class를 직접 이용하는 방법

[3] Visual Format Language를 사용하는 방법

 

각각을 하나씩 장단점과 함께 살펴볼까요?

 

Layout Anchor

 

c

저한테 가장 익숙한 방법은 제일 첫번째인 layout anchor를 사용하는 방법이에요.

제약을 주고 싶은 item의 anchor property에 접근해서 제약을 정의하는 방식입니다.

 

장점으로는,

1. 간결한 작성 방식으로 인한 뛰어난 가독성

2. type safety를 지원

이 있습니다.

 

두번째 방법인 NSLayoutConstraint class를 사용하면 constraint instance를 생성할 때

직접적으로 제약에 관여하지 않는 parameter까지도 모두 채워넣어서 가독성이 떨어져요.

반면 layout anchor는 필요한 것만 간결하게 쓰기 때문에 가독성이라는 장점을 갖게 됩니다.

 

type safety를 지원한다는 말이 조금 생소하게 들릴 수 있을 것 같아요.

예를 들어서 설명하면 더 쉽게 이해하실 수 있을거에요.

현재 myView의 leadingAnchor를 정의하고 있다고 가정해볼게요,

leadingAnchor, trailingAnchor는 수평적인 제약사항들이에요.

그렇게 때문에 아래와 같이 topAnchor와 관계를 정할 수는 없겠죠?

myView.leadingAnchor.constraint(equalTo: mySuperview.trailingAnchor)

이렇게 type safety를 확인해준다는 장점이 있습니다.

 

NSLayoutConstraint

이 방법은 NSLayoutConstraint class의 convenience method를 통해 직접 생성하는 방식이에요.

모든 constraint는 한 줄의 방정식으로 정의할 수 있는 것 아시죠?

convenience method를 통해 채워 넣어야 하는 parameter들이 그 방정식에 포함 되는 하나하나의 요소들이에요.

예를 들어볼까요?

NSLayoutConstraint(item: myView, 
				   attribute: .leading, 
                   relatedBy: .equal, 
                   toItem: view, 
                   attribute: .leadingMargin, 
                   multiplier: 1.0, 
                   constant: 0.0).isActive = true

단점이 명확하게 보이는 방법 같지 않나요? 이 방식의 단점은,

1. layout에 관여하지 않는 parameter도 모두 값을 지정해주어야 함

2. 그래서 boilerplate 코드가 많아지고, 가독성이 떨어짐

3. layout anchor 방식과는 다르게, 특정 제약사항의 조건들을 확인시켜 주지 않아 오류에 취약함 (runtime이 되어서야 알 수 있음)

이러한 단점들 때문에, 만약 개발하고 있는 제품이 iOS 8이하에서도 지원되어야 한다거나, OS X v10.10 이전이 아니라면 모두 layout anchor API를 사용하도록 Apple 에서도 권장하고 있답니다!

Visual Format Language

마지막 방법은 constraint를 정의하기 위해 visual foromat language를 활용하는 방법이에요.

저도 사용해본 적은 없는데 아주 처음보는 친구는 아니에요.

왜냐하면 constraint 관련해서 문제가 생기면 xcode의 콘솔 창에 debugging message로 비슷한 형태가 보이거든요.

장점은,

1. 시각적으로 정의하기 때문에 표현성이 좋음

2. 굉장히 간결한 표현 방식이라 한 번에 여러개의 제약을 정의할 수 있음

 

예를 들어서 아래와 같이 정의한 format string은

myView를 superview의 leading과 trailing constraint에 constant 값 0으로 딱 붙이겠다는 뜻이에요.

상당히 직관적이고 이해도 쉽죠?

거기에 한 줄로 leadingConstraint 와 trailingConstraint까지 정의할 수 있었어요.

let views = ["myView"; myView]
let formatString = "|-[myView]-|"

 

하지만 단점은,

1. 표현성을 강조한 언어라 모든 제약사항을 정의할 수 없음

 

예를 들어 "A view의 가로:세로 = 1:2 로 하고 싶다"를 정의할 때 사용하는 aspect ratio를 표현할 방법이 없어요.

 

출처

Programmatically Creating Constraints