[Auto Layout] Equal Constraints에 대해서

 

 

코드로 하면 더 깔끔하지만, 공부하는 입장에서는 눈으로 보면서 하면 더 빠르게 이해가 가능하기 때문에 스토리보드를 사용해서 설명하였다.

 

복습하는 중에 혹시 놓칠만한 것들만 골라서 정리했으니,

auto layout을 한번이라도 써본 사람이라면 끄덕 끄덕 하면서 빠르게 읽고 넘어가면 된다...ㅎㅎ

 

 

Equal Constraints

 

Constraints는 "길이, 간격"으로 이해하면 된다.

Top Constraints를 10을 줬다는 것은, Top부터 10 간격만큼 떨어진 곳에 view를 배치했다는 뜻이다.

 

 

아래 왼쪽의 그림처럼 3개의 View가 있다고 가정하자.

우리는 저 View들의 간격과 높이를 일정하게 맞추어서 오른쪽 그림처럼 만들고 싶다.

 

 

 

 

엥 너무 쉬운거 아니야?

 

먼저 모두들 View들의 상하좌우 Constraints를 이런식으로 설정할 것이다.

 

 

 

 

이렇게 하면 모든 view들이 각각 20만큼 떨어져있게 되고, 좌우 간격이 0이 되어서 우리가 원하는 모양이 만들어질 것이라고 생각할 것이다.

 

하지만, storyBoard는 Auto Layout Error을 내뱉는다.

 

 

 

 

 

우리가 각각의 cell들의 Height를 알려주지 않았기 때문이다.

 

 

우리의 아이폰 화면이 400의 Height를 가진다고 가졍하면, 우리가 정해준 80(20 * 4)pt의 간격을 제외한 320을 어떻게 나눠줘야 할지, 스토리보드는 알지 못한다.

 

 

 

 

스토리보드 무죄!!

 

 

 

 

그렇다면 어떻게 알려줄 수 있을까?? 

 

 

우리가 늘 하듯이 height Constraints를 설정해줘 버리면, 당연히 문제가 생긴다.

 

화면의 크기가 기기마다 다르기 때문에, 400의 height를 가정하고 height constraints를 주면, 다른 크기에서는 우리가 원하는 모습이 나오지 않을 것이다.

 

 

 

 

답은 간단하다.

 

 

저 3개의 View를 설정하고, Equal Heights를 체크해주면 된다.

 

 

 

그러면 아까 남은 320의 길이를 자동으로 3개의 View가 "똑같이" 나눠가지게 되기 때문에, 우리가 원하는 모양이 만들어지는 것이다.