[iOS - swift] 1. Autolayout 고급 (with SnapKit) - Hugging, Compression, priority 개념

1. Autolayout 고급 (with SnapKit) - Hugging, Compression, priority 개념

2. Autolayout 고급 (with SnapKit) - remakeConstraints, multipliedBy, dividedBy

3. Autolayout 고급 (with SnapKit) - Constraint 프로퍼티를 사용한 단순한 animation 구현

4. Autolayout 고급 (with SnapKit) - Stretchy 레이아웃 구현

미리 알아야하는 내용

• intrinsicContentSize 개념: https://ios-development.tistory.com/647
• (코드로 UI 구현 시) SnapKit 프레임워크 사용: https://ios-development.tistory.com/90

헷갈리는 기본 개념 두 가지 - Hugging, Compression

* 자기 자신에서 viewSize와 intrinsicSize에 관한 개념임을 먼저 기억

• setContentHuggingPriority
  • viewSize가 intrinsicSize보다 커지는 것을 막는 우선순위
    

    

    파란색 -> viewSize가 intrinsicSize보다 커짐

  • 이때 파란색이나 주황색 중 뷰의 크기가 커질 수 밖에 없는데, 위 상황은 뒤에 선언한 주황색 뷰의 hugging 이 높은 것
    

    self.leftLabel.setContentHuggingPriority(.defaultHigh, for: .horizontal)​

    

    주황색 -> viewSize가 intrinsicSize보다 커짐

• setContentCompressionResistancePriority
  • viewSize가 intrinsicSize보다 작아지는 것을 막는 우선순위
    

    

    주황색 -> viewSize가 intrinsicSize보다 작아져서 안보이는 상태

  • 주황색의 compression을 높여서, viewSize가 intrinsicSize보다 작아지지 않도록 설정
    

    self.rightLabel.setContentCompressionResistancePriority(.required, for: .horizontal)​

    

    주황색 -> viewSize가 intrinsicSize보다 작아지지 않는 상태

hugging, compression의 디폴트 값?

hugging 디폴트가 높은 것 -> 왠만하면 뷰가 커지지 않고 intrinsicSize만큼 유지되는걸 선호

• UILabel
  • hugging: 251
  • compression: 750
• UIButton, UIView
  • hugging: 250
  • compression: 750
• UISwitch
  • hugging: 750
  • compression: 750

cf) horizontal, vertical의 기본 priority는 1000

주의사항) SnapKit에서 priority 설정 시, required는 1000, defaultHigh는 750이므로 hugging을 높일 땐 defaultHigh를 사용하고 compression을 높일 땐 required를 사용하는게 일반적

priority 주의사항 - hugging, compression와 constraint의 priority는 종속적

• 버튼이 길어지는 레이아웃 (hugging 높임이 필요한 상황)
  • height의 constraint를 999로 준 상태인 동시에, button의 hugging을 998로 주었지만 button에 길이가 반영이 안됨

self.tableView.snp.makeConstraints {
  $0.top.equalTo(self.view.safeAreaLayoutGuide)
  $0.left.right.equalToSuperview()
  $0.bottom.equalTo(self.insertButton.snp.top)
  $0.height.equalTo(300).priority(999) // <-
}

self.insertButton.setContentHuggingPriority(.init(rawValue: 998), for: .vertical) // <-
self.insertButton.snp.makeConstraints {
  $0.bottom.left.equalTo(self.view.safeAreaLayoutGuide)
  $0.width.equalToSuperview().dividedBy(2)
}

• 이때 huggin의 priority를 1000으로 주면 tableView의 $0.height.equalTo(300).priority(999)의 제약보다 더욱 우선순위가 커지므로 hugging 적용 완료
  

  

  * 결론: hugging과 constraint간의 priority는 서로 영향을 줌

* 전체 코드: https://github.com/JK0369/ExAutolayout