Autolayout (1) - Constraints

Autolayout이란 

Auto Layout dynamically calculates the size and position of all the views in your view hierarchy, based on constraints placed on those views.

 

즉, Autolayout은 View의 크기와 위치를 제약조건(constraints)들을 사용하여 동적으로(dynamic) 결정합니다.

우리는 Autolayout을 사용해서 다양한 화면 크기에 대응할 수 있습니다.

---

Constraint

뷰를 동적으로 구성하게 하는 제약조건은 여러가지 속성을 가지고 있습니다.

이 중에서 근본적인 속성은 4가지입니다. 바로 상하좌우!

⬆️ 상: top        뷰가 위로부터 부터 떨어진 거리

⬇️ 하: bottom 뷰가 아래로부터 부터 떨어진 거리

⬅️ 좌: leading 뷰가 좌측으로 부터 떨어진 거리

➡️ 우: trailing  뷰가 우측으로 부터 떨어진 거리

 

그림과 같이 4가지의 속성값을 설정하여 귀여운 무민을 뷰에 배치할 수 있습니다.

 

 leading   VS    left  

leading: 화면을 보았을 때 좌측
left: 글자를 읽기 시작하는 부분

left는 왼쪽이지만 leading과 같이 화면의 좌측 속성을 의미하지 않습니다.

constraint에서 left는 글자를 읽기 시작하는 부분을 의미합니다‼️

 

대부분의 언어는 

글자를 👉 좌에서 우로 읽는 대부분의 언어 설정에서는 left는 좌측 제약조건을 의미합니다.

 

그러나 아랍어와 같이 

글자를 👈 우에서 좌로 읽는 언어 설정에서는 left는 우측 제약조건을 가리킵니다.

 

이처럼, left(right)는 지원하는 언어에 따라 달라지는 속성이기에 주로 leading(trailing)사용이 권장됩니다.

---

Safe Area

The safe area represents 
the portion of your screen that is unobscured by bars and other operating system based content

 

Safe Area는 노치와 같이 시스템에 의해서 가려지는 부분을 자체적으로 가린 영역을 의미합니다.

 

 

그림에 파랗게 표시된 영역이 Safe Area입니다. 

 

전체화면에서 상단 노치에 가려지는 상단(top)부분과 하단(bottom)부분이 제외되었습니다.

이때 하단부분이 제외되는 이유는 전체화면에 대한 비율을 맞추기 위해

자동으로 노치 반대 부분에도 그만큼의 마진이 들어가기 때문입니다.

 

스토리보드에서 constraint를 설정하면 기본적으로 safeArea를 기준으로 삼고 있습니다.

예를 들어, myView.leading = safeArea.leading + 20 과 같이 safeAfrea로 부터 얼마만큼 떨어져 있는지 설정됩니다.

 

 

 

 

 

 

 

Reference

https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/index.html#//apphttps://babbab2.tistory.com/134

 

🐣추천 튜토리얼