Auto Layout 개념 정리

developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/index.html

Auto Layout Guide: Understanding Auto Layout

 

 

< 목차 > 

1.  Auto Layout 정의

 

2. Auto Layout Attributes

 

3. AutoLayout 방정식

 

4. Creating Nonambiguous, Satisfiable Layouts (모호하지 않게 명확하게 Layout을 만들도록 지시하기)

 

5. Constraint Inequalities

 

6. Constraint Priorities

 

7. Intrinsic Content Size

 

8. Stack View : Auto Layout without constraint 

 

---

1.  Auto Layout 정의

 

오토 레이아웃은 동적으로 뷰의 사이즈와 위치를

 

뷰 Layout(계층구조)에 맞게 조절합니다.

 

오토 레이아웃은 일반적으로 Constraint(제약) 들을 이용해서 정합니다.  (스택 뷰와 같은 예외도 있습니다. 아래에서 설명합니다.)

 

Constraint(제약)은 일반적으로 2개의 View 사이의 관계를 나타냅니다.

 

오토 레이아웃은 사이즈와 위치를 각각의 뷰를 기반으로 계산합니다.

 

오토 레이아웃은 내부와 외부의 변화에 대응할 수 있습니다.    (앱을 돌리거나 기기마다 다른 화면 크기 등에 대응하는 것을 의미합니다.)

 

(내부 외부적인 변화의 구체적인 사항은 위의 공식 문서에서 확인할 수 있습니다.)

 

위 그림은 바깥 뷰인 가장 큰 사각형으로부터

 

위, 왼쪽, 오른쪽에서 각각 20씩 거리를 두고 a의 높이를 가진 뷰인 작은 사각형을 만든 모습입니다.

 

이때 "작은 사각형의 가로 길이"  ==  "큰 사각형 가로길이 -20x2"입니다.

 

즉, 작은 사각형의 가로길이는

 

큰 사각형의 가로길이의 변화에 따라 동적으로 결정되게 됩니다.

 

큰 사각형의 크기가 기기의 크기라고 한다면 기기의 크기에 따라 작은 사각형의 크기가 동적으로 변화하게 됩니다.

 

---

2. Auto Layout Attributes

 

Auto Layout에서 attributes(속성)은 제약이 발생할 수 있는 특징을 정의합니다.

 

Attribute는 위치를 나타내는 Attribute와 크기를 나타내는 Atrribute 그리고 Attribute가 아닌 것으로 나눌 수 있습니다.

 

 

위치를 나타내는 Attribute :

 

4 개의 모서리 [leading(왼쪽), trailing(오른쪽), top(위쪽), bottom(아래쪽)] ,

 

vertical center(수직 중심) 및 horizontal center(수평 중심) ,

 

baseline Attribute (글자의 밑바닥을 의미합니다.)

( 뷰 안에 글자가 들어오는 label, text view 등과 같은 Text item들은
하나 이상의 baseline attribute을 가집니다.)

 

크기를 나타내는 Atrribute :

 

height(높이), width(너비)이 포함됩니다.

 

Attribute가 아닌 것 :

 

Not An Attribute

 

 

 

이러한 Attribute의 구분을 염두에 두고 다음 규칙이 적용됩니다.

• 크기 Attribute를 위치 Attribute으로 제약할 수 없습니다.
  
  (즉, 구분이 다른 두 가지를 혼합해서 Constraint를 만들 수 없습니다.)
  
  
• 위치 Attribute에는 상수 값을 할당할 수 없습니다. 
• 위치 Attribute에는 nonidentity multiplier  (1.0 이외의 값)를 사용할 수 없습니다. 
  
  (즉, 1.0 이 아닌 경우에는 명시해줘야 합니다.)
  
  
• 위치 Attribute의 경우 vertical Attribute을 horizontal Attribute으로 제약할 수 없습니다. 
• 위치 Attribute의 경우 Leading 또는 trailing Attribute을 Left 또는 Right Attribute으로 제약할 수 없습니다.

 

 

전체 특성 목록은 NSLayoutAttribute를 참조하시면 확인하실 수 있습니다.

 

---

3. AutoLayout 방정식

 

위의 그림 가운데 위쪽에 있는 8은 단위가 포인트입니다.  (픽셀과 혼동 주의!)

 

Leading은 뷰의 왼쪽 변의 위치 그리고 trailng은 뷰의 오른쪽 변의 위치를 의미합니다.

 

즉, RedView.Leading은 빨간색 사각형의 왼쪽 변의 위치를 의미합니다.

 

오토 레이아웃 방정식은 2개의 View 사이의 관계를 의미합니다.

RedView.Leading = 1.0 x BlueView.trailing + 8

(위의 식은 BlueView.trailing = 1.0 x RedView.Leading - 8와 같은 의미입니다.)

 

RedView.Leading가 만약 4이면    (이때 4는 위치를 의미합니다.)

 

BlueView.trailing는 -4가 됩니다.    (이때 -4는 위치를 의미합니다. - 는 기기의 밖에 위치를 의미하므로 적절하지 못합니다.)

 

---

4. Creating Nonambiguous, Satisfiable Layouts

 

AutoLayout을 사용하는 것의 목표는 Constraint(제약)을 View에게 적용해서

 

View가 크기나 위치를 Constraint(제약)에 맞게 찾아가게 하는 것입니다.

 

View의 가로를 예를 들어보면

 

우리의 목적은 내부의 진한 회색 사각형 뷰(이하 뷰)를 그리는 것이라고 할 때

 

외부의 연한 회색 뷰는 슈퍼뷰(superview)라고 하겠습니다.

 

예시 1

뷰의 가로 크기를 알고 있습니다.

 

뷰의 폭만 알고 있으면 뷰가 정확히 어디에 위치하는지 알 수 없습니다.

 

때문에 뷰의 왼쪽 Constraint(제약)을 정해줘야 합니다. 

 

이제 뷰가 정확히 어떤 크기로 어떤 위치에 있는지 알 수 있습니다.

 

예시 2

뷰의 가로 크기는 알지 못합니다.

 

하지만 뷰의 왼쪽, 오른쪽 여백의 Constraint(제약)을 알고 있습니다.

 

그러면 뷰의 가로 크기는 슈퍼뷰의 가로 크기에서

 

두 Constraint(제약)인 왼쪽 여백 크기와 오른쪽 여백 크기를 뺀 만큼이 됩니다.

 

역시 뷰의 크기와 위치를 알 수 있습니다.

 

예시 3

뷰의 가로 크기는 알지 못합니다.

 

뷰의 왼쪽 여백의 Constarint(제약)을 알고 있습니다.

 

그리고 뷰의 중앙이 슈퍼뷰의 중앙과 일치합니다.

 

그렇다면 뷰의 오른쪽도 왼쪽과 대칭이 되기 때문에

 

뷰의 크기와 위치를 정확히 알 수 있습니다.

 

 

 

위와 같은 방식으로 X축의 제약을 완성시킨 것처럼

 

Y축 또한 컴퓨터가 계산할 수 있는 힌트를 모두 줘서 Y축의 제약을 완성시켜야

 

오토 레이아웃 제약이 완성이 됩니다.

 

 

 

x축의 제약을 완성시키는 방법이 여러 가지가 있는 것처럼

 

오토 레이아웃 제약을 완성시키는 방법 또한 여러 가지가 존재합니다.

 

---

5. Constraint Inequalities

Constraint(제약)의 방정식인 attibute1 = multipiler x attribute2 + constant 방정식은 equal 할 때를 나타냅니다.

 

Constraint(제약)의 부등식 표현도 가능한데 이 경우를 Constraint Inequalities라고 합니다.

 

 

Item1.Attibute1 >= Multipiler x Item2.Attribute2 + Constant

 

Item1.Attibute1 <= Multipiler x Item2.Attribute2 + Constant

 

// A single equal relationship
Blue.leading = 1.0 * Red.trailing + 8.0
 
// Can be replaced with two inequality relationships
Blue.leading >= 1.0 * Red.trailing + 8.0
Blue.leading <= 1.0 * Red.trailing + 8.0

예를 들면, Blue.leading >= 1.0 * Red.trailing + 8.0 에서

 

블루와 레드 사이의 간격은 최소한 8보다 크거나 같아야 합니다. (이때 8은 방향성+이므로 파란색이 빨간색보다 오른쪽에 있어야 합니다.)

 

아래 그림을 보면 두 View 사이에 >= 표시를 볼 수 있습니다.

 

---

6. Constraint Priorities

오토 레이아웃은 모든 Constraint(제약)이 필수입니다.

 

옵셔널 Constraint(제약)도 만들 수 있는데

 

모든 Constraint(제약)은 1 ~ 1000 사이의 값을 가집니다.

 

Constraint(제약)의 Priority가 커질수록 Constraint(제약)의 힘이 더 세집니다.

 

힘이 세진다는 말은 2개의 Constraint(제약)가 겹쳐질 때

 

힘이 상대적으로 더 센 Constraint(제약)를 우선적으로 지킨다는 의미입니다.    

 

Priority 값을 1000을 갖는 Constraint(제약)은 이보다 더 큰 우선순위 값이 없으므로

 

필수적으로 지켜야 하는 Constraint(제약)입니다.

 

만약 Priority 값을 1000을 갖는 2개의 Constraint(제약)이 겹쳐진다면 오류가 발생합니다.

 

1000보다 작은 다른 Priority 값을 갖는 Constraint(제약)는 모두 옵셔널 Constraint(제약)입니다.

 

오토 레이아웃은 모든 Constraint(제약) 조건을 높은 것부터 낮은 것까지 시도해봅니다.

 

---

7. Intrinsic Content Size

어떤 뷰는 뷰 내부의 콘텐츠에 크기에 의해서 뷰의 사이즈가 결정되는데

 

이를 intrinsic content size(고유 컨텐츠 사이즈)라고 합니다.

 

예를 들어 버튼의 intrinsic content size는 버튼의 Title 보다 약간 큰 크기입니다.

 

View의 종류	Intrinsic content size 여부
UIView and NSView	Intrinsic content size 없음
Sliders	폭만 지정함 (iOS). 어떤 슬라이더 타입인지에 따라 폭, 높이 지정(OS X).
Labels, buttons, switches, and text fields	폭과 높이 둘 다 Intrinsic content size를 정의함
Text views and image views	다양한 Intrinsic content size가 있음.

 

 

intrinsic content size가 있을 때 Content hugging과 Content compression이 있습니다.

 

이 둘은 Priority(우선순위)를 가집니다.

 

 

 

Content hugging : 우선순위가 높으면 최소 크기를 보장받습니다.

(즉, 크기가 안 늘어나기 위해 버티는 힘이라고 말할 수 있습니다.)

핑크색이 hugging priority 값이 더 높아서 최소 크기를 보장받고 주황색은 길어졌습니다.  

 

★ Priority 값이 더 높은 핑크색 라벨의 원래 intrinsic content size를 보장합니다.

 

 

Content compression : Prioirty 값이 더 높으면 최대 크기를 보장받습니다.

(즉, 크기가 안 줄어들기 위해 버티는 힘이라고 말할 수 있습니다.)

 

주황색이 compression priority 값이 더 높아서 최대 크기를 보장받고 핑크색은 짧아졌습니다.  

 

★ Priority 값이 더 높은 주황색 라벨의 원래 intrinsic content size를 보장합니다. 

 

---

8. Stack View : Auto Layout without constraint 

Axis: (UIStackView only) (UIStackView 전용) 수직(세로) 또는 수평(가로)으로 Stack View의 View들이 쌓이는 방향을 정의합니다.

 

Spacing: 인접한 View들의 사이의 공간을 정의합니다.

 

Distribution: Axis(축) 방향을 따라 View들의 Layout을 정의합니다.

 

Alignment: Stack View의 Axis(축) 방향에 수직인 View들의 Layout을 정의합니다.

 

 

Distribution of Stack View

1) fill :

Stack View의 Axis(축) 방향으로 View들을 가득 채울 때 사용하는 속성입니다.

2) fillEqually :

Stack View의 Axis(축) 방향으로 View들을 같은 크기로 가득 채울 때 사용하는 속성입니다.

3) fillProportionally :

Stack View의 Axis(축) 방향으로 View들이 갖고 있는 콘텐츠의 크기에 맞게 가득 채울 때 사용하는 속성입니다.

 

4) equalSpacing :

Stack View의 Axis(축) 방향으로 View들 사이의 공간을 갖게 만들고자 할 때 사용하는 속성입니다.

5) equalCentering : 

Stack View의 Axis(축) 방향으로 각각 View들의 중심 간의 거리를 갖게 만들고자 할 때 사용하는 속성입니다.

 

Alignment

1) fill : 

Stack View의 Axis(축)의 수직 방향으로 각각 View들이 Stack View에 가득 차도록 합니다.

2) leading : 

Stack View의 Axis(축) 방향이 수직방향일 때 View들을 왼쪽으로 정렬시킬 때 사용하는 속성입니다.

3) trailing :

Stack View의 Axis(축) 방향이 수직방향일때 View들을 오른쪽으로 정렬시킬때 사용하는 속성입니다.

4) firstBaseline : 

Baseline은 글자들의 밑줄을 맞춰주는 것인데 first이므로 맨 첫 번째 줄에 맞춰서 정렬시키고자 할 때 사용하는 속성입니다.

5) lastBaseline : 

Baseline은 글자들의 밑줄을 맞춰주는 것인데 last이므로 맨 마지막 번째 줄에 맞춰서 정렬시키고자 할때 사용하는 속성입니다.

6) top :

Stack View의 Axis(축) 방향이 수평방향일 때 View들을 아래쪽으로 정렬시킬 때 사용하는 속성입니다.

7) bottom : 

Stack View의 Axis(축) 방향이 수평방향일때 View들을 아래쪽으로 정렬시킬때 사용하는 속성입니다.

8) center : 

Stack View의 Axis(축) 방향과 수직방향의 크기의 중심을 맞춰 View들을 정렬해주고자 할 때 사용하는 속성입니다.