Autolayout in iOS

Lena·2021년 2월 20일

Layout

인터페이스의 layout을 결정하는 것.
layout을 설정하는 방법으로 크게 3가지가 있다.

Frame-Based
Autoresizing masks
Auto Layout

Frame Based

모든 뷰에 대해 개별적인 설정이 필요하다는 단점이 있다.

let myView = UIView()
override func viewDidLoad() {
    myView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
}

Autolayout

객체 간의 제약 조건으로 layout을 결정하는 것.
스토리보드에서 작업하는 것과 코드로 구현하는 방법이 있는데, 다음은 layout anchor를 이용하여 코드로 autolayout을 잡아준 예제이다.

let myView = UIView()

override func viewDidLoad() {
    super.viewDidLoad()
        
    myView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(myView) // 반드시 오토레이아웃 잡기 전에 서브뷰 해줘야 한다.
        
    // constraint
    myView.topAnchor.constraint(equalTo: numberOfPlayersSegmentedControl.bottomAnchor,
                                                         constant: 20).isActive = true
    myView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor,
                                                             constant: 20).isActive = true
    myView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor,
                                                              constant: -20).isActive = true
}

Instance Property
translatesAutoresizingMaskIntoConstraints
A Boolean value that determines whether the view’s autoresizing mask is translated into Auto Layout constraints.

코드로 제약조건을 주기 전에 translatesAutoresizingMaskIntoConstraints를 false로 설정해야 하는데, 그 이유는 코드로 view를 생성했을 경우 기본 true로 설정되어 있고, 그럴 경우에는 view에 제약조건을 추가로 줄 수 없기 때문이다.
따라서, view에 동적으로 autolayout을 주고 싶다면 이 프로퍼티의 값을 반드시 false로 설정해야 한다.

Constraint

오토레이아웃은 기본적으로 선형방정식의 형태로 제약사항을 설정한다.

FirstItem.Attribute = SecondItem.Attribute + Constant

Attribute

top
bottom
leading
trailing

safeAreaLayoutGuide

위의 코드 예제에서 사용된 safeAreaLayoutGuide는 iOS 11 부터 사용 가능하다.
iOS 11 미만의 버전에서는 top/bottomLayoutGuide를 사용한다.
safeAreaLayoutGuide는 navigation 또는 status bars 아래에 표시되는 content area의 크기를 알려준다.

UILayoutPriority

UILayoutPriority로 제약조건의 우선순위를 설정할 수 있다. 1에서 1000까지의 값을 가질 수 있지만 Required는 1000, DefaultHigh는 750, DefaultLow는 250의 값으로 사용하는 것이 권장된다. 세 가지 우선순위로 제약조건이 걸려있는 경우 가장 높은 1000부터 우선순위를 가지며, 1000이 없어진 경우 750, 750이 없어진 경우 250, 순차적으로 제약조건이 연결된다.

isActive

Constraint에 isActive 프로퍼티 값으로 제약조건을 활성/비활성화 할 수 있다.

IntrinsicContentSize

UILabel, UIButton, UIImageView 등 대부분의 뷰에는 컨텐츠 고유의 사이즈가 있다.
그래서 레이블을 만들 때 직접 너비와 높이를 지정하지 않아도 고유 사이즈(Intrinsic size)가 있어 자동으로 설정된다.
but, 컨테이너 역할을 하는 일부 뷰들은 고유 사이즈가 없기 때문에 가령, UIView를 넣고 오토 레이아웃을 중앙으로 잡으면 오류가 발생한다.

Content Hugging & Compression Resistance

Content Hugging은 고유 사이즈의 최대 크기에 제한을 두는 것.
반면, Compression Resistance는 최소 크기에 제한을 두는 것이다.
즉 Content Hugging와 Compression Resistance에 우선순위를 주어서 고유 사이즈보다 작아질수도, 커질 수도 있다.

✔️예제