[Swift] 코드로 AutoLayout 설정하기 (Constraint)

[Swift] 코드로 AutoLayout 설정하기 (Constraint)

https://macgongmon.club/31

참고하기 : Apple 공식 문서: Understanding Auto Layout

AutoLayout이란

: 뷰 계층 내에서 뷰들의 크기와 위치를 각 뷰들의 제약사항(constraint)을 기반으로 동적으로 계산하는 것.

여러 해상도를 유연하게 지원할 수 있다는 장점이 있다.

AutoLayout vs Frame-Based Layout

• Frame-Based Layout
  • 정의된 좌표(origin - X, Y)와 사이즈(size - width, height)에 따라 뷰가 그려진다.
• AutoLayout
  • 정의된 제약사항(constraint)에 따라 뷰가 그려진다.
  • constraint = 지금 뷰의 너비, 높이 및 어떤 뷰로부터 얼마나 떨어져 있는지 등을 나타냄
    • width, height, top, bottom, left, right, leading, trailing, centerX, centerY ...

Contstraint

• top와 leading, bottom과 trailing
  • 현재 위치에서 "왼쪽으로 얼마나 떨어질지" : 는 양수로 설정 (ex - constant: 10)
  • 현재 위치에서 "오른쪽으로 얼마나 떨어질지" : 는 음수로 설정 (ex - constant: -10)
• centerX, centerY : x/y에 대한 중앙값

AutoLayout 설정하기

1. UI 요소들 정의하기
   1. AutoLayout을 설정할 뷰에 대해 반드시 .translateAutoresizingMaskIntoConstraints = false로 설정해 주어야 한다.
   2. If you want to use Auto Layout to dynamically calculate the size and position of your view, you must set this property to false, and then provide a non ambiguous, nonconflicting set of constraints for the view.
2. addSubView로 추가하기
   1. self.addSubview(추가할뷰)
3. bind Constraints - 뷰에 제약사항 설정하기
   1. topAnchor, bottomAnchor, leftAnchor, rightAnchor
   2. widthAnchor, heightAnchor
   3. centerXAnchor, centerYAnchor
   4. leadingAnchor, trailingAnchor

---