Autolayout을 이용하여 뷰를 n등분 하기 [iOS]

내가 처음 아이폰 개발을 했을때는 매우 행복했다. 디바이스의 해상도가 320 * 480 한가지 해상도만 생각하며 작업하면 됬고 그때는 뷰를 그릴때도 그냥 20픽셀 떨어져있으면 20픽셀이라고 쓰면 됬었다. 지금은 조금 틀려졌다. 일단 아이폰만 한다고 하면 아이폰4s, 아이폰5, 아이폰6, 아이폰6+ 네가지 화면을 확인해야하고 아이패드까지 가면 화면은 더 늘어난다. 해상도도 다 틀려 20픽셀을 20픽셀이라고 쓰면 안되는 몸이 되어버렸다. 물론 이런 투덜거림은 안드로이드 개발을 하시는 분에게는 투덜거림으로 밖에 안보이겠지만 말이다.
애플이 낸 답은 Autolayout이다 이미 웹이나 다른 응용프로그램에서는 이와 비슷한 유형의 방법을 많이 사용하고 있다 상대좌표라고도 하는 이 방법은 뷰 영역의 왼쪽에서 a객체가 20픽셀 떨어져있고 a의 넓이는 50이고 b는 a와 40픽셀 떨어져있고 왼쪽과 10픽셀 떨어져있다 남은 영역이  b의 넓이다….등으로 굉장히 복잡하다!!!!! 하지만 이것을 적용하지 않으면 개발자가 일일이 좌표를 지정해주거나 손으로 계산해주는 수고를 해야한다. 또한 새로운 해상도가 생겼을때마다 이 작업을 계속 해줘야해서 가능하면 Autolayout을 사용하는것이 좋다.

간단한 예제를 만들어봤다 디바이스의 크기에 상관없이 뷰를 4등분 해주는 화면이다.

조건을 다음과 같이 설정하면 된다

 

ㄱ.1번뷰의 상단은 슈퍼 뷰의 최상단과 같다

ㄴ.n번 뷰의 하단은 n+1번뷰의 상단과 붙어있다

ㄷ.마지막 뷰의 하단은 슈퍼뷰의 최하단과 같다

ㄹ.모든 뷰의 높이는 같다

뷰들의 높이를 설정하지 않고 상단과 하단을 서로 붙여둔 후 ‘모든 뷰의 높이는 같다‘라는 조건을 지키기 위해 자연스럽게 뷰들의 높이는 n/1이 된다. 이를 응용하면 일정 영역 안에 오브젝트를 1/n식으로 자동으로 맞추어 정렬하는데 사용 할 수도 있다.

 

스크린샷 2016-03-22 오후 4.41.41스크린샷 2016-03-22 오후 4.42.22스크린샷 2016-03-22 오후 4.49.35

스크린샷 2016-03-22 오후 4.41.49스크린샷 2016-03-22 오후 4.42.25 스크린샷 2016-03-22 오후 4.49.38

 

 

예제다운로드

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.