[Udemy iOS & Swift Bootcamp] Auto Layout And Responsive UIs

배경을 safe area 까지 확장하고 로고를 정 중앙에 배치해보자.

 

UI 객체에 제약조건을 설정하면 된다.

객체에 제약조건을 설정하면 왼쪽에 보이는 Constraints 부분이 생겨서 어떤 제약조건을 걸었는지 확인/수정할 수 있다.

 

화면 하단에 제약조건 생성하는 버튼들이 있다.

*가로 중앙 맞추기: Horizontally in Container

*세로 중앙 맞추기: Vertically in Container

 

*margin 설정할 땐 이부분 !

점선 -> 실선으로 바꾸고 margin을 주면 된다. 0이면 margin 없이 상하좌우에 딱 붙이겠다는 말!(확장!)

 

맨위아래가 Safe Area라는 맨위는 베터리표시, 맨아래는 화면 올리는 바?가 생기는 부분이다.

앱을 Safe Area 까지 채우고 싶다면 Superview로 설정하면 된다. Constant 는 0으로 !

 

추가로, 어떤 객체를 기준으로 정렬을 하고 싶다면 Constraints를 줄 때 기준값을 해당 객체로 설정하면 된다.

위 사진은 Text를 App Logo 이미지를 기준으로 30아래에 놓으라고 설정한 모습.

 

 

---

 

 

[View 설정하기]

한 화면에 여러개가 배치되어 있으면 기준을 잡기가 어렵기 때문에, 가로 or 세로 등 복잡한 UI를 배치하려면 View와 Stack View를 사용하자. 화면을 나누어서 View 를 지정해주고, View 들을 Stack View 로 엮어주는 것.

 

1) View 를 만드는 3가지 방법.

객체 추가에서 uiview 검색하기.

하단에 네모 클릭해서 View 만들기.

Editor > Embed in > View 로 만들기.

 

2. View의 이름을 바꿔서 헷갈리지 않게 하자. 속성의 Label 에 원하는 이름을 넣어준다.

 

3. 가로 or 세로로 Stack 쌓는 모양으로 보여줄 필요가 있을 땐 Stack View(Vertical/Horizontal)를 사용하자.

Stack View의 속성을 Vertical로 설정하고 배치 비율을 Equally 로 설정해주면 동일한 크기로 자동 설정된다.

 

4. 마지막으로 배경을 하얀색 -> 투명색으로 바꾸면 끗 !

 

5. 추가로 버튼의 텍스트를 텍스트 길이에 맞게 유연하게 맞추는 방법을 알아보자.

먼저 정중앙에 위치하도록 효과를 주면 아래와 같은 에러가 뜬다.

 

이 에러에서 Remove Constraint 를 Set Constraint to >= Current Width 로 변경해주자.

 

그럼 다음과 같이 텍스트 길이에 맞게 크기가 변동된다 !