Xcode 오토레이아웃 (AutoLayout) (1)

Xcode  Auto Layout

 

초기 iOS모델에 대하여 뷰의 프레임을 짤 때는 기기의 모델이 고정되어있어서

 

굳이 따로 생각할 필요가 없이 모두 고정된 픽셀로 크기를 지정해주어도 문제가 없었지만

 

iPad의 등장 밑 아이폰도 크기의 다양화로 고정된 픽셀로 View를 만들게 되면 기기에 따라

 

화면 비율이 깨지는 사태가 발생하였는데!

 

 frame값은 화면의 크기를 고려하지않고

 

무조건 원점에서 떨어진곳에 수치에 맞게 작업을 수행하기 때문이다.

 

이럴때 Auto Layout을 사용하면 설정할 뷰의 객체들을 다른 객체를 이용해 상대적으로 제약을 줄 수 있다.

 

보통 Sage Area를 기준으로 사용하며

 

예를들어 Safe Area를 기준으로 left로 50, right 50, top으로 10의 margin을 두고 height가 100이라는 제약을

 

imageView에 주게 된다면 각 기기에서 imageView들이 margin제약의 맞게 width가 자동으로 지정된다.

 

가로 길이가 200인 화면일 경우 width는 100, 길이가 250이라면 width는 150인 imageView가 나타난단 말이다.

 

이러한 현상 때문에 오토레이아웃이 도입되었다. 

 

다시 정의를 간단하게 설명 하자면

 

오토 레이아웃은 제약조건에 따라 view계층 구조에 있는 모든 뷰의

 

크기와 위치를 동적으로 지정하는 것이다.

auto layout 적용 예시

 

오토레이아웃 속성

 

Width : 정렬 사각형의 너비

 

Height : 정렬 사각형의 높이

 

Top : 정렬 사각형의 상단

 

Bottom : 정렬 사각형의 하단

 

Baseline : 텍스트의 하단

 

Horizontal : 수평

 

Vertical : 수직

 

Leading : 리딩, 텍스트를 읽을 때 시작 방향

 

Trailing : 트레일링, 텍스트를 읽을 때 끝 방향

 

CenterX : 수평 중심

 

CenterY : 수직 중심

 

 

 

Left / Right    vs     Leading / Trailing

 

위와같이 margin이나 다른 제약을 설정할때 왼쪽 오른쪽을 설정하는 경우가 위에처럼

 

Left / Right 를 사용하거나 Leading / Trailing을 사용하거나 둘중 하나를 사용하는데, 보통

 

 

Leading은 Text가 시작되는 지점

 

Trailing은 Text가 끝나는 지점

 

 

한국에서는 Text가 시작되는 지점이 왼쪽 -> 오른쪽이기 때문에 크게 상관은 없지만

 

다른 언어권 특히 아랍쪽으로 가게되면 글씨가 오른쪽  -> 왼쪽으로 이동하기 때문에

 

Leading / Trailing의 방향이 정 반대가 되어 버린다.

 

 

 

안전 영역(Safe Area)

 

Safe Area는 콘텐츠가 상태바, 내비게이션바, 툴바, 탭바를 가리는 것을 방지하는 영역입니다.

 

표준 시스템이 제공하는 뷰들은 자동으로 안전 영역 레이아웃 가이드를 준수하게 되어있습니다.

 

기존의 상/하단 레이아웃 가이드(Top/Bottom Layout Guide)를 대체하며, 하위 버전에도 호환하여 작동합니다.

 

Xcode 9 부터 ViewController생성 시 자동적으로

위 사진과같이 Safe Area가 생성됩니다.

 

위에 SafeArea 처럼 뷰를 구성하지않고 전체 화면을 다 구성하는 방법에는

 

Safe Area에 설정되어 있는 constraints를 더블클릭 후

다음과 같이 SafeArea에 체크된 부분을 superView로 바꿔주면 된다.

 

 

제약 ( Constraint )

 

제약은 뷰 스스로 또는 뷰 사이의 관계를 속성을 통하여 정의합니다.

 

제약은 방정식으로 나타낼 수 있습니다.

Item1.Leading = 1 * Item2.Trailing + 8
//   Item2는 Item1과 8만큼 떨어져있다.

 

제약 우선도  ( Constraint Priorities )

 

오토레이아웃은 뷰의 고유 콘텐츠 크기를 각 크기에 대한 한 쌍의 제약을 사용하여 나타냅니다.

 

우선도가 높을수록 다른 제약보다 우선적으로 레이아웃에 적용하며,

 

같은 속성의 다른 제약과 경합하는 경우, 우선도가 낮은 제약은 무시됩니다.

 

Content hugging

 

콘텐츠 고유 사이즈보다 뷰가 커지지 않도록 제한합니다.

 

다른 제약사항보다 우선도가 높으면 뷰가 콘텐츠 사이즈보다 커지지 않습니다.

 

 

Content compression

 

콘텐츠 고유 사이즈보다 뷰가 작아지지 않도록 제한합니다.

 

다른 제약사항보다 우선도가 높으면 뷰가 콘텐츠 사이즈보다 작아지지 않습니다.