Constraints Equal
[두개 이상의 View의 Constraints]
위와 같이 UIView로 화면을 구성하고 4방향의 Constraints를 20씩 설정해주자.
여기서 Trailing의 Constraints는 화면으로부터 20의 Constraints가 잡히는 것이 아니라 노란색 View부터 20의 Constraints가 잡히는 것이다!!!
[오류 발생1 - 왼쪽View, 오른쪽 View]
Constraints을 잡게 되면 위와 같이 에러가 뜨는 것을 확인 할 수 있다.
그 이유는 노란색 View의 Constraints가 제대로 잡히지 않아서이다.
보라색 View의 Trailing은 노란색 View와 Constraints를 공유하기 떄문에 노란색 View 입장에서는 Leading이 잡히게 된다.
그럼 이제 오류를 수정하기 위해서 노란색 View의 Constraints를 잡아보자. (top: 20, Trailing: 20, bottom: 20)
아직도 오류는 해결되지 않았다.
그 이유는 한개의 View가 있을 떄와 다르게 2개의 View가 있을 때는 Constraints만 잡아주는 걸로 View의 크기,위치가 잡히지 않는다. View의 Width를 바꿔주어도 Constraints는 20씩 유지가 되기 때문에 Constraints를 주는 것만으로 View의 정확한 크기와 위치가 정해지지 않는다. (아래 사진 참고)
따라서 우리는 정확한 Width사이즈를 정해줄 필요가 있다.
[오류 해결1 - 같은 Width]
두개의 View가 같은 Width로 설정할 때 우리는 아래의 방법을 사용할 수 있다.
- 두개의 View 동시에 선택하기 (command + click)
- Constraints 추가 - EqualWidths
두개의 View를 동시에 클릭해서 해도 되지만 Segue를 이용해서도 가능하다.
결과
[오류 발생2 - 위View, 중간View, 아래View]
이번에는 위 아래로 3개의 View를 놓고 Constraints를 추가해보자.
3개의 View를 동시에 클릭하고 한번에 Constraints를 추가해보자.
그러면 아래와 같이 오류가 난다.
[오류 해결2 - 다른 Height]
여기서 오류가 난 이유는 Height 또는 Y Position을 입력하지 않아서 위치, 크기를 정확하기 모르기 때문이다.
각각의 Height를 설정해서 해결해보자.
-
노란색 View의 Height를 설정한다. (120으로)
-
회색의 View 의 Height를 설정한다. (120으로)
이떄의 특이점은 우리가 파란색 View의 Height를 잡아주지 않았는데 오류가 해결되었다는 것이다.
그 이유는 이전에 우리가 3개의 View에 각각 20의 Constraints를 잡아주고 위 아래로 Height를 확실하게 알려주었기 때문에 중간의 파란색 View는 자동으로 자신의 Height를 추정해서 Height를 잡아주기 때문이다.
만약에 같은 크기로 오토레이아웃을 잡아야 하는 경우 첫 번째 오류 해결방법을 사용하고 다른 크기로 오토레이아웃을 잡아야하는 경우 두 번째 오류 해결방법을 사용하면 된다.
이제는 좀더 정교하게 Constraints를 잡아보자.
아래와 같이 View를 구성하고
Constraints를 두 View다 20씩 잡은후 Segue로 EqulWidths도 적용해보자. (이때 Segue로 뭐부터 시작하는지 기억)
이제 보라색 View를 선택해서 사이즈 인스펙터에서 EqualWidths의 Constant를 조절해주자. (Constant: 20)
조절해주면 아래와 같이 보라색 View의 크기가 늘어나게 된다. 즉, 크기는 갖은 조건에서 시작하는데 여기서 Constant를 추가하면 보라색 View의 Width와 빨간색 View의 Width가 Constant만큼 차이가 난다 (보라색 View의 Width: 187, 빨간색 View의 Width: 167)
그렇다면 빨간색 View를 선택해서 사이즈 인스펙터에서 EqualWidths의 Constant를 조절하면 빨간색 View의 Width가 늘어날까?
아니다. 아까 Segue로 EqualWidth를 설정해주면서 시작점을 보라색 View로 했기 때문에 크기 변화의 기준점을 보라색 View가 된다. 따라서 빨간색 View를 선택해서 사이즈 인스펙터에서 EqualWidths의 Constant를 조절하면 기준이 되는 View의 Width가 커지기 때문에 보라색 Width가 커지게 된다.
그렇다면 빨간색 View의 Width가 커질려면 어떻게 해야할까?
기준Viewdml Width가 0보다 작아지면 된다.
