[iOS - swift] SnapKit (스냅킷, 오토레이아웃) 필수로 알아야 하는 것

SnapKit을 사용할때 해석 방향이 가장 중요

• 순차적으로 해석: 만들다 > 상단을 > viewProgreess의 하단과 동일 > offset은 32

make.top.equalTo(viewProgress.snp.bottom).offset(32)

Anchor

• 모든 앵커와 제약 조건 자체를 함께 연결하는것이 가능

child.snp.makeConstraints { make in
  make.lead.top.trailing.bottom.equalToSuperview()
}

• edge를 이용하여 더욱 간편하게 사용

child.snp.makeConstraints { make in
  make.edges.equalToSuperview()
}

• view에 inset값을 주고 싶은경우 inset()사용

child.snp.makeConstraints { make in
  make.edges.equalToSuperview().inset(16)
}

Constraint

• multipliedBy()

// superview의 너비와 같게 만들고 0.45를 곱한 형태
make.width.equalToSuperview().multipliedBy(0.45)

• offset()

// 상단을 viewProgress의 하단으로 제한하고, 32만큼 offset
make.top.equalTo(viewProgress.snp.bottom).offset(32)

• offset() vs inset()
  • offset: element와의 간격에 사용
  • inset: superview와의 간격에 사용

offset으로 표현

myView.snp.makeConstraints { make in
    make.top.equalToSuperview().offset(50)
    make.left.equalToSuperview().offset(50)
    make.right.equalToSuperview().offset(-50)
    make.bottom.equalToSuperview().offset(-50)
}

inset으로 표현

myView.snp.makeConstraints { make in
    make.edges.equalToSuperview().inset(UIEdgeInsets(top: 50, left: 50, bottom: 50, right: 50))
}

// 동일 코드: make.edges.equalToSuperview().inset(50)

암시

• constraint기준이 되는 View의 width, point를 지정해주지 않아도 암시적으로 동일하도록 설정
• constraint기준이 되는 View의 값을 최대한 짧게 작성 편의

// 원본
view.snp.makeConstraints { make in
  make.width.equalTo(otherView.snp.width)
  make.centerX.equalTo(otherView.snp.centerX)
}

// 동일1
view.snp.makeConstraints { make in
  make.width.equalTo(otherView)
  make.centerX.equalTo(otherView)
}

// 동일2
view.snp.makeConstraints { make in
  make.width.centerX.equalTo(otherView)
}

updateConstraint

• constraint 기준이 될 기존에 지정한 view가 바뀌는게 아닌 constant value만 업데이트 하고 싶은 경우

extension QuizViewController {
  override func willTransition(
    to newCollection: UITraitCollection,
    with coordinator: UIViewControllerTransitionCoordinator
    ) {
    super.willTransition(to: newCollection, with: coordinator)

    // 현재 방향
    let isPortrait = UIDevice.current.orientation.isPortrait
    
    // 방향에 따른 label 높이 값 조정
    lblTimer.snp.updateConstraints { make in
      make.height.equalTo(isPortrait ? 45 : 65)
    }
    
    // 방향에 따른 font 크기 값 조정
    lblTimer.font = UIFont.systemFont(ofSize: isPortrait ? 20 : 32, weight: .light)
  }
}

remakeConstraint

• constant value만 변경되는게 아닌 기준이 될 view도 바뀌는 경우
• 기존에 존재하던 constraints 삭제

func updateProgress(to progress: Double) {
  viewProgress.snp.remakeConstraints { make in
    make.top.equalTo(view.safeAreaLayoutGuide)
    make.width.equalToSuperview().multipliedBy(progress)
    make.height.equalTo(32)
    make.leading.equalToSuperview()
  }
}

lessThanOrEqualTo, priority

• lessThanOrEqualTo() 추가하여 사용
• priority() 추가하여 사용

override func updateConstraints() {
    self.growingButton.snp.updateConstraints { (make) -> Void in
        make.center.equalTo(self);
        make.width.height.equalTo(buttonSize).priority(250)
        make.width.height.lessThanOrEqualTo(self)
    }
    
    super.updateConstraints()
}

* 참고

https://www.programmersought.com/article/77934550381/

https://www.raywenderlich.com/3225401-snapkit-for-ios-constraints-in-a-snap