iOS 7 AutoLayout 과 topLayoutGuide 를 이용한 화면 맞추기

iOS 2.x 일 때 부터 개발을 해왔지만 그땐 메모리 관리도 잘 몰라서 자주 뻗고 그랬는데

어느덧 iOS 7 이 정식으로 공개가 되었습니다.

iOS7에서 UI가 급격하게 변하면서 개인적으로 가장 시급한 문제는 네비게이션 컨트롤러를 사용하지 않는 Single View 스타일의 앱을 업데이트 하면서 생긴 문제인데, 기존에는 상태바 아래부터 콘텐츠 배치가 되었으나, 이제는 모든 화면을 콘텐츠 영역으로 사용하게 되면서 개발자들에게 멘붕을 선물해주고있죠. ㅋ

기존 버전들과의 호환성을 맞추기 위해 iOS7에서도 여전히 상태바 영역만큼을 띄운 채로 보여주려면 하나하나 OS버전에 따라 분기를 해주거나 AutoLayout과 UIViewController.topLayoutGuide 를 사용해야 합니다.

일단 다른 앱들에 적용하기 전에 샘플로 하나 만들어보았습니다.

참고로 스토리보드에서만 가능하고 XIB 에서는 Top, Bottom Layout Guide가 나오지 않는다. XIB에서는 어떻게 하는지 좀 찾아봐야 할 듯 합니다.

일단 화면 구성은 메인 뷰 안에 UILabel을 하나 추가하고 시계 아래쪽에 보이도록 만듭니다.

그리고 Label의 y 값을 0으로 하고 SuperView에 맞춰진 경우 아래와 같은 화면을 보게 됩니다.

iOS6 에서는 기존대로 잘 나오게 됨.

iOS7 에서는 라벨이 상태바 영역을 침범하게 됨.

일단 여기서 한번 멘붕을 겪고 y 값을 20을 주고 띄워서 iOS7으로 실행해본다.

일단 잘 iOS7 에서는 잘 나오게 되지만..

iOS6 에서는 반대로 20pt 떨어져서 나오게 됩니다.

이렇게 되면 어떻게 처리해야 하나 한참 구글신께 물어보면 edgesForExtendedLayout 를 사용하라고 나오는데, 이런 답변은 대부분 iOS7 Beta 초반의 얘기들입니다.

이 방식으로는 아무리 셋팅을 해봐도 Single View 스타일의 앱에서는 효과가 없었습니다.

이에 대한 해결 방법은. UILabel을 선택하고 Xcode의 Utility 섹션(화면 우측)의 Size 탭에 가보면 아래와 같은 제약조건들이 설정되어있다.

여기서 중요한건 Top Space to 라고 되어있는건데 Xcode 4.5까지는 이 기본 보라색 속성을 지울 수가 없었죠.

하지만 Xcode 5 에서는 이 기본 속성도 삭제가 가능합니다.

일단 오른쪽 설정 버튼을 눌러 해당 제약사항을 삭제해버린다.

그리고 Status Bar가 있는것으로 생각하고 20포인트를 띄워준다. (UILabel.frame.origin.y = 20)

이제 왼쪽의 뷰 구조 쪽에서 제약 조건을 설정하고 싶은 객체를 선택하고 마우스 우클릭을 한 채로 위쪽에 보이는 Top Layout Guide로 끌어놓습니다.

그러면 위와 같이 Spacing 항목 두개가 뜨는데 Vertical Spacing을 선택하고 다시 오른쪽에 제약사항들 목록을 보면 Top Space to : Top Layout Guide 항목이 추가되어있습니다.

이제 실행해보면 아래와 같이 iOS6, iOS7 둘 다 똑같은 위치에 UILabel이 표시됩니다.

하지만.... 여기서 끝이 아닌것이, AutoLayout은 iOS6.0 부터 지원하는 기능이라 iOS4.3 ~ 5.x 까지는 여전히 따로 작업을 해줘야 하는 문제가 있습니다.

설명이 길었는데 중요한건 Top Space to 의 Target이 Superview 가 아니라 topLayoutGuide 가 되어야 한다는 것!