[Do it!] 자동 레이아웃 정의 및 설정 방법

자동 레이아웃(Auto Layout)

기기의 디스플레이 크기와 관계없이 동일한 레이아웃을 구현하는 기능

미리보기 사용하기

• Main.storyboard 실행하기
• [Adjust Editor Options] -> [Preview] 클릭하기
• 미리보기 창 하단의 [+] 아이콘으로 여러 디바이스의 미리보기 추가 가능

자동 레이아웃 설정하기

• 각 객체마다 constraints를 설정하여 자동 레이아웃을 사용한다.
• Constraints
  • Alignment Constraint: 정렬 조건
  • Constraints: 이웃한 객체와의 간격, 크기 등에 관한 조건
• 설정한 constraints 는 [Document Outline] 이나 [Size inspector] 에서 확인할 수 있다.

SafeArea 영역 조절하기

• 아이폰 종류에 따라 다른 크기의 SafeArea 영역을 가져, 특히 상하 여백에서 큰 차이를 나타낸다.
• 위, 아래 여백 설정하기
  • [First Item] = [Multiplier] * [Second Item] + Constant
  • SafeArea 와 관련된 constraints 의 [Second Item] 을 SuperView 로 변경하기

Stack View

• 여러 객체를 모아서 관리할 수 있는 뷰 컨테이너
• Library
  • Horizontal Stack View: 객체들을 가로로 배치
  • Vertical Stack View: 객체들을 세로로 배치
• 중첩으로 사용 가능하다.