[iOS] Swift 오토레이아웃 auto layout 이론편!

오늘은 iOS 앱 개발에서는 필수적으로 배워야한다고 강조되는 오토레이아웃을 정리해보려고 한다.

 

일단, 오토레이아웃이란 무엇일까? 애플에서 사용하는 레이아웃 엔진

 

Auto Layout dynamically calculates the size and position of all the views in your view hierarchy, based on constraints placed on those views.

오토레이아웃은 모든 뷰의 제약조건에 기반하여, 뷰 계층구조에서 동적으로 이러한 뷰의 포지션과 사이즈를 계산한다.

 

즉, 오토 레이아웃은 제약조건에 기반해 뷰의 위치 및 크기를를 지정하는 것이다. 이게 필요한 이유는 바로, 디바이스 별로 화면의 크기, 해상도가 다른데, 이 달라지는 화면에 맞는 뷰를 더욱 편리하게 제공하기 위해서이다. 디바이스 별 뿐만이 아닌 세로보기, 가로보기 화면까지도 지원이 된다.

 

 

 

 

 

 

 

여기서 포인트는 바로 constraint(제약)이다.

사진에 표시된 파란 선들이 바로 constraints인데 거기에 적힌 숫자들이 바로 여백의 사이즈를 의미한다.

즉,  어두운 회색 뷰(바깥)가 밝은 회색 뷰(안)에서 위,아래 20만큼 떨어질게요~라는 의미이다.

 

 

 

 

 

 

 

다음은 오토 레이아웃의 attributes(속성)이다.

오토 레이아웃에서는 뷰에 네 개의 모서리가 있는데,

오른쪽 사진에서 보는 것 처럼 top부터 시계 방향으로 trailing, bottom, leading이다. 이 외에도, width(너비), height(높이), Center X(중앙 수직선(x선)), Center Y(중앙 수평선(y선))

 

 

 

 

 

 

레이아웃은 이처럼 일련의 선형 방정식으로 정의가 된다.

Item1.Attribute1 =(Relationship) Multiplier * Item2.Attribute2 + Constant

 

red view의 leading edge가 blew view의 trailing edge로부터 8.0 포인트 떨어져야 한다는 것이 제약조건이라고 가정하자.

여기서 방정식의 Item1은 red view, Attribute1은 leading이다. 똑같이 item2와 attribute2는 blue view와 trailing이다. 현재 제약조건에서는 relationship이 equal인데, 원래는 3가지 값이 있다. 같음(equal), 크거나 같음(greater than or equal), 작거나 같음(less than or equal)이다. multiplier은 일단 패스하고, constant는 attribute2의 값에 추가된 값이다.

 

 

참고자료

https://zeddios.tistory.com/380

http://labs.brandi.co.kr/2018/05/30/kimjh.html

https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/index.html#//apple_ref/doc/uid/TP40010853-CH7-SW1