[iOS] AutoLayout기반 StoryBoard에서 기준점 없는 4인치 3.5인치 대응하기

++++++++++++++++++++++++++++++

최근 추가 : 이 방법은 추천하지않습니다. 

++++++++++++++++++++++++++++++

아이폰이 4인치가 나온지 2년 되어간다.

처음 4인치가 나왔을때 살짝 멘붕이 왔지만 애플의 대응법을 토대로 지금까지 잘~ 진행해 왔었다.

그런데 지금까지는 기준점이 있는 그러니까 화면상단이 기준이 되거나 하단이 기준이 되는 객체만 진행해 왔지 중간이나 기준점이 없는 객체들은 어떻게 처리 해야 할지 모르고 있었다. 

물론 코드로는 할 수 있지만 코드보다 Storyboard에서 무코딩으로 하고 싶었다.

혼자 끙끙되다 찾은 방법과 지인의 추가 설명으로 얻은 방법.

개발 환경은 다음과 같다.

Mac OS X 10.9.4

Xcode 5.1.1

iOS SDK 7.1

ARC 사용 AutoLayout사용, StoryBoard사용

간단한 예제를 만들어 보자.

먼저 새로운 프로젝트를 생성하고 나오는 Main.storyboard에 들어 가자

그다음 예제를 위해 ViewController의 Orientation을 Landscape로 바꾸고 사이즈도 3.5치로 줄여보자.

그리고 가로 120사이즈 서로 다른 색상의 버튼을 연달아 넣어주자 그러면..

이런 결과가 대에충 나올것이다.

테스트겸 아무런 작업을 안했을때 사이즈를 늘려보 자

4개의 모든 버튼들은 미동도 없이 왼쪽에 찰싹 붙어있다.

이제 작업을 진행해 보자 

화면의 사이즈가 3.5, 4인치를 왔다 갔다 하더라도 버튼의 사이즈는 고정 시킬것이다.

그리고 각 버튼들의 사이간격이 자동으로 늘어나거나 줄어들게 할것이다.

먼저 버튼의 사이즈를 고정 시켜보자. 

모든 버튼을 선택후 하단의 Pin버튼 을눌러 값을 고정 시키면 된다

그다음 화면사이즈가 변경 해도 고정이되는 버튼들이 있다 바로 처음 1번버튼과 4번버튼이다. 

1번버튼은 항상 왼쪽에 붙어 있어야 하며 4번버튼은 오른쪽 버튼에 붙어있어야 한다.

그 버튼들을 고정시키자

우선 1번버튼을 선택후 Pin으로 왼쪽 고정을 하자

똑같이 4번버튼을 선택해 오른쪽 고정.

여기까지 해보고 사이즈를 늘려보자 아마 4번 버튼만 덩그러니 떨어질것이다.

필자가 원하는건 2번과 3번이 일정한 간격을 유지 하여 떨어지게 하는것이 목표다. 

즉 한마디로 1번과 2번 버튼 사이의 간격 2,3번버튼 사이의 간격 3번과 4번 버튼 사이의 간격을 자동으로 넓히게 하고 싶은것이다.

다시 진행해 보자.

1번과 2번 버튼을 선택하여 상단메뉴의 Editor -> Pin -> Horizontal Spacing을 누르자 

한번더 반복한다 1,2번 버튼 사이에 2개의 Horizontal Spacing이 생기면 된다.

생성된 2개의 Horizontal Spacing중 하나를 선택해 Utilities메뉴의 attributes탭으로 이동해보자

거기서 Horizontal Space Constraint항목의 Relation을 Greater Than or Equal로 지정 하고 Constant를 0으로 지정 하자

다른 Horizontal Spacing를 선택해 같은 항목의 Relation을 Less Than or Equal로 지정 하고 Constant를 29로 지정 하자

(120 사이즈의 버튼 4개를 568사이에 넣었을때 서로 같은 간격을 유지하려면 버튼간 29.333의 간격이 나온다. 소수점이 들어 가지 않으니 29,29,30간격으로 지정하기로했다.)

이런식으로 2,3번버튼 사이

3,4번버튼 사이도 위에 처럼 지정해 주자

자이제 화면 사이즈를 늘려보자

4인치, 3.5인치에 따라 버튼들의 간격이 유지되면서 늘어나는것을 확인할수 있다.

실제도로 잘 동작 하는지 Run을 해보겠다.

3.5인치 4인치 모두 잘 나옴을 확인할수 있다.

지금까지 간단하게나마 기준점이 없는 AutoLayout의 예제를 통해 알아 보았다. 여기의 핵심은 Relation 값의 변화이다. 최소값과 최대값을 가지고 그이상, 그 이하로는 안떨어지게 하는것이다.

이게 정답이 아닐수도 있고 더 좋은 방법이 있을수도 있다.

더좋은 방법이 있다면 저도좀 알려주시길..ㅠ