AutoLayout에 대한 개념과 필요성에 대한 내용에 이어서..
동적인 화면(View)를 구성하기 위해
구체적으로 어떠한 요소(속성)과 방식을 활용하는지 살펴볼 필요가 있습니다.
이번 포스팅에서는
AutoLayout을 구현하기 위한 속성, 그리고 방정식에 대해 다뤄보도록 하겠습니다.
(보다 자세한 내용은 공식문서 링크를 참고해주세요)
예시로 알아보는 AutoLayout
제약 설정을 위하여 속성(Attributes)과 방정식(Equations)을 활용, AutoLayout을 완성
AutoLayout을 구현하기 위하여
일종의 제약(Constraints)관계를 설정하는 과정이 선행된다는 것을 알고 계신다면..
아래 예시를 통해
'어떻게 제약관계를 형성하는 것인지?' 직관적으로 확인하실 수 있습니다.
(예시)View와 View간의 관계
- 2가지 색상의 View가 위치하고 있으며, RedView의 위치 제약을 설정하고자 합니다.
- [BlueView]의 위치는 고정되어 있으며, 두 View 모두 크기는 동일하다고 가정합니다.
- [RedView]는 [BlueView]의 우측(trailing)에서 8 point만큼 떨어진 곳에 위치합니다.
- 제약 관계를 나타낸 수식을 살펴보면, 다양한 속성(Attributes)이 활용되고 있습니다.
- View와 함께 '방향(Leading, trailing)', '승수(Multiplier)', '상수(Constant)' 등의 속성이 사용됩니다.
- 두 View간의 관계(Relationship)는 동일한 값을 나타내는 등호(=) 관계를 가지고 있습니다.
Equality ✅ , Not Assignment! ❌
- 위 예시에서 각 뷰간의 관계를 나타내는 등호(=)는, 할당 연산자가 아닙니다!
- 제약관계에서 활용되는 등호(=)는 수학에서 활용하는 'Equality'로서 활용됩니다.
- 다시 말해, AutoLayout은 다양한 속성(Attributes)와 방정식(Equations)으로 구성됩니다.
속성(Attributes)의 종류와 규칙
위치(Location)과 크기(Size), 2가지 속성을 통해 제약 기능을 정의
앞서 다룬 예시를 살펴보면, 제약을 위해 다양한 속성(Attributes)이 활용된 것을 확인할 수 있었습니다.
그렇다면,
구체적으로 어떠한 기능을 담당하는 속성들이 존재하며
호환되지 않는 속성으로 인한 규칙은 무엇이 있는지 알아보도록 하겠습니다.
Basic type of attributes
- 속성은 아래와 같이 크기(Size)와 위치(Location)로 구분됩니다.
- 크기(Size) : Width, Height
- 위치(Location)
Top, Bottom, Left(Leading), Right(Trailing)
Center Y, Center X, Baseline
- 'Leading', 'Trailing' 속성의 용어는 글이 시작하는 방향에 따라 명명되었습니다.
- Apple사는 미국에서 창립되었으므로, 왼쪽➟오른쪽으로 글을 읽는 방식에 따라
- 왼쪽이 선행(Leading)하며, 오른쪽이 후행(Trailing)하는 명칭으로 활용되고 있습니다.
Attributes rules
- 속성은 크게 2가지로 구분되나, 아래와 같은 차이점이 존재합니다.
- 크기(Size)는 위치의 표시 없이도 특정 항목의 크기를 결정할 수 있습니다.
- 반면에, 위치(Location)는 상대적 위치만 결정할 뿐 크기에 대해 결정하지 않습니다.
- 속성 간 호환이 되지 않는 특징에 따라, 다음과 같은 규칙이 적용됩니다.
1. Size attributes을 location attributes로 제한할 수 없다.
- 특정 항목의 크기가 결정된다면, 위치 속성을 통해 항목의 크기를 변경할 수 없습니다.
2. Location attributes는 상수값(constant)으로 설정할 수 없다.
- 기준이 되는 항목이 존재할 경우에만 설정할 수 있습니다 (위 예시 참고)
3. Location attributes는 multiplier로 1.0 이외의 값을 사용할 수 없다.
- multiplier, 즉 '승수'는 크기 속성에 활용되므로 당연히 1배수 이외 값은 무의미합니다.
4. Vertical attributes와 Horizontal attributes는 서로에게 제약(Constraint)을 할 수 없다.
- 당연합니다. 가로와 세로 속성간의 제약은 불가능합니다.
5. 특정 항목의 Leading을 다른 항목의 왼쪽(Left)속성에,
Trailing을 다른 항목의 오른쪽(Right) 속성에 제약할 수 없다.
- 당연합니다22.
Sample equations for a variety of common constraints
- 속성을 활용한 AutoLayout을 표현한 방정식 예시입니다 (참고)
// Setting a constant height
// height는 단순한 Size attributes 이므로, Attributes를 설정하지 않아서 multiplier는 0.0.
View.height = 0.0 * NotAnAttribute + 40.0
// Setting a fixed distance between two buttons
// Button_2는, Button_1의 오른쪽(trailing)에서 8 point 만큼 떨어져 있다.
Button_2.leading = 1.0 * Button_1.trailing + 8.0
// Aligning the leading edge of two buttons
// Button_1의 왼쪽(leading)은, Button_2의 왼쪽(leading)과 정렬(Alignment)되어 있다.
Button_1.leading = 1.0 * Button_2.leading + 0.0
// Give two buttons the same width
// Button_1과 Button_2의 너비(width)는 동일하다.
Button_1.width = 1.0 * Button_2.width + 0.0
// Center a view in its superview
// 하위 뷰(View)의 centerX 값은, 상위 뷰(Superview)의 centerX값과 동일하므로, 한 가운데 위치한다.
View.centerX = 1.0 * Superview.centerX + 0.0
View.centerY = 1.0 * Superview.centerY + 0.0
// Give a view a constant aspect ratio
// 특정 View의 높이(height)는, 해당 View의 너비(width)보다 2배 크다.
View.height = 2.0 * View.width + 0.0
AutoLayout 2번째 포스팅을 마무리하였습니다.
사실, 이번 포스팅의 내용이 해당 카테고리에서 가장 중요한 내용이 아닐까 싶습니다.
혹여라도 속성 혹은 방정식 관계에 대하여 헷갈리신다면..
직접 손으로 그려가며 이해하는 것도 좋은 공부 방법이 되지 않을까 싶습니다🥸
댓글