오토 레이아웃(Auto Layout) - 1 (등장배경)

순서

개요

등장배경

Frame Based Layout

Auto Layout

Adaptive Layout

 

 

오토 레이아웃(Auto Layout) 개요

 

다양한 해상도와 화면의 방향(가로,세로)에 대응하기 위한 기능입니다

뷰와 뷰 사이의 관계를 정의해 위치,크기를 지정할 수 있습니다. 

아래는 스토리보드에 그린 뷰입니다

오토레이아웃으로 제약사항을 적용 전, 후를 비교한 사진을 비교해 보세요

스토리보드

 

등장 배경

 

아이폰3gs가 나오며 본격적으로 스마트폰시장이 활성화 되었습니다.

출시 당시 아이폰의 화면 크기는 하나이고 세로화면만 지원했기 때문에 UI개발이 수월했습니다.

하나의 해상도에 대응하는 프레임만 계산하면 됐었으니깐요

 

아이폰4가 출시되며 개발자는 320x420pt(아이폰3gs) 와 640x840px(아이폰4) 두 가지 해상도에 대응했어야 합니다.  

해상도에 대응하는 리소스를 두개(1배,2배) 준비하면 됐기 때문에 파편화 문제가 대두되지 않았습니다

 

아이폰5가 출시되며 320x568pt 에 대응하는 해상도를 만들기 위해 오토레이아웃이 도입됐습니다

기존 UI배치는 크기와 위치를 직접 지정하는 방식이었지만 (Frame Based Layout)

오토레이아웃으로 제약사항을 추가하여 위치를 상대적으로 정의할 수 있게 되었습니다

 

 

 

 

Frame Based Layout

 

개발자가 프레임을 직접 계산해 화면에 배치합니다

상위뷰의 크기가 변할 때 마다 하위뷰의 크기도 변해야 하는데

이 과정을 자동으로 계산해 주는 것이 Auto Resizing Mask입니다

 

 

Auto Layout

UI구성요소를 제약사항을 정의해 상대적으로 표현하는 방식입니다 

정의한 값만큼 Auto Layout이 자동으로 프레임을 계산하여 다양한 해상도에 대응하게 해줍니다

 

 

 

 

Adaptive Layout

 

아이폰8이 출시되며 모든 하드웨어의 해상도에 대응할 수 있도록 애플이 개발한 기능입니다 

개발자는 아이패드와 아이폰스토리보드를 구분하지 않고

하나의 Universal 스토리보드에서 작업 할 수 있게 되었습니다

 

 

 

참고자료

KxCoding Auto Layout 유튜브 강의 (https://www.youtube.com/watch?v=6AM0UoJ6_zk)