AutoLayout - 2

전편에 이어서 이번에는 일부러 에러를 만들어 보고, 뷰가 두개이상일 때를 가정해서 constrain을 주어보았다!

 

1. 4방면으로 constrain을 준다면 Xcode가 알아서 사이즈를 계산한다고 했는데 그렇다면 이상태에서

가로의 길이를 주게 되면 어떻게 될까??

 

위 사진과 같이 빨간 줄이 뜬다 왜냐하면 constrain을 통해 계산된 뷰의 사이즈는 227인데

내가 가로의 크기를 200으로 줬기 때문이다.

 그렇다면 이상태에서 실행을 하면 가로의 길이는 200이 될까 227이 될까??

일단 실행은 다행이 된다 그리고 Xcode에서는 Constrain값을 우선적으로 계산해서 실행을 시켜준다.



하지만 이런식으로 무섭게 에러가나는데 대충 읽어보면 constrain을 simultaneously(동시에?) satisfy(만족) 을 시킬수 없다고 나온다.

그러니까 똑똑한 Xcode가 우리가 설정한 가로값 200과 constrain값이 서로 충돌해서 동시에 만족시킬수 없었다. 라고 말해 주는 것.

 

2.뷰가 두개 이상일때 constrain 주기.

우리가 앱을 만들때 대부분은 하나뷰로 만들지 않는다.

오렌지색 뷰와 핑크색 뷰를 만들어 보았다.

constrain을 걸기전에 먼저 알아야 될 기본 지식은.

뷰에서 왼쪽은 Leading, 오른쪽은 Trailing, 위쪽은 Top, 아래쪽은 Bottom이다

따라서 위의 오렌지뷰에서 파란색 = Leading, 녹색 = Trailing, 검정색 = Top, 빨간색 = Red

 

그렇다면 위 그림에서 오렌지색 뷰와 빨간색 뷰의 왼쪽을 맞추고 싶다면

 

First item 자기자신, Second item 목표 뷰 이기 때문에 leading을 맞춰준뒤 똑같이 맞추기 위해서 constrain을 0으로 설정하면 된다!

지금 이상태에서는 constrain을 한 값만 줬기 때문에 AutoLayout이 적용이 안된 모습이다.

직접 설정해서 맞출 수도 있지만 이번에는 Missing Constrain기능을 이용해서 추가를 해보자.

오토레이아웃이 문제가 생겼을때 항상 빨간불이 들어오는 저 위에 빨간 화살표를 눌러보자.

똑똑한 Xcode가 어떤 constrain이 빠졌는지 알려준다.

 하얀점이 있는 저 빨간 버튼을 누르게되면

Missing Constrain을 추가해준다고 한다 모든 빨간 버튼을 클릭 한뒤에 Add를 누르게되면

이 처럼 우리가 의도했던 대로 오렌지 뷰의 Leading과 핑크 뷰의 Leading이 가지런하게 맞는 것을 확인 할 수 있다.

물론 이 방법은 Leading말고 다른 constrain을 추가로 주어야 할 때는 우리의 의도와는 다르게 만들어 질 수 있으므로 조심해야하지만

참 편리한 기능이다.

 

'개발하는 정대리'님 유튜브를 보고 정리한 것 입니다.

https://www.youtube.com/watch?v=rXA-kK3z4K4&list=PLgOlaPUIbynpvYsyKTrH2bpVlOCHkz6OY&index=2