[4일차] AutoLayout (오토레이아웃)

AutoLayout이란?
뷰의 제약 사항을 바탕으로 뷰 체계 내의 모든 뷰의 크기와 위치를 동적으로 계산합니다.

 

우선 AutoLayout을 이용하기 전에 앞서, 현재 개발 중인 UI가 다양한 디바이스에 어떻게 보이는지를 미리 확인할 수 있다.

 

* Adjust Editor Options > Preview 기능을 이용하여 다양한 디바이스에서 레이아웃의 호환성 여부를 확인

PreView 활성화

원하는 디바이스 선택

위 그림처럼 현재 개발중인 앱의 UI를 다양한 디바이스에서 확인이 가능하다.

 

오토레이아웃 기능을 XCode에서 자동으로 완성시켜주는 기능이 있다. 

바로 'Add Missing Constraint'이다. 하지만, 자동으로 만들어주는 기능이다 보니 완벽하진 못하다.

현업에서는 해당 기능을 이용하기보다는 개별적으로 설정값을 할당해주는 편이라고 한다.

 

 

Label, Butto, ImageView 등등 스토리보드의 각 요소들을 각각 설정값을 정해주면 아래의 그림과 같이 세부 설정값이 보인다.

실제 현업에서는 Zeplin과 같은 디자인 툴에서 각 UI 요소들의 크기, 간격의 값이 정의되어 있으므로 알맞게 구현하면 수월할 것 같다.