본문 바로가기

iOS

iOS) Auto Layout 1

Auto Layout

오토레이아웃은 뷰에 추가한 제약(Constrait)에 따라 뷰 체계에 속한 모든 뷰의 크기와 위치를 현재 상황과 제약에 맞도록 계싼하여 배치합니다. 따라서 다양한 기기와 화면크기에서도 상황에 맞는 크기로 사용자 인터페이스를 제공할 수 있습니다.

(프레임 기반으로 하는 레이아웃도 별도로 있습니다.)

 

오토레이아웃이 필요한 이유

 

- 다양해지는 iOS 기기 화면 크기

- 가로/세로 회전이 필요한 애플리케이션의 증가

- 지역화(Localization)로 인한 텍스트 길이 변화

- 상황에 따라 크기가 변하는 동적인 콘텐츠 사이즈

- 나라마다 글자 여백이 다름 

 

 

Baseline : 콘텐츠에 텍스트가 있는 경우 텍스트의 하단, 없는 경우 사각 영역 최하단

Leading: 텍스트 시작 방향(언어별로 상이, 한국어라면 왼쪽, 아랍어라면 오른쪽)

Trailing : 텍스트 끝 방향

Horizontal : 수평

Vertical : 수직

 

Safe Area 안전영역

 

안전 영역은 콘텐츠가 다른 화면요소(예를 들면 내비게이션 바, 툴 바, 상태 바 등)에 가리지 않는 안전한 영역을 뜻합니다.

안전 영역은 iOS 11부터 사용할 수 있지만, iOS 11 이전의 버전에서는 안전 영역을 자동으로 상/하단 레이아웃 가이드(Top/Bottom Layout Guide)로 변환하여 적용하므로 하위 버전의 호환에도 크게 문제가 발생하지 않습니다.

안전 영역 레이아웃 가이드는 UIVew클래스의 var safeAreaLayoutGuide: UILayoutGuide 프로퍼티를 통해 접근할 수 있습니다.

 

레이아웃 마진

뷰 영역과 콘텐츠 사이의 기본 간격(default spacing)입니다.

-레이아웃 마진 가이드 Layout Margine Guide): 레이아웃 마진에 따라 형성되는 사각의 프레임 영역

 

제약(Constaint)

제약은 뷰 스스로 또는 뷰 사이의 관계를 속성을 통하여 정의합니다. 제약은 방정식으로 나타낼 수 있습니다. 예제 방정식을 통해 자세히 알아 봅시다.

 

Item1 : 방정식에 있는 첫 번째 아이템(Y View)입니다. 첫 번째 아이템은 반드시 뷰 또는 레이아웃 가이드이어야 합니다.

Attribute1: 첫번째 아이템에 대한 속성입니다. 이 경우 Y View의 리딩입니다.

Multiplier: 속성 2에 곱해지는 값입니다. 지정하지 않으면 기본 값은 1.0입니다.

Item2: 방정식에 있는 두 번째 아이템(R View) 입니다.

Attribute2: 두번째 아이쳄에 대한 속성입니다. 이 경우 R View의 트레일링입니다.

Constant : 두번째 아이템의 속성에 더해지는 상수 값입니다.

정수 승수는 소수 승수보다 선호됩니다.

양의 상수는 음의 상수보다 선호됩니다.

가능한 경우 뷰는 배치 순서에 따라 나타나야 합니다. 즉, 후행으로 이어지며, 위에서 아래로 이어져야 합니다.

 

고유 콘텐츠 크기(Instrinsic Content Size)

 뷰가 기본적으로 특정 콘텐츠를 갖고 있따면 고유 콘탠츠 크기는 뷰가 기본적으로 갖는 크기로 생각할 수 있습니다.

예를 들어 레입ㄹ의 고유 콘텐츠 크기는 레이블의 텍스트의 크기입니다. 슬라이더나 텍스트필드같이 가로 길이는 정해지지 않고 세로의 크기만 고유 콘텐츠 크기를 갖는 경우도 있습니다.

 

제약 우선도(Constraint Priorities)

 오토레이아웃은 뷰에 추가된 여러 제약을 우선도가 높은 순서로 적용합니다. 우선도가 높을수록 다른 제약보다 우선적으로 레이아웃에 적용하며 , 같은 속성의 다른 제약과 경합하는 경우, 우선도가 낮은 제약은 무시합니다.

 

1. 콘텐츠 허깅 우선도(Content compression resistance priority): 콘텐츠 고유 사이즈보다 뷰가 작아지지 않도록 제한합니다. 다른 제약사항보다 우선도가 높으며 뷰가 콘텐츠 사이즈보다 커지지 않습니다.

2. 콘텐츠 축소 방지 우선도(Content compression resistance priority):  콘텐츠 고유 사이즈보다 뷰가 작아지지 않도록 제한합니다. 다른 제약사항보다 우선도가 높으며 뷰가 콘텐츠 사이즈보다 작아지지 않습니다.

 

컨트롤 드래그 기능

이렇게 컨트롤로 드래그해도 뷰끼리 Constraint 설정이 가능하다. 수평 수직으로 해도 그에 맞는 설정 가능

다큐먼트 아웃라인에서도 컨트롤 클릭 드래가 해도 됩니다.

 

사용되는 툴

 

에디터 윈도우의 오른쪽 밑에있는 툴

 

스택툴 = 뷰들 엮어서 스택 뷰로 만든다.

얼라인툴 = 정렬 한다.

핀툴 = 포지션이나 사이즈 

 

 이웃 뷰를 설정 가능

 

Resolve Auto Layout Issues Tool

현재 상태로 제약을 재설정 하거나 지우거나 재설정

 

 

 

참고 애플 개발자 문서

'iOS' 카테고리의 다른 글

iOS) UITextView  (0) 2020.04.23
iOS) UITextField  (0) 2020.04.22
iOS) UIView.ContentMode  (0) 2020.04.22
iOS) UIImageView  (0) 2020.04.22
iOS) UIView  (0) 2020.04.21