[iOS] AutoLayout 정리

Autolayout은 뷰에 주어진 제약조건에 따라 뷰의 크기와 위치를 동적으로 게산해 배치하는 것으로, 외부 또는 내부의 변화에 동적으로 반응하여 유저 인터페이스를 구성한다

개발자는 y = ax + b 조건(constraints)을 준다.

→ 절대값으로 x/y축의 위치/크기를 결정해 주는 대신, 조건을 설정해서 오토레이아웃 엔진이 알아서 값을 계산하게 한다.

x, y는 서로 다른 뷰의 속성을 나타낸다

a, b 는 개발자가 지정하는 임의의 수이다

• 목적: 모든 뷰에 대해 4개의 값을 알아내는 것
  
  • 뷰의 x축 위치
  • 뷰의 y축 위치
  • 뷰의 x축 크기(너비)
  • 뷰의 y축 크기(높이)

• 뷰의 속성 : 조건(Constraints)는 뷰의 속성(attributes)간 관계를 설정한다
  • 위치 속성→ 뷰 직사각형의 상하좌우 테두리를 의미, leading은 text가 시작하는 부분(보통 왼쪽)→ 가로, 세로 중심 축
    • [center x / center y]
    • [top / bottom / leading / trailing]
  • 크기 속성→ top 과 bottom 사이의 높이, leading과 trailing 사이의 너비를 의미
    • [height, width]

‘속성’을 정해줬다고 해서 오토레이아웃 엔진이 원하는 4가지 값이 항상 충족 되는 것은 아니고 주어진 속성을 가지고 크기와 위치를 모두 알아낼 수 있어야 한다

X축 기준으로 Leading, Trailing, Width, Center X 이렇게 4가지 속성이 있다.

이 중 2개가 정해져야 한다. (Y축도 동일하다.)

• 테두리 속성 1개 (Leading or Trailing) + 테두리 속성 1개 (Leading or Trailing)
• 테두리 속성 1개 (Leading or Trailing) + 너비 속성 (Width)
• 테두리 속성 1개 (Leading or Trailing) + 중심축 속성 (Center X)
• 너비 속성 (Width) + 중심축 속성 (Center X)

- 안전 영역(Safe Area)이란?

안전 영역(Safe Area) 은 어플리케이션이 상태바, 네비게이션바, 툴바, 탭바를 가리는 것을 방지하는 영역입니다. 표준 시스템이 제공하는 뷰들은 모두 안전 영역을 준수하고 있습니다.

---

포인트를 정리하자면!!

오토레이아웃이란?

• 다양한 화면에 대응할 수 있도록 UI레이아웃을 잡아주는 도구이다
• 방정식으로 값을 정한다
• 드래그앤 드랍, 사이즈 인스펙터 등으로 설정이 가능하다