[iOS] AutoLayout을 코드로 작성하는 기본적인 방법에 대하여

✏️ Auto Layout

오토레이아웃은 뷰의 제약사항을 바탕으로 모든 뷰의 크기와 위치를 동적으로 계산한다. 쉽게 말해서 어떤 화면, 어떤 상황에서도 같은 ‘비율’로 모든 뷰를 나타낼 수 있다는 정도로 생각하면 좋을 것 같다.

코드를 통해, 그리고 인터페이스 빌더에서 GUI를 통해 하는 두 가지 방법이 있다. 어쨌든 두 가지 방법을 다 활용할 줄 알아야한다고 생각한다.

위에서 말 한 제약사항이란 constraints라는 내용으로 Xcode에서 볼 수 있었는데(인터페이스 빌더에서) 이 제약사항들을 기반으로 하여 오토레이아웃을 구현한다고 보면 된다. 그러면 제약사항을 잘 이해하는 것이 오토레이아웃을 잘 구현하는 방법이라고 생각해도 될것이다.

✏️ 제약사항 Constraints

제약은 방적식으로 나타내며, 뷰 스스로 또는 뷰와 뷰 사이의 관계를 속성을 통하여 정의한다.

view1.attr1 = view2.attr2 * multiplier + constant

item.attribute = toItem.attribute * multiplier + constant

위에서 말하는 속성(attribute)은 아래 그림과 같이 Width, Height등의 내용이므로 숙지하고 있어야 할 것이다.

이렇게 정해진 것들만 NSLayoutAttribute로 정의되는데, 정해진 것들 → 열거형으로 정의되어 있다.

이제 위의 방정식을 이용하여 제약사항을 만들어주면 되는데, 이를 만드는 방법은 두 가지가 있다.

1. Anchor를 이용하는 방법
2. NSLayoutConstraint의 인스턴스를 생성하는 방법

→ 필요에 따라 편한것을 사용하면 될 것 같다.

let button: UIButton = UIButton(type: UIButton.ButtonType.custom)
button.translatesAutoresizingMaskIntoConstraints = false

self.view.addSubView(button)

let centerX: NSLayoutConstraint
centerX = button.cenxerXAnchor.constraint(equalTo: self.view.centerXAnchor)

let centerY: NSLayoutConstraint
centerY = NSLayoutConstraint(item: button,
                            attribute: NSLayoutConstraint.Attribute.centerY,
                            relatedBy: NSLayoutConstraint.Relation.equal,
                            toItem: self.view,
                            attribute: NSLayoutConstraint.Attribute.centerY,
                            multiplier: 1,
                            constant: 0)
centerX.isActive = true
centerY.isActive = true

위의 코드에서 centerX, centerY의 제약사항은 다른 두 방식으로 구현해봤다.

어느것을 사용해도 되는 것 같다.(같은 내용을 넣었을 경우 같은 결과가 나왔음) 그러나 Anchor를 이용하는 방법에서는 생성자의 종류가 다소 제한적이라서 원하는 속성을 이용하는 생성자가 존재하지 않는다면, 다른 방법(인스턴스를 사용하는 방법)을 활용해야할 것이다.

마지막으로 위와 같이 제약들을 만들었을 때 여러가지 제약들이 있고, 만약 상충되거나 겹친되면 우선순위를 통해 운선순위가 높은 제약사항을 우선적으로 처리하는 방식으로 구현할 수 있다. 예를 들면 아래와 같다.

centerX = button.cenxerXAnchor.constraint(equalTo: self.view.centerXAnchor)
centerX.priority = UILayoutPriority(rawValue: 50)

centerY = NSLayoutConstraint(item: button,
                            attribute: NSLayoutConstraint.Attribute.centerY,
                            relatedBy: NSLayoutConstraint.Relation.equal,
                            toItem: self.view,
                            attribute: NSLayoutConstraint.Attribute.centerY,
                            multiplier: 1,
                            constant: 0)
                            .priority = UILayoutPriority(rawValue: 500)

이 때 priority는 0~1000 사이의 정수로 표현할 수 있다.(그런데 정의를 보니 Float으로 정의되어있던데... 0~1000 사이의 정수가 아니고 실수 인가..?)

✏️ Visual Format Language

위의 제약사항을 설정하는 방법들은 상당히 길게 코드로 나타날 수 밖에 없다. 그런데 Visual Format Language(VFL)이라는 문자열을 잘 사용하면 간결하게 제약사항을 표현할 수는 있다. 다만 아직 본격적으로 개발을 해 보지 않은 나같은 초보자 입장에서 이런 것을 벌써 익히기보다는..나중에 필요할 때 공부해 보는 것이 더 좋을 것 같다.

그 때 공식문서를 참고하자!