Auto Layout : Leading, Trailing, Top, Bottom 제약 추가

이번에는 뷰의 거리에 대한 제약속성들에 대해 알아보겠습니다.

해당 제약속성에는 leading, trailing, top, bottom, left, right가 있습니다.

 먼저 간단하게 개념을 설명하고, 실습과 함께 알아보겠습니다.

---

   leading은 왼쪽에서 오른쪽으로 글을 읽는 나라권에서 left 제약속성과 동일한 의미로 사용합니다.

   오른쪽에서 왼쪽으로 글을 읽는 나라권에서는 right와 같은 의미로 사용되며, 글의 시작 시점을 의미하는 속성입니다.

-

   trailing은 leading의 반대 경우로 사용되며, 글의 끝 시점을 의미하는 속성입니다.

-

   top은 윗 마진을 추가할 때 사용하는 속성입니다.

-

   bottom은 아랫 마진을 추가할 때 사용하는 속성입니다.

-

   left는 왼쪽에 대한 속성을 추가할 때 사용하는 속성으로, 잘 사용하지 않습니다.

-

   right는 오른쪽에 대한 속성을 추가할 때 사용하는 속성으로, 잘 사용하지 않습니다.

---

뷰를 하나 추가해주겠습니다.

뷰에 대한 제약조건을 추가해주는 화면을 보면

다음과 같이 입력필드에 기본값이 나타납니다.

이 값은 가까운 뷰에 대한 거리값이 기본값으로 나타난 것입니다.

또한 입력필드 옆에 화살표 아이콘을 클릭하면

뷰에 대한 기준 제약을 직접 지정할 수 있는 항목이 나타납니다.

Safe Area는 시스템과 UI와 뷰가 겹치지 않는 기준점에 대한 항목이고

View 는 가장 근접한 뷰에 대한 선택 항목입니다.

기본적으로 Safe Area를 사용하는 것이 좋습니다.

-

다시 본론으로 넘어와 각 마진에 40씩의 값을 주는 제약조건을 주겠습니다.

그럼 Leading, Trailing, Top, Bottom의 각 40씩의 마진을 주는 제약조건이 설정됩니다.

Document Outline을 통해 방금 추가한 제약조건을 확인 할 수 있습니다.

여기서 방금 추가한 4가지 제약이 보라색 배경의 view가 아닌 root view에 추가된 것을 보고 의문을 가질 수 있습니다.

그 이유는 마진에 대한 속성이나 두 view에 연관되는 속성은 가장 인접한 공통의 view에 추가되기 때문입니다.

방금 추가한 4가지 제약은 마진에 대한 속성이며 root view와 puple view 사이의 제약이기 때문에

공통적으로 인접한 root뷰에 적용된 것입니다.

---

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