SnapKit 키워드 정리 - Anchor

해석 순서

 

다음은 contentsStackView 에 SnapKit 라이브러리를 사용하여 Auto Layout 을 주는 예제 코드이다. 

contentStackView.snp.makeConstraints {
    $0.leading.trailing.equalToSuperview().inset(30)
}

 

해석 순서는 다음과 같다.

leading · trailing 을 주겠다 (□□ 에다가 주겠다) → Superview 와 동일하도록(△△ 과 동일하게) → inset 을 30만큼 주면서 (♤♤ 의 추가 요소)

 

Anchor

 

① Auto Layout 을 줄 수 있는 요소

 

button 이라는 UIButton 을 superView 로 부터 20 의 padding 값을 주는 코드를 어떻게 구현할 수 있을까?

let button = UIButton()
superView.addSubview(button)

button.snp.makeConstraints {
    $0.top.leading.trailing.bottom.equalToSuperview().inset(20)
}

 

여기서 top, leading, trailing, bottom 뿐만 아니라 다음과 같은 여러 값을 줄 수 있다.

left
right
width
height
centerX
centerY
lastBaseline

 

## left - leading 의 차이 / right - trailing 의 차이

 

leading, trailing 으로 설정하면 right - to - left 순서로 읽는 지역에서는 화면이 거꾸로(flip) 표시된다. leading, trailing 은 지역마다 인식이 다르게 되어있기 때문이다. left, right 로 설정하면 flip 되는 현상이 발생하지 않는다.

 

② edges, size, center

 

top, leading, trailing, bottom 에 동시에 제약 조건을 부여할 경우 edges 라는 키워드를 통해 더욱 간단하게 설정할 수 있다.

// top, leading, trailing, bottom 모두 부여
button.snp.makeConstraints {
    $0.top.leading.trailing.bottom.equalToSuperview()
}

// 동일
button.snp.makeConstraints {
    $0.edges.equalToSuperview()
}

 

width, height 에 동시에 제약 조건을 부여할 경우 size 라는 키워드를 통해 더욱 간단하게 설정

// make width and height greater than or equal to label
$0.size.greaterThanOrEqualTo(label)

// width = superview.width + 100, height = superview.height + 100
$0.size.equalTo(superview).offset(100)

 

centerX, centerY 에 동시에 제약 조건을 부여할 경우 center 키워드를 통해 더욱 간단하게 설정

// centerX and centerY = button
$0.center.equalTo(button)

// centerX = superview.centerX + 5, centerY = superview.centerY + 5
$0.center.equalTo(superview).offset(5)