Auto Layout - 사용법, 실습(두번째)

Auto Layout의 기본기능 살펴보기

Auto Layout을 사용할때 Constraints를 추가하는 것은 물론

한번에 모두 삭제하는 방법 등 더 많은 오류가 발생했을때의 대체법 또한 알아보겠습니다.

---

1. View 추가하기

ui view를 Main.stroyboard창에 추가한 후 잘 보이기 위해서 색을 변경합니다.

---

2. View에 Constraints 지정하기 

Add New Constraints를 이용하여 자유롭게 얼만큼씩 떨어트릴지 지정해봅니다.

*위쪽이나 오른쪽 등 한 부분을 설정했을때는 알맞는 크기를 지정을 못하기 때문에 오류가 발생하지만 네 부분을 모두 지정하고 Add 4 Constraints를 해준다면 각 부분이 어느정도씩 떨어져야 하는지 알 수 있기 때문에 그에 맞는 크기를 스스로 지정해줍니다.

---

3. View를 잘못 이동시켰을때 방법

 

다른 View를 옮겨야 하거나 생성시키려고 하다가

첫번째 View를 잘못 건드렸다면 크기를 하나씩 다시 맞추는게 아닌

Editor에 Update Frames를 눌러 원상태로 복귀시키거나

5개의 아이콘중 첫번째 아이콘을 눌러 View를 복귀 시킬 수 있습니다. 

*Update Frames 옆에 있는 단축키를 외우는 것도 하나의 방법입니다.

 

4. 모든 Constraints 지우기 , 부분 지우기

1) 설정을 처음부터 다시 하고 싶다면 부분적으로 지우는 것이 아닌 한번에 지우는 것이 편리할 수 있습니다. 

따라서 한번에 모든 Constraints를 지우는 방법은 하단의 5개의 아이콘 중 네번째 (뒤에서 두번째) 아이콘을 선택하여

Clear Constraints를 눌러주면 모든 Constraints가 지워지게 됩니다.

2) 부분적으로 지우는 첫번째 방법은 위의 아이콘들 중 show the size inspector에 들어가서

Horizontal부분에서 Constraints를 지워주거나 Vertical 부분에서 Constraints를 지워주면 된다.

3) 부분적으로 지우는 방법 두번째는 왼쪽 View 창을 나타내는 창에서

Constraints 부분을 눌러 아래로 펼친 후 원하는 설정 값을 누르고 Delete로 삭제해주면 된다.

 

5. 두개의 UI View에 Constraints 설정하기

그림과 같이 두개의 UI View를 동시에 Constraints를 주었으나 오류가 발생할 수 있습니다.

위와 같은 오류가 발생하는 이유를 살펴보니 두 View 모두 x축의 값을 스스로 지정할 수 없기 때문인 것 같습니다.

 

이와 같은 상황일때 해결 방법으로는 Add New Constraints에서

Equal Widths를 선택하여 x축의 값을 같게하여 주거나 

위와 같은 그림처럼 빨간View 또는 초록색 View에서

ctrl을 누른 후 마우스 오른쪽 버튼을 누르고 드래그 해주면 새로운 설정창이 뜨게 됩니다. 

설정창에서 같은 방법으로 Equal Widths를 선택해 주면 오류를 해결할 수 있습니다.

*Equal Widths : 같은 넓이로 설정해준다.

*Equal Height : 같은 높이로 설정해준다.

* 무엇때문에 오류가 발생한지 파악하는게 중요하다.

[X position or width] 같은 경우 x축의 포지션과 넓이 값을

설정해주지 않았다는 오류이기 때문에 두 view의 넓이 값을 같게 해주니 오류가 해결 되었다.

 

---

참조 영상 : https://www.youtube.com/watch?v=yLQG7gFZbGo