[iOS] 오토레이아웃(Auto Layout)의 모든 것 - 1 (hugging, compression)

Auto Layout

오토 레이아웃은 동적으로 뷰의 사이즈와 위치를 뷰 계층구조에 맞게 조절합니다.

 

오토 레이아웃은 보통 제약들을 이용해서 정합니다.

제약은 일반적으로 두 뷰사이의 관계를 나타냅니다.

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

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

 

예를 들어 바깥 뷰로부터 위, 왼쪽, 오른쪽에서 각각 20씩 거리를 두고 a의 높이를 가진 뷰를 만들수 있습니다.

 

Auto Layout Without Constraints

스택뷰를 사용하면 제약을 설정하지 않고 오토레이아웃을 만들 수 있습니다.

스택뷰는 수평방향이나 수직방향으로 구성요소들을 배치하는데 스택뷰의 설정에 따라 자동으로 정렬할 수 있습니다.

그리고 스택 뷰안에 스택 뷰를 넣을 수도 있습니다.

 

Anatomy of a Constraint

간단한 오토 레이아웃 방정식

 

위의 식을 보기전에 아래 식을 볼게요.

여기서 보면 그린뷰의 trailing(오른쪽)은 레드뷰의 오른쪽보다 2배라고 되어있는데

밑에 그림에서 정사각형의 한 변의 길이는 100입니다.

 

현재 레드뷰는 오른쪽이 200만큼 떨어져있으니까

초록뷰는 오른쪽이 400만큼 떨어지면 됩니다.

그러면 초록뷰의 폭은 300이 되겠죠.

 

 

 

아래 그림에서는

레드뷰.trailing은 150입니다.

그러면 그린뷰.trailing은 300이겠죠

그래서 초록뷰의 폭은 250이 됩니다.

 

만약에 2 x RedView.trailing + 50을 한다면 그린뷰의 끝은 노란뷰의 끝까지 가겠죠.

 

Auto Layout Attributes

하나의 뷰를 기준으로 뷰의 위 아래 왼쪽 오른쪽 거리를 둘 수 있습니다.

뷰의 높이와 넓이를 정할 수 있습니다.

centerX는 x축(가로)의 중앙, centerY는 y축(세로)의 중앙입니다.

 

// Setting a fixed distance between two buttons
Button_1.trailing = 1.0 * Button_2.leading - 8.0
 
// Aligning the leading edge of two buttons
Button_2.leading = 1.0 * Button_1.leading + 0.0
 
// Give two buttons the same width
Button_2.width = 1.0 * Button.width + 0.0
 
// Center a view in its superview
Superview.centerX = 1.0 * View.centerX + 0.0
Superview.centerY = 1.0 * View.centerY + 0.0
 
// Give a view a constant aspect ratio
View.width = 0.5 * View.height + 0.0

 

Creating Nonambiguous, Satisfiable Layouts

오토 레이아웃을 설정할 때는 모든 값이 명백하게 정해져야 합니다.

즉 모호한 표현이 있으면 안됩니다.

 

폭에 관한 예시를 들어보겠습니다.

우리의 목적은 내부의 진한 회색사각형 뷰(이하 뷰)를 그리는 것입니다.

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

 

1. 왼쪽 예시

뷰의 폭을 알고 있습니다.

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

그래서 뷰의 왼쪽 제약을 정해줍니다. 

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

 

2. 가운데 예시

뷰의 폭은 알지 못합니다.

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

그러면 뷰의 폭은 슈퍼뷰에서 두 제약을 뺀 만큼이 되겠죠.

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

 

3. 오른쪽 예시

뷰의 폭은 알지 못합니다.

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

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

그렇다면 뷰의 오른쪽도 왼쪽과 대칭이 되기 때문에 뷰의 크기와 위치를 정확히 알 수 있습니다.

 

Constraint Inequalities

제약식에서 관계가 = 외에도 >=, <= 도 가능합니다.

 

// 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보다 커질 수 있습니다.

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

Constraint Priorities

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

옵셔널 제약도 만들 수 있는데 모든 제약은 1 ~ 1000 사이의 값을 가집니다.

1000을 갖는 제약은 필수제약이고 다른 값은 모두 옵셔널입니다.

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

 

Intrinsic Content Size

어떤 뷰는 뷰 내부의 컨텐츠에 따른 사이즈를 가지는데 이를 intrinsic content size. 라고 합니다.

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

 

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

 

 

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

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

Content hugging : 우선 순위가 높으면 최소 크기를 보장

* 우선순위가 높은 핑크색 라벨의 원래intrinsic content size를 보장함

 

 

Content compression : 우선 순위가 높으면 최대 크기를 보장

* 우선순위가 높은 주황색 라벨의 원래intrinsic content size를 보장함

 

 

 

기억하는 법!

hugging - 남을 끌어 당겨 (안는다)

compression - 남을 압축시킨다.