지난 포스팅에서 다룬 내용을 간략하게 짚고 넘어가볼까 합니다.
UIKit에서 Storyboard 혹은 코드를 활용하여 뷰를 구성할 때,
일종의 '제약(Constraints)'을 설정함으로서 AutoLayout을 완성하게 됩니다.
구체적으로 제약이란,
1️⃣ 사이즈 혹은 위치를 나타내는 속성(Attributes)
2️⃣ 등호(=)를 통해 각 뷰간의 관계를 나타내는 방정식(Equations)
위 2가지 요소를 토대로 제약을 정의하게 됩니다.
이번 포스팅에서는
위에서 학습한 속성과 방정식을 활용,
올바른 제약 혹은 관계를 설정하기 위한 레이아웃을 나타내는
'모호하지 않은 레이아웃(Nonambiguous Layouts)' 에 대한 예시를 살펴볼까 합니다.
모호하지 않은 레이아웃 만들기 (1)
컴퓨터에게 정확한 명령, 즉 모호하지 않은 레이아웃 지침을 통해 AutoLayout을 완성
실습을 통해 아래 두 가지 상황&예시를 살펴보도록 하겠습니다.
- 자주 마주치는 레이아웃 오류(ambiguous error) ❌
- 모호하지 않은 레이아웃을 만들기 위한 3가지 방식 🟢
상위 뷰(superView) 내부에 또 다른 하위 뷰(subview, 이하 뷰)를 생성하고자 합니다.
뷰를 아래와 같이 정 중앙에 위치시키고자 합니다.
🖐🏻 모든 iPhone 디바이스에서 빌드 시, 반드시 뷰는 정 중앙에 위치해야 합니다.
(이번 예시에서는 Y축은 제약이 설정되어 있다고 가정합니다. 즉 X축에 대한 레이아웃만을 실습합니다)
1️⃣ 뷰 사이즈 임의 지정 & 위치 제약
- 뷰의 너비(Width) 크기 + 상위 뷰와의 제약(Constraints) 설정
- 뷰의 너비만을 지정하게 되면, 해당 뷰가 어디에 위치해야 하는지 알 수 없습니다!
(Size ✅) - 따라서, 상위 뷰의 Leading 혹은 trailing과의 제약을 통해 위치를 설정합니다.
(Location ✅)
- 뷰의 너비만을 지정하게 되면, 해당 뷰가 어디에 위치해야 하는지 알 수 없습니다!
2️⃣ 위치 제약을 통한 뷰 사이즈 설정 (1)
- 상위뷰와의 X축 일괄 제약을 통한 사이즈 및 위치 설정
- 뷰의 너비는 알 수 없으나, 상위 뷰와의 X축 제약관계를 설정합니다.
- 상위 뷰와의 Leading, trailing 일괄 제약을 통해 뷰의 크기, 위치가 모두 결정됩니다.
(Size, Location ✅)
3️⃣ 위치 제약을 통한 뷰 사이즈 설정 (2)
- 수평 정렬(Center horizontal)과 X축 제약을 통한 사이즈 및 위치 설정
- 뷰의 너비는 알 수 없으나, 상위 뷰의 가운데 수평정렬을 이룹니다.
(Location ✅) - 상위 뷰와 Leading 혹은 trailing 하나를 택하여 제약관계를 설정, 크기를 결정합니다.
(Size ✅, 대칭에 따라 Leading 혹은 Trailing의 제약값에 따라 나머지도 따라 변경됨)
(Center Horizontally - 수평 정렬에 따라, 뷰는 반드시 중앙에 위치해야 하기 때문)
- 뷰의 너비는 알 수 없으나, 상위 뷰의 가운데 수평정렬을 이룹니다.
AutoLayout 3번째 포스팅이 마무리 되었습니다.
이번 예시에서는 X축에 한정되어 제약을 설정하는 과정이었지만
Y축 또한 동일한 방식을 통해 AutoLayout을 완성시킬 필요가 있습니다.
결과적으로 Components의 [위치]와 [크기]만 알 수 있다면,
모든 디바이스에서 통용되는 모호하지 않은 '명확한 레이아웃'을 마주하게 될 것입니다.
다음 포스팅에서는 2개의 뷰를 활용한 모호하지 않은 레이아웃 예시를 살펴보도록 하겠습니다.
댓글