Auto Layout

• 서로 다른 화면 크기의 iOS 기기 또는 화면 방향(portrait, landscape mode)에 따라 자동으로 인터페이스를 배치해준다.

Constraints

1. Alignment

Object - Parent View

• 선택된 object와 parent view사이의 관계를 정의한다.

• Horiziontally in Container: 0
  • button의 가로방향 중심과 view의 가로방향 중심을 동일하게 일치시킨다.
• Vertically in Container: 0
  • button의 세로방향 중심과 view의 세로방향 중심을 동일하게 일치시킨다.

Object - Object

• 선택된 object들끼리의 위치 관계를 정의한다.

선택된 2개의 label의 중심을 같은 세로선 상(offset: 0)에 일치시킨다.

2. Size

• object의 가로 또는 세로의 길이를 일정하게 유지시킨다.

object의 세로 길이를 60픽셀로 고정한다.

3. Distance of Edges

• 특정 object와 주변의 가장 가까운 view 사이의 간격을 일정하게 유지시킨다.

  • leading: left
  • trailing: right

• 가장 가까운 view가 Safe Area라고 가정
  - Safe Area: view controller의 최상위 view의 subview
• object와 safe area의 각각 왼쪽 오른쪽 모서리를 20픽셀 간격으로 유지시킨다.

Stack Views

• 여러 view를 하나의 stack에 저장

Attributes

• Axis: view에 요소들이 세로 또는 가로로 쌓여있는지 여부
• Alignment: view 내부에 요소들이 정렬되어있는 규칙
• Distribution: view 내부에 요소들이 분포되어있는(흩어져있는) 규칙
• Spacing: view 내부에 요소들 사이의 간격

Size Classes

• 화면의 크기와 방향에 따라 서로다른 size classes를 갖고있다.

  • iPhone 13 Pro
    - portrait: Compact Width, Regular Height
    - landscape: Compact Width, Compact Height
  • iPad
    - full-screen: Regular Width, Reglar Height

• 화면의 size classes에 따라 인터페이스가 수정되도록 설정할 수 있다.

• 현재 Interface Builder가 iPhone 13 Pro로 설정되어 있다고 가정
• Compact Width, Regular Height(기본): label 간격 0

• Regular Width, Regular Height: label 간격 20

Installed

• 화면의 size classes에 따라 특정 view 또는 constraints를 제거한다.
  

  • Compact Height의 경우 특정 view를 숨김처리