<4주차> 오토레이아웃을 코드로 작성하는 방법은 무엇인가? (3가지)

[namsoo5]

[khyunjiee]

1. NSLayoutConstraint 사용

NSLayoutConstraint.activate([NSLayoutConstraint(item: UIButton, attribute: .centerX, relatedBy: .equal, toItem: UIView, attribute: .centerX, multiplier: 1.0, constant: 0.0), ...])

2. Visual Format Language 사용

NSLayoutConstraint.activate([NSLayoutConstraint.constraints(withVisualFormat: "H:[button(200)]", options: .alignAllCenterX, metrics: nil, views: ["button": button]), ...)

3. Anchor 사용

NSLayoutConstraint.activate([button.centerXAnchor.constraint(equalTo: view.centerXAnchor), ...])

4. 이 외에 SnapKit과 같은 라이브러리를 사용할 수 있다.

[iJoom]

NSLayoutConstraint

제약 기반 레이아웃 시스템에서 충족해야하는 두 사용자 인터페이스(UI) 개체 간의 관계입니다.

item1.attribute1 = multiplier × item2.attribute2 + constant
button2.leading = 1.0 × button1.trailing + 8.0
//다른 아이템과의 관계로서 layout 정의

Anchor

translatesAutoresizingMastIntoConstraints = false
//기존의 오토리사이징마스크와 충돌을 없애기 위해 설정
var constraintY: NSLayoutConstraint
constraintY = button.centerYAnchor.constraint(equalTo: self.view.centerYAnchor)

Visual Format Language (처음 알게 됨)

기호 및 문자열로 레이아웃 관계 표시
Vertical Layout
V:[topField]-10-[bottomField]
Visual Format Guide

[dongminyoon]

1. NSLayoutAnchor 사용
   원래는 NSLayoutConstraint 자체를 사용해서 오토레이아웃을 적용했다. 그러나 가독성도 좋지 않고 사용법이 조금 어려워서 새롭게 Apple에서 내준 방식이다.

2. NSLayoutConstaint 사용
   방법을 보면 복잡하다. 한 눈에 보기 편하지 않다!

convenience init(item view1: Any, 
       attribute attr1: NSLayoutConstraint.Attribute, 
       relatedBy relation: NSLayoutConstraint.Relation, 
          toItem view2: Any?, 
       attribute attr2: NSLayoutConstraint.Attribute, 
      multiplier: CGFloat, 
        constant c: CGFloat)

3. Visual Format Language
   기본적으로 보기좋게 만들려고 쓰는 방법이다.

let views = ["redView": redView,
             "blueView": blueView,
             "greenView": greenView]

let format1 = "V:|-[redView]-8-[greenView]-|"
let format2 = "H:|-[redView]-8-[blueView(==redView)]-|"
let format3 = "H:|-[greenView]-|"

var constraints = NSConstraint.constraints(withVisualFormat: format1,
                    options: alignAllLeft,
                    matrics: nil,
                    views: views)
constraints += NSConstraint.constraints(withVisualFormat: format2,
                    options: alignAllTop,
                    matrics: nil,
                    views: views)
constraints += NSConstraint.constraints(withVisualFormat: format3,
                    options: []
                    matrics: nil,
                    views: views)
NSConstraint.activateConstraints(constraints)

출처 : 블로그

[choidam]

1. Anchor 사용하기

myView.translatesAutoresizingMastIntoConstraints = false

let margins = view.layoutMarginsGuide
myView.leadingAnchor.constraint(equalTo: margins.leadingAnchor).active = true
myView.trailingAnchor.constraint(equalTo: margins.trailingAnchor).active = true
myView.heightAnchor.constraint(equalTo: myView.widthAnchor, multiplier: 2.0)

2. LayoutConstraints 사용하기
   가독성이 떨어지는 단점이 있습니다.

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

3. Visual Format 사용하기
   설명하고자 하는 레이아웃의 시각적인 표현을 제공하는 방식입니다. 읽을 수 있도록 설계되어 있으며 뷰는 대괄호로 표시되고 뷰간의 연결은 하이픈(또는 뷰들을 떨어뜨리는 숫자에 의해 두개의 분리된 하이픈)을 사용합니다

let views = ["myView": myView]
let formatString = "|-[myView]-|"
let constraints = NSLayoutConstraint.constraintsWithVisualFormat(formatString, 
    options: .AlignAllTop, 
    metrics: nil, 
    views: views)

NSLayoutConstraint.activateConstraints(constraints)

Parameter	Description
Format	제약 조건을 시각적 형식으로 나타낸 문자열
options	객체들의 속성, 레이아웃 방향 설명
metrics	상수 집합. 키는 문자열, 값은 NSNumber 객체
views	뷰 집합. 키는 문자열, 값은 뷰 객체

---

내가 보려고 정리하는 오토 레이아웃 속성

제목	내용
Width	너비
Height	높이
Top	정렬 사각형의 상단
Bottom	정렬 사각형의 하단
Baseline	텍스트의 하단
Leading	텍스트 시작
Trailing	텍스트 끝
CenterX	수평 중심
CenterY	수평 하단