Auto Layout : 제약 공식

제약은 UI를 구성하는 요소사이의 관계를 설정하고
레이아웃 시스템은 제약을 기반으로 최종 프레임을 계산하고 배치합니다.

그리고 프레임 계산에는 item1.attr = multiplier*item2.attr + constant 공식이 사용되는데

공식에 대해서는 실습과 함께 자세히 알아보겠습니다.

---

먼저 버튼을 하나 추가해주겠습니다.

버튼에 대한 제약을 추가해주겠습니다.

다음 화면에 나와있는 제약에 대한 공식을

왼쪽[leading] : button.leading = 1.0 * view.leading + 50

위쪽[top] : button.top = 1.0 * view.top + 100

이렇게 표현할 수 있습니다.

방금 표현한 공식을 통해 프레임 계산 공식을 자세히 알아보겠습니다.

item1.attr = multiplier*item2.attr + constant

먼저 item1과 item2는 제약의 대상입니다.

보통은 뷰가 대상이 되지만, 레이아웃 가이드같은 기준점을 대상으로 사용할 수 있습니다.

또한 높이와 너비에 대한 제약을 지정할 때는 item2를 생략할 수 있습니다.

예제에서는 button은 item1, view는 item2로 사용됬음을 알 수 있습니다.

-

다음은 attribute 입니다. 줄여서 attr로 사용하였는데,

이는 제약을 적용할 속성입니다.

위의 예제에서는 leading과 top 같은 마진에 대한 속성을 나타내는 제약을 적용하였습니다.

-

multiplier 와 constant는

각각 곱(비율)과 제약조건(값)을 나타내는 수치로

예제에서 1.0과 50, 100으로 사용되었습니다.

---

내용출처 = https://www.youtube.com/watch?v=vDm71KDkMFE