오토레이아웃(AutoLayout)

AutoLayout

• iOS앱에서 UI 요소를 동적으로 정의하는 시스템
• 화면 크기, 방향, 디바이스, 텍스트 길이, 콘텐츠 크기에 따라 뷰의 배치와 크기를 자동으로 조정
• 제약조건(Constraints)을 사용해 뷰 간의 관계를 정의
• 위치와 크기가 필수

iOS Layout 시스템의 종류

1. frame-based layout : 직관적이지만 디바이스별 view의 frame정보를 일일이 지정해야하는 번거로움 존재

2. Autoresizing Mask : super view의 frame 변경에 따라 view의 frame이 변경되는 방식을 정의.

• view.translatesAutoresizingMaskIntoConstraints = false
  위 코드는 코드베이스로 오토레이아웃을 적용할 때 사용하는 코드이다.
  해석해보면 해당 속성이 true라면 autoresizing mask 제약조건을 사용하겠다는 의미이다.
  만약 false를 하지않고 Auto Layout을 사용하게 되면 서로 충돌이 발생할 수 있다.
  (autoresizing mask와 Auto Layout의 혼합사용 방지)
• ⬇️ snapkit을 사용하면 LayoutConstraintItem 파일에 선언되어 있기 때문에 viewController에 따로 작성해주지 않아도 됨
  

3. Auto Layout : iOS 6에서 발표된 레이아웃. 다양한 화면 사이즈의 디바이스들이 출시되면서 레이아웃 처리에 따른 개발 복잡도 증가에 대한 대안으로 나오게 됨.

AutoLayout 방정식

위 처럼 제약조건(Constraint)를 통해 두 view 사이의 관계는 일차 방정식으로 정의될 수 있다.
내 생각대로 쉽게 해석해보면, 기준을 잡은 view를 기준으로 다른 view와의 관계(거리, 간격 등)를 생각하면 될 것 같다.

iOS의 좌표 시스템

iOS에서의 좌표는 수학에서 사용하는 (x, y) 축과 다르다. 아래 그림처럼 좌측 상단에서 (0, 0)으로 좌표가 시작된다.

offset inset

• offset: view constraint = superVIew constraint + offset
  • top = superView top + 50
  • left = superView left + 50
  • right = superView right - 50
  • bottom = superView bottom - 50

• inset: 상하좌우 여백을 설정해 뷰의 크기를 조정. padding의 개념