Auto Layout : Width, Height 제약 추가

이번에는 뷰에 대해 너비와 높이에 대한 제약조건을 추가하는 방법을 알아보겠습니다.

너비와 높이 제약조건을 추가할 때에는 하나의 고정된 Constant 값으로 추가할 수 있으며,

다른 뷰와의 관계나 뷰를 추가할 수 있습니다.

---

Label과 View를 하나씩 추가하겠습니다.

Label에는 고정된 너비와 높이를 추가하겠습니다.

위쪽과 왼쪽으로부터 100, 너비와 높이 200의 제약조건이 추가되었습니다.

이번에는 View에 제약조건을 추가해보겠습니다.

View를 선택한 상태로 제약조건을 추가하는 화면을 보면

윗 마진에 대한 옵션이 있습니다.

현재는 바로 위에 Label이 있기 때문에 옵션 중 맨 아래 즉, Label로 부터의 마진으로 선택되어 있습니다.

Label에 관계없이 윗 마진을 주고싶을 땐 Safe Area나 View를 클릭하면 됩니다.

-

다시 본론으로 돌아와 Red View에 대한 제약조건을 추가해주겠습니다.

그럼 다음과 같이 빨간 선이 나타나게 됩니다.

이것은 Red View에 너비와 높이를 판단할 수 없기때문입니다.

Red View를 선택한 상태에서 CTRL를 누르고 Label에 드래그 앤 드롭 해줍니다.

그럼 여러가지 항목이 나오는데 SHIFT 키를 누른채로 Equal Widths와 Equal Heights를 선택해줍니다.

그럼 RedView의 너비와 높이가 Label과 동일해진 것을 확인할 수 있습니다.

여기서 제약조건이 추가된 Document OutLine을 보겠습니다.

Label에는 너비와 높이에 대한 제약조건만 추가되어있고,

다른 제약조건들은 Root View에 추가되어있습니다.

이유는 Label이나 RedView에 대한 제약조건이 아닌

Red View와 Label에 공통적으로 인접한 Root View에 대한 제약조건이기 때문입니다.

---

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