Auto Layout

Constraint 설정

pinning 설정

editor 영역 우측 하단의 5개 버튼 중 3번째 버튼을 누르면 pinning 관련 constraint를 설정할 수 있다. 점선이 아닌 실선으로 표시된 부분만 적용되므로 주의하자.

그 이후 document outline에서 constraint들을 확인할 수 있다.

그 다음 특정 constraint를 선택한 다음 attirbute inspector에서 constraint 내용을 수정할 수 있다. Safe Area에 대한 constraint로 하면 화면 전체를 배경이 커버하지 못하기 때문에 superview로 바꾼다. 다른 component를 기준으로 한 constraint도 생성할 수 있다.

margin에 대해서도 설정이 가능하다.

alignment 설정

시작 화면의 로고와 같은 경우 가운데 정렬이 필요할 것이다. 정렬 관련 constraint는 2번째 버튼을 눌러서 설정할 수 있다.

View Embedding

첫번째 방법은 UI View를 하나 생성하여 기존 component를 안에 넣는 방법이다.

혹은 안에 넣으려는 component를 선택한 다음 Editor -> Embed In을 선택하면 새로운 View를 생성하여 해당 View를 안에 넣어준다.

Editor 우측 하단 버튼 중 맨 마지막 버튼을 눌러도 같은 작업을 할 수 있다.

Stack View

여러 component를 가로, 혹은 세로로 나열하기 위해 Stack View를 사용할 수 있다.

attribute inspector에서 subview들의 나열 방향과 각 subview 사이의 간격 등을 정할 수 있다.

Reference

https://www.udemy.com/course/ios-13-app-development-bootcamp/