헷갈리는 Auto Layout 정리하자.
0. 오토 레이아웃이란?
아이폰 SE2, 8+, X,13 15Pro 등 다양한 아이폰 화면비율에 구애받지 않고 시각적으로 동일한 화면을 구현해야하는데
이를 위한 가장 편리하고 권장되는 방법이다.
Auto Layout Guide: Understanding Auto Layout
developer.apple.com
제약 조건에 따라 뷰 계층 구조의 모든 뷰의 크기와 위치를 동적으로 계산하며, 설계에 대한 이러한 제약 기반 접근 방식을 통해 내부 및 외부 변화에 동적으로 대응하는 사용자 인터페이스를 구축할 수 있다.
1. 오토 레이아웃
해당 제약조건들로 마진, 패딩등을 설정 할 수 있다.
Left, Leading 과 Right, Trailing의 차이점은 무엇인가?
- Left와 Right는 말 그대로 왼쪽, 오른쪽이다
-Leading은 텍스트의 시작지점이며, Trailing은 텍스트의 끝 지점이다!
기본적으로 텍스트를 왼쪽에서 오른쪽으로 읽는 우리에게는 leading을 쓰든 left를 쓰든 별 차이가 없을거라고 생각한다. 우리는 당연하게 글을 왼쪽에서부터 읽으니 텍스트의 시작점을 left로 지정을 해도되지만 만약 우리가 만드는 애플리케이션이 타 국가에도 사용되게끔 만드는데 그때에도 left를 사용하게 된다면 문제가 생기게 될 것이다. 그때 우리가 사용해야하는 것이 leading과 trailing이다. 따라서 애플리케이션의 지역화를 지원해야하는 경우 leading과 trailing은 기본적으로 사용되어야하며, 이런 저런 이유를 떠나서 left, right 딱 왼쪽과 오른쪽을 구분지어 사용하기 보다는 leading, trailing을 사용하여 조금 더 유연하게 코드를 짜는게 옳다고 생각한다.
용어
- Width : 정렬 사각형의 너비
- Height : 정렬 사각형의 높이
- Top : 정렬 사각형의 상단
- Bottom : 정렬 사각형의 하단
- Baseline : 텍스트의 하단 (텍스트가 들어가는 뷰)
- Horizontal : 수평
- Vertical : 수직
- Leading : 리딩, 좌측
- Trailing : 트레일링, 우측
- CenterX : 수평중심
- CenterY : 수직중심
Top,Left,Leading은 제약조건 설정시 +
Bottom,Rigth,Trailing은 제약조건 설정시 -
2. Safe Area?
아이폰 X 부터 나온 개념으로, M자 탈모 아이폰이 등장하면서 상단의 노치와 하단의 홈바에는 콘텐츠가 제대로 표시되지 않기 때문에, 이 부분을 제외하고 콘텐츠가 안전하게 표시될 수 있는 영역을 의미한다.
- Storyboard에서 뷰컨생성하면 Safe Area를 볼 수 있다.
3. Intrinsic Size?
intrinsic size는 그대로 "본질적인 크기"를 가르킨다. 예를 들어, label은 애초에 폰트 크기와 텍스트가 정해져 있기 때문에 컨텐츠 자체의 본질적인 크기인 Intrinsic Size 계산을 할 수 있다. 그래서 우리가 따로 Width를 잡아주지 않아도 에러가 발생하지 않는다.
허나, UIView와 큰 차이점을 보이는데, UIView 같은 경우에는 내부 컨텐츠의 크기를 정할 수 없기 때문에Instrinsic Size 계산을 할 수 없다. 그래서 top, leading만 잡아주면 에러가 난다.
4. Priority?
1) Hugging priority
우선순위가 높으면 내 크기 유지. 우선순위 낮으면 크기 늘어남 (늘어난다 = 당겨진다 = 커진다)
2) Compression Resistance priority
우선순위가 높으면 내 크기 유지. 우선순위 낮으면 크기 작아짐 (밀린다 = 찌그러진다 = 작아진다)
두 오브젝트 중 하나가 커져야하는 상황 -> Hugging priority
두 오브젝트 중 하나가 작아져야하는 상황 -> Resistance priority
번외. 오토레이아웃을 코드로 쓰는 방법들은?
1.Layout Anchor
- 제약을 주고싶은 Item의 Anchor Prioiry에 접근해 제약을 주는 방식
- 간결한 작성 방식으로 뛰어난 가독성, type safety를 지원한다는 장점이 있다.
2.NSLayoutConstraint
-NSLayoutConstraint class의 convenience method를 통해 직접 생성하는 방식
-단점이 많다.
- layout anchor 방식과는 다르게, 특정 제약사항의 조건들을 확인시켜 주지 않아 오류에 취약함
3.Visiual Format Langauge
- Visiual Format Langauge를 활용하는 방식
-시각적으로 좋기 때문에, 표현성이 좋다.
-한번에 여러개의 제약을 정의할 수 있다.