Tutorial: How to use Auto Layout in Xcode 6

유튜브 강좌 따라 하다가 Constraint 부분에서 헤맸어.

몇번 잘 못 누르니까 컴터 속도가 막 느려지고 그러더라구.

맥북에어라서 사양이 낮아서 그런가...

좀 사양 높은 걸 사야되나?

하여간 Constraint 부분을 좀 확실하게 알려고 써핑하다가 아래 글 발견.

한번 따라해 봐야지.

원문은 http://www.brianjcoleman.com/autolayout-xcode6/

Tutorial: How to use Auto Layout in Xcode 6

애플은 새로 iPhone 6 (4.7in) 와 iPhone 6 Plus (5.5in)를 발표했다. 현재의 iPhone 4 (3.5in), iPhone 5 (4in), and iPad (9.4in) 이외의 또 다른 크기의 디바이스가 생긴 것이다. iOS 개발자로서 우리는 오랫동안 안드로이드와는 다르게 그렇게 다양하지 않은 화면 크기들을 대상으로 개발하는 잇점을 누려왔다. 이제 다양한 화면크기의 iOS 기기가 나왔다. 여러분의 앱은 이제 이 다양한 화면 크기에서 운용 될 수 있도록 해야 한다. 그렇지 않으면 애플은 당신의 앱을 reject 할 것이다. 그리고 사용자들은 그들의 기기에서 당신의 앱이 제대로 작동하지 않는다고 불평을 해 댈 것이다.

아래는 코드를 사용하지 않고 Storyboard를 사용해서 constraint를 사용해 view를 control 할 수 있는 tutorial을 제공하고 있다. 이 방법을 따르면 auto rotation 기능도 함께 적용할 수 있을 것이다.

Constraint를 사용해 Interface 디자인 하기

    1. Single View Application template 으로 새 프로젝트를 만듬. 프로젝트 이름을 AutoLayout 으로 함
    2.  interface를 편집하기 위해 Storyboard를 선택함. constraint의 장점 중 하나는 코딩을 하지 않고도 여러가지를 처리할 수 있다는 것이다. 많은 auto layout 적용이 이곳 Storyboard에서 처리 될 수 있다.
    3.  4개의 labeled button들을 추가한다. 라이브러리에서 round rect button을 view로 네번 드래그 하면 된다. 파란 가이드 라인이 각각의 버튼을 해당 코너에 배치하는 데 도움을 줄 것이다. 각 버튼을 더블 클릭해서 title을 할당한다.

    4.  Run 함. 현재 autorotation은 세팅됐는데 아직 autosize attribute들은 세팅하지 않았다. 빌드하고 run 해 봐라. Hardware Rotate left를 선택하라. 그러면 시뮬레이터가 아이폰을 landcape 모드로 바꿀 것이다. 어떤 버튼들은 스크린 밖에 위치해 보이지 않을 것이다. 우리는 이 부분을 바로 잡을 것이다.

    5.  아래 그림은 Auto Layout Menu의 예를 보여주고 있습니다. 스토리보드의 오른쪽 아래부분에 있습니다. 우선 작업할 view를 선택하시고 작업할 버튼을 선택하시면 됩니다.

Align – 정렬하는 constraint를 생성한다. 예를 들어 두개의 view를 왼쪽 정렬하는 경우.
Pin – spacing constraint를 생성한다. 예를 들어 UI constol의 너비를 정의하는 경우
Issues – layout 과 관련된 issue들을 해결할 경우
Resizing – resizing 관련 세팅을 할 경우

6. 이제 우리의 constrait들을 적용해 봅시다. 왼쪽 위에 있는 버튼을 선택하세요. 이 버튼의 constraint를 변경하기 위해 Pin 버튼을 선택하세요. top에 20px을 그리고 left에 0px을 넣으세요. “Add 2 Contraints” 버튼을 눌러서 해당 사항들을 적용합니다.

7. 이제 해당 버튼을 선택하면 파란 가이드라인을 보실 수 있을 겁니다. constraint가 적용돼 있다는 것을 말합니다. 아마 top left 버튼에 대해 아직 파란 선은 보실 수 없을 텐데요. 아직 해당 위치의 constraint들은 default이기 때문입니다.

8. 이제 같은 작업을 나머지 3개의 버튼들에도 수행합니다.

9. Run 합니다. 각각의 버튼들이 가까운 corner에 제대로 위치해 있을 겁니다. 화면 밖으로 나갔던 버튼들이 화면 안으로 제대로 들어왔습니다. 

Auto Layout에 대한 팁


origin, width 그리고 height등을 설정하지 않고 Auto Layout을 사용해서 view들을 세팅하면 language 나 locale 이 변경 됨에 따라 위치나 크기가 재조정 될 겁니다. Auto Layout은 모든 디바이스들에 대해 .storyboard와 .xib 파일 세트를 생성합니다.


설정된 width constraint 제거. - text 의 크기가 재조정 되도록 합니다. 만약 width constraint를 설정하시면 어떤 view에서는 해당 텍스트가 일정 부분 짤려서 나올 수도 있습니다.


intrinsic content size 사용 - text 필드와 레이블의 default 는 resize automatically 입니다. 만약 view가 텍스트에 맞게 조정되지 않았다면 해당 view를 선택하고 Editor > Size To Fit Content를 선택하세요.


leading and trailing attributes를 사용 - constraint를 적용할 때 leading and trailing for horizontal constraints를 사용하세요. 그러면 좌우를 equivalent 하게 해 줄 겁니다. leading and trailing attributes는 horizontal constraints의 디폴트 입니다.

인접한 view들에게는 Pin을 사용 - Pin을 하면 도미노 효과가 나타납니다. 한 view가 텍스트에 맞게 크기가 재조정되면 다른 view들도 똑같은 적용을 받는 겁니다. 그러지 않으면 어떤 디바이스들에서는 view들이 겹쳐지게 될 겁니다.


layout change를 항상 테스트하라 - iPhone 4, iPhone 5, iPhone 6, iPhone 6 Plus, and iPad 등 다양한 화면 사이즈에서 테스트 하세요.

윈도우의 minimize size나 maximum size를 세팅하지 마라 - 그냥 자동으로 재조정되도록 하는게 좋습니다.


Auto Layout은 새로운 프로젝트를 생성할 때 디폴트로 설정할 수 있습니다. 이전의 프로젝트에 Auto Layout을 적용하려면 첫번째 View Controller의 첫번째 view 를 선택하고 File Inspector를 선택합니다. 그리고 “Use Auto Layout”를 선택합니다.