CLOSE SEARCH

Auto Layout #2. Auto Layout with Storyboard

Auto Layout을 사용하는 가장 손쉬운 방법은 Storyboard에서 제공하는 메뉴를 활용하는 것입니다. 두번째 글에서는 Storyboard에서 제약을 사용하는 방법과 Xcode에서 제공하는 Auto Layout 관련 기능에 대해 설명합니다. 이 글에 포함된 내용과 스크린샷은 Xcode 6.1.1 & iOS 8 버전을 기준으로 합니다. iOS 7과 iOS 8을 함께 지원하는데 필요한 내용도 함께 설명할 것입니다.

First Auto Layout

첫번째 Auto Layout 예제는 레이블과 버튼이 하나씩 포함되어 있는 UI를 구성하는 예제입니다. 각각의 컨트롤은 다음과 같은 요구사항을 가지고 있습니다.

  1. 레이블은 항상 화면 중앙에 위치합니다.
  2. 레이블은 문자열에 길이에 따라 자동으로 너비가 업데이트 되어야 합니다.
  3. 버튼은 화면 하단 중앙에 위치합니다. 부모뷰와의 하단 여백은 10pt 입니다.
  4. 버튼의 크기는 (100, 50)으로 고정되어야 합니다.
  5. 버튼을 클릭하면 미리 정의되어 있는 문자열 중 하나를 레이블에 출력합니다.
1. Xcode를 실행하고 새로운 Single View Application 프로젝트를 생성합니다. 프로젝트 이름은 “FirstAutoLayout” 또는 자신이 원하는 이름으로 지정합니다.

Xcode 5.x 이후의 버전에서는 기본적으로 Auto Layout이 활성화 되어 있고, Xcode 6.x 에서는 iOS 8에서 새롭게 도입된 Size Class가 추가로 활성화 되어 있습니다. iOS 8 이전 버전을 개발해야 한다면 File Inspector에서 활성화 설정을 변경해야 합니다.

스크린샷_2015-01-25_오후_7_19_02

2. 프로젝트가 생성된 후 Main.storyboard 파일을 선택합니다.
3. Object Library에서 Label 컨트롤을 찾아 Canvas에 추가합니다.

컨트롤을 Canvas의 이곳저곳으로 드래그하면 파란색 점선이 표시되는 것을 확인할 수 있습니다. 이 점선은 컨트롤을 쉽게 배치할 수 있도록 도와주는 가이드입니다.

스크린샷 2015-01-25 오후 7.43.24

Storyboard에 처음 추가된 컨트롤은 아무런 제약을 가지고 있지 않습니다. 만약 이 상태로 실행한다면 런타임에 사용될 기본 제약이 자동으로 추가됩니다. 이러한 제약을 Automatic Contraint라고 합니다. 이 제약은 고정된 크기와 위치를 가지고 있기 때문에 개발자의 의도와 다르게 표시될 수도 있습니다. Automatic Contraint는 뷰에 하나 이상의 제약이 추가되어 있을때는 추가되지 않습니다.

제약을 추가하기 전에 컨트롤을 미리 원하는 위치로 이동시켜두면 제약을 추가할 때 오류가 발생할 확률이 줄어듭니다. 하지만, 제약을 추가하면서 이러한 오류를 바로 해결할 수 있으므로 아무 위치에 추가해도 괜찮습니다. 위의 스크린샷에서는 Canvas 가운데에 컨트롤을 추가하고 있지만 첫번째 예제에서는 화면 중앙을 제외한 다른 위치에 추가합니다.

4. 방금 추가한 레이블을 선택한 후 Storyboard 하단 오른쪽에 있는 메뉴 중 Align 메뉴를 클릭합니다. Horizontal Center in Container 항목을 체크한 후 Add 2 Constraint 버튼을 클릭합니다.

 

스크린샷_2015-01-25_오후_8_02_13

Align 메뉴 다음에 있는 메뉴는 각각 “Pin”, “Resolve Auto Layout Issues”, “Resizing Behavior” 메뉴입니다. 각 메뉴의 사용법은 이어지는 섹션에서 자세히 설명하고 있습니다.

이제 1번 요구사항을 구현하기 위한 제약이 추가되었습니다. 제약이 추가된 후 Xcode 화면에는 몇가지 추가적인 정보가 표시됩니다.

컨트롤의 Size Inspector에는 추가된 제약의 목록이 표시됩니다.

Canvas에는 컨트롤 주위에 제약과 연관된 선이 표시됩니다.

스크린샷_2015-01-25_오후_8_20_22

예제에서는 노란색 선과 붉은색 점선이 표시됩니다. Auto Layout에서 노란색과 붉은색은 제약에 문제가 있다는 것을 뜻합니다. 만약 문제가 없다면 파란색 선으로 표시될 것입니다. 이 예제에서 문제가 발생하는 이유는 Canvas 상의 레이블 위치와 화살표로 표시된 런타임 상의 위치가 일치하지 않기 때문입니다. 이러한 오류를 “Misplaced Views”라고 합니다. 이 문제는 “Resolve Auto Layout Issues” 메뉴나 Document Outline에서 제공하는 메뉴를 통해 해결할 수 있습니다.

Document Outline에는 방금 추가한 제약이 표시됩니다. 여기에서 제약이 추가된 위치에 주목해야 합니다. 방금 추가한 제약은 레이블이 아니라 레이블의 상위 뷰에 추가되었습니다. 뷰의 위치와 관련된 제약은 뷰의 상위 뷰에 추가된다는 것을 기억해 두시기 바랍니다.

스크린샷_2015-01-25_오후_8_12_26

추가된 제약을 하나 선택하면 Canvas 표시된 제약이 강조됩니다. 그리고 Size Inspector와  Attribute Inspector에는 편집가능한 제약 속성이 표시됩니다.

스크린샷 2015-01-25 오후 8.52.24

이 Scene은 앞서 설명한 것처럼 “Misplaced Views” 오류를 가지고 있습니다. Scene에 Auto Layout 오류가 있다면 Scene 이름 오른쪽에 노란색 또는 빨간색 버튼이 표시됩니다. 이 버튼을 클릭하면 다음과 같이 오류의 목록이 표시됩니다.

스크린샷_2015-01-25_오후_8_31_06

각 오류 항목의 오른쪽에는 오류를 수정하는데 필요한 메뉴가 제공됩니다. 화살표로 표시된 노란색 버튼을 클릭하면 다음과 같은 팝업 메뉴가 표시됩니다.

스크린샷 2015-01-25 오후 8.33.31

Misplaced Views 오류는 세가지 방식 중 하나로 해결할 수 있습니다.

  • Update Frame : 뷰의 Canvas 위치를 런타임 상의 위치로 업데이트 합니다. 이 경우 뷰에 추가되어 있는 제약에는 변화가 없습니다.
  • Update Constraints : 뷰에 추가되어 있는 제약을 Canvas 상의 위치에 적합한 제약으로 업데이트 합니다. 이 경우에는 뷰의 속성이 업데이트 됩니다.
  • Reset to Suggested Constraints : 뷰에 추가되어 있는 제약을 모두 제거하고 가장 적합한 제약을 자동으로 추가합니다. 하지만 새롭게 추가된 제약은 개발자의 의도에 부합하지 않을수도 있습니다.

Update Frame 항목을 선택한 후 Fix Misplacement 버튼을 클릭합니다. 그러면 레이블은 Canvas 중앙으로 이동하고 노란색 선도 파란색 선으로 변경됩니다. 이와 같은 상태가 모든 제약이 올바르게 설정된 상태입니다. Document Outline에 표시되어 있던 노란색 버튼도 더 이상 표시되지 않을 것입니다.

스크린샷 2015-01-25 오후 9.08.15

 5. 또 다른 내용을 살펴보기 위해 Command + z 키를 눌러 이전 상태로 돌아갑니다. 레이블을 선택한 상태에서 “Resolve Auto Layout Issues” 메뉴를 선택합니다. 그런 다음 Clear Constraints 메뉴를 선택하여 레이블에 추가되어 있는 모든 제약을 삭제합니다.

6. 4번 단계에서 추가했던 것과 동일한 제약을 추가하되, Update Frame 메뉴를 클릭한 다음 Items of New Constraints 항목을 선택합니다.

스크린샷_2015-01-25_오후_9_15_22

4번 단계의 결과와 달리 레이블이 Canvas의 중앙으로 자동으로 이동하고 Misplaced Views 오류도 발생하지 않습니다. 이처럼 Update Frame 메뉴를 통해 새로운 제약을 추가할 때 뷰의 Canvas 위치가 런타임 위치와 다른 경우 자동으로 업데이트 할 수 있습니다. Items of New Constraints 항목은 새롭게 추가되는 제약의 대상 뷰만 업데이트 하지만, All Frame in Container 항목을 선택하면 Scene에 추가되어 있는 모든 뷰가 업데이트 됩니다.

7. Button을 Canvas에 추가한 다음 타이틀을 “Update”로 수정합니다.

스크린샷_2015-01-25_오후_9_27_10

8. Align 메뉴를 클릭한 다음 Horizontal Center in Container 항목을 선택합니다. 나머지 항목은 기본으로 두고 Add 1 Constraint 버튼을 클릭합니다.

스크린샷_2015-01-25_오후_9_29_26

이 시점에서 발생하는 레이아웃 오류는 조금 후에 수정할 것으므로 무시하고 다음 단계로 넘어갑니다.

9. Pin 메뉴를 클릭합니다. 다음 스크린 샷과 같이 아래쪽에 해당하는 I바를 클릭하고 텍스트필드에 10을 입력합니다. 다른 항목은 기본값으로 두고 Add 1 Constraint 버튼을 클릭합니다.

스크린샷_2015-01-25_오후_9_36_37

9번 과정까지 완료하면 3번 요구사항을 구현하기 위한 제약이 모두 추가된 것입니다.

iOS 8에서 새롭게 추가된 Layout Margin은 Auto Layout의 동작에 영향을 줍니다. Constrain to margins 메뉴가 체크되어 있다면 뷰의 경계가 아닌 Layout Margin을 기준으로 계산됩니다. 예를 들어 버튼을 포함하고 있는 뷰의 Layout Margin이 (10, 10, 10, 10)이고 Constrain to margins 메뉴를 선택한 상태에서 제약을 추가했다면 버튼의 하단과 뷰 사이의 거리는 20pt가 됩니다. 그러나 Constrain to margins 메뉴를 선택하지 않았다면 10pt가 됩니다. 이 기능은 iOS 8에서 지원하는 기능이기 때문에, iOS 8 이외의 버전을 지원해야 한다면 반드시 Constrain to margins 메뉴를 선택하지 않아야 합니다. 그렇지 않을 경우에는 크래시가 발생하거나 레이아웃이 의도한 것과 다른게 출력될 수 있습니다.

10. 버튼에 추가된 제약의 Misplaced Views 오류를 해결하기 위해 Resolve Auto Layout Issues 메뉴를 클릭합니다. Selected Views 섹션에 있는 Update Frames 항목을 선택합니다.

스크린샷_2015-01-25_오후_9_43_02

Resolve Auto Layout Issues 메뉴에서 제공하는 항목의 역할은  Document Outline 에서 제공하는 팝업 메뉴(4번 단계 참고)의 역할과 동일합니다. Add Missing Constraints 항목은 Canvas 상의 위치를 기반으로 부족한 제약을 자동으로 추가합니다. Clear Constraints 항목은 모든 제약을 삭제합니다. Selected Views 섹션의 항목들은 현재 선택되어 있는 뷰를 대상으로 동작하고, All Views in View Controller 섹션의 항목들은 이름처럼 Scene에 추가되어 있는 모든 뷰를 대상으로 동작합니다.

11. 버튼을 선택한 다음 Pin 메뉴를 클릭합니다. 이전에는 Width, Height 항목을 체크한 다음 각각 100, 50을 입력합니다. 제약을 추가할 때 버튼의 프레임이 자동으로 업데이트 되도록 Update Frames 항목을 Items of New Constraints로 변경한 다음 Add 2 Constraints 버튼을 클릭합니다.

스크린샷_2015-01-25_오후_9_51_43

이제 4번 요구사항을 만족시키기는 제약이 추가되었습니다.

6번 과정에서 Update Frames 항목을 None이 아닌 다른 항목으로 선택하면 Misplaced Views 오류가 발생하지 않는다고 설명했습니다. 하지만 Xcode 6.1.1 버전에서 예제를 만들고 있다면 크기가 변경된 버튼이 화면 중앙에 정확히 위치하지 않아서 Misplaced Views 오류가 발생할 것입니다.(6.1.1 이전 버전에서 동일한 문제가 발생하는지는 확인하지 못했습니다. 이러한 문제는 새로운 버전에서 수정될 것입니다.)

12. 앞서 설명한 방법 중 하나를 사용해서 Misplaced Views 오류를 해결합니다.

스크린샷 2015-01-25 오후 10.24.16

13. 지금까지 추가한 제약이 올바르게 적용되는지 확인합니다.

실제 디바이스나 시뮬레이터를 통해서 확인할 수 있지만, Xcode에서 제공하는 Preview를 활용하면 결과를 더욱 편리하게 확인할 수 있습니다.

14. Assistant Editor를 표시한 다음 Jump bar에서 Automatic 항목을 클릭합니다. 그런 다음 표시된 팝업 메뉴에서 Preview > Main.storyboard (또는 대상 스토리보드 항목)를 차례대로 선택합니다.

스크린샷_2015-01-25_오후_10_27_45

기본적으로 하나의 미리보기가 추가되어 있습니다. 하단 왼쪽에 있는 + 버튼을 클릭하여 필요한 미리보기를 추가할 수 있습니다.

스크린샷_2015-01-25_오후_10_34_59

스크린샷 2015-01-25 오후 10.36.31

미리보기 중 하나를 선택한 다음 Delete 키를 누르면 삭제됩니다.

미리보기 하단에 있는 디바이스 이름에 마우스 포인터를 가져가면 왼쪽에 버튼이 표시되고, 이 버튼을 클릭하면 미리보기를 가로/세로 방향으로 회전시킬 수 있습니다.

스크린샷_2015-01-25_오후_10_40_23

화면 방향이나 크기에 관계없이 레이블은 항상 화면 중앙에, 버튼은 항상 하단 중앙에 위치하는것을 확인할 수 있습니다. 하드 코딩 방식으로 동일한 UI를 구현했다면 화면 크기와 방향에 따라 좌표를 계산하는 코드가 필수였겠지만, Auto Layout를 통해서 몇번에 클릭만으로 원하는 결과를 얻게 되었습니다!

15. Assistant Editor에서 ViewController.m(ObjC) 또는 ViewController.swift(Swift) 파일을 엽니다.
16. 레이블을 myLabel 아웃렛과 연결하고, 버튼을 onMyAction 액션과 연결합니다.
17. onMyAction 메소드를 다음과 같이 구현합니다.

18. 앱을 실행한 다음 버튼을 누를때마다 레이블의 문자열이 변경되는지 확인합니다.(간혹 동일한 문자열이 연속해서 나올수도 있습니다.^^;)

레이블을 주목해서 봐야 합니다. 어떤 길이의 문자열이 표시되더라도 문자열이 잘리지 않을 것입니다. Canvas 에 추가되어 있는 레이블의 너비는 분명 iMac Retina 5K와 같은 문자열을 모두 표시하기에는 부족합니다. 그리고 레이블을 선택한 다음 Attributes Inspector를 확인해 보면 Line Breaks 항목이 Truncate Tail로 설정되어 있습니다. 바로 이 시점에서 Intrinsic Size와 Auto Layout의 콜라보가 진가를 발휘합니다.(Intrinsic Size에 대한 내용은 첫번째 글을 참고해 주세요.)

시간을 조금 거슬러 올라가 6번 단계에서 레이블의 제약을 추가할 때, 위치와 관련된 2개의 제약을 추가했지만 크기와 관련된 제약은 추가하지 않았습니다. 레이블과 같이 Intrinsic Size를 가지고 있는 뷰들은 너비/높이 제약을 제공하지 않으면 Intrinsic Size를 사용합니다.

실제로 너비가 변하는지 좀 더 확실하게 확인해 보겠습니다.

19. 레이블에 배경색상을 지정한 후 다시 실행결과를 검토합니다.

스크린샷 2015-01-26 오전 11.46.29

스크린샷 2015-01-26 오전 11.46.37

스크린샷 2015-01-26 오전 11.46.41


레이블의 배경색상을 통해 너비의 변화를 확실히 확인할 수 있습니다. 이렇게 문자열의 길이에 따라 너비가 변경되는 것은 레이블이 자신에게 할당된 문자열이 변경될 때마다 Intrinsic Size를 함께 업데이트하기 때문입니다. 너비/높이 제약을 추가하지 않는 것만으로 이 예제의 2번 요구사항을 자연스럽게 만족시킬수 있습니다.

첫번째 글에서 뷰에 너비/높이 제약을 추가하는 것은 Auto Layout에서 피해야할 안티패턴이라고 설명했습니다. 이제 그 이유를 확인해 보겠습니다.

20. 레이블은 선택한 후 Pin 메뉴를 클릭합니다. Width, Height 항목을 체크한 후 Add 2 Constraints 버튼을 클릭합니다.

스크린샷_2015-01-26_오후_12_01_17

이제 레이블에는 고정된 너비/높이 제약이 추가되었습니다. 레이아웃 시스템은 이전과 달리 Intrinsic Size를 무시하고 방금 추가한 제약을 사용해서 레이블을 출력합니다.

21. 실행결과를 다시 검토합니다.

스크린샷 2015-01-26 오후 12.05.13

스크린샷 2015-01-26 오후 12.05.25

스크린샷 2015-01-26 오후 12.05.33


19번 단계의 실행결과와 달리 레이블의 너비가 항상 고정되어 있고, Truncate Tail 설정에 따라 레이블의 너비보다 긴 문자열은 뒷 부분이 …으로 출력됩니다. 만약 너비/높이 제약을 추가한 상태에서 이전과 같은 결과를 얻으려면 문자열의 너비를 계산한 후 width 제약의 constant 값을 업데이트하는 과정이 필요합니다.

이제 너비/높이 제약을 안티패턴이라고 설명한 이유가 확실히 이해되었을 것입니다. 레이블 뿐만 아니라 버튼과 같이 문자열과 같은 내용이 클리핑 없이 출력되는 것이 중요한 뷰에서는 Intrinsic Size를 활용하는 것이 좋습니다. 만약 너비/높이 제약을 반드시 추가해야 하는 경우라면 = 보다는 >=, <= 관계를 가지도록 하는 것이 좋습니다.

 

Ctrl + Drag

지금까지는 Align, Pin 메뉴를 통해서 제약을 추가했습니다. Xcode는 제약을 더 쉽게 추가할 수 있는 기능을 제공합니다. Outlet, Action을 연결할 때처럼 뷰를 선택한 후 다른 대상으로 Ctrl + 드래그 하면 설정할 수 있는 제약의 목록이 팝업으로 표시됩니다.

앞에서 작성했던 예제에 다음과 같은 요구사항을 추가해보겠습니다.

  • 레이블 하단에서 5pt 떨어진 위치에 새로운 뷰를 추가합니다.
  • 뷰의 배경색상은 빨간색으로 지정합니다.
  • 뷰는 가로 중앙 위치는 항상  레이블의 가로 중앙 위치와 동일합니다.
  • 뷰의 너비는 항상 레이블의 너비와 동일합니다.
  • 뷰는 4pt의 고정된 높이를 가집니다.

 

22. 레이블에 추가되어 있는 크기 제약을 삭제합니다.

제약은 세가지 방법으로 선택할 수 있습니다. 첫번째 방법은 Canvas에서 바로 선택하는 방법입니다. 레이블 아래쪽에 표시되어 있는 I빔을 클릭하면 다음과 같이 너비 제약을 선택할 수 있습니다.

스크린샷 2015-01-26 오후 12.48.03

좁은 공간에 여러 제약이 위치하고 있어서 선택하기 어려울 경우에는 Shift + R-Click(또는 Shift + Ctrl + L-Click)을 통해 제공되는 팝업 메뉴를 활용할 수 있습니다.

스크린샷 2015-01-26 오후 12.53.27

두번째 방법은 Document Outline에서 선택하는 방법입니다.

스크린샷 2015-01-26 오후 12.53.59

세번째 방법은 레이블의 Size Inspector에서 선택하는 방법입니다.

스크린샷 2015-01-26 오후 12.55.30

첫번째 방법과 두번째 방법 중 하나를 사용하여 너비/높이 제약을 삭제합니다.

23. Canvas 에 View(UIView)를 추가합니다. 레이블 아래쪽에 적당한 크기로 위치시키고 배경색을 빨간색으로 지정합니다.(2번 요구사항)

스크린샷 2015-01-26 오후 1.02.24

24. 방금 추가한 뷰를 선택하고 Ctrl 키를 누른 상태로 포인터를 뷰에서 레이블로 드래그 합니다.

스크린샷 2015-01-26 오후 1.08.22

위의 스크린샷과 같이 드래그 경로가 선으로 표시되고 대상 뷰는 파란색 박스로 강조됩니다. 마우스 포인터를 놓으면 설정할 수 있는 제약의 목록이 표시됩니다. 표시되는 목록은 드래그 경로의 각도와 대상 뷰의 종류에 따라 달라집니다. 이 예제에서는 두 뷰 사이의 공백 제약을 추가하기 위해 약간 비스듬한 경로로 드래그합니다. 두 뷰 사이를 수직 경로로 드래그하면 팝업 메뉴의 목록이 달라지는 것을 확인할 수 있을 것입니다.

25. 팝업 메뉴에서 Vertical Spacing 항목을 선택합니다.

스크린샷 2015-01-26 오후 1.10.48

 

각 항목 중 하나를 선택하면 Canvas의 위치와 크기를 기반으로 제약이 추가됩니다.

26. 방금 추가한 제약을 선택한 후 Attributes Inspector에서 Constant 항목을 5로 수정합니다.

스크린샷_2015-01-26_오후_1_18_28

이제 첫번째 요구사항을 만족시키는 제약이 추가되었습니다. Scene에 존재하는 제약 오류들은 일단 무시합니다.

27. 다시 뷰를 선택한 후 레이블로 Ctrl + 드래그 합니다. 팝업 메뉴에서 Center X 항목을 선택합니다.

스크린샷_2015-01-26_오후_1_21_56

참고로 이미 추가되어 있는 제약이 있다면 해당 항목 앞에 흰색 원이 표시됩니다.

28. 방금 추가한 제약을 선택한 후 Attibutes Inspector에서 Constant 값을 0으로 수정합니다.

Ctrl + 드래그 방식을 사용해서 제약을 추가하기 전에 미리 Canvas 상의 프레임 위치를 제약의 위치와 일치시키면 Constant 값을 수정하는 과정이 필요없어 더욱 편리하게 제약을 추가할 수 있습니다.

이제 3번 요구사항을 만족시키는 제약이 추가되었습니다.

29. 다시 뷰를 선택한 후 레이블로 Ctrl + 드래그 합니다. 이번에는 Equal Widths 항목을 선택합니다.

스크린샷_2015-01-26_오후_1_30_59

이제 4번 요구사항을 만족시키는 제약이 추가되었습니다.

30. 다시 뷰를 선택한 후 Ctrl + 드래그를 하되, 이번에는 레이블이 아닌 뷰 내부의 다른 영역으로 드래그 합니다.

스크린샷 2015-01-26 오후 1.34.15

31. 팝업 메뉴에서 Height 항목을 선택합니다.

스크린샷_2015-01-26_오후_1_37_21

32. 방금 추가한 제약을 선택한 후 Attributes Inspector에서 Constant 값을 4로 설정합니다.

이제 예제의 조건을 만족시키는 모든 제약이 추가되었습니다. 하지만 빨간색 뷰의 Canvas 위치가 런타임 위치와 일치하지 않는 Misplaced Views 오류를 가지고 있습니다.

33. Misplaced Views 오류를 해결합니다. 이번에는 메뉴바를 사용합니다.

스크린샷 2015-01-26 오후 1.42.58

34. 실행 결과를 검토합니다.

스크린샷 2015-01-26 오후 1.45.09

스크린샷 2015-01-26 오후 1.45.23

스크린샷 2015-01-26 오후 1.45.17

 

 

Recap

이번 글에서는 단순한 UI 요구사항을 정의하고, 이 요구사항을 만족시키는 제약을 추가하는 방법을 살펴보았습니다.

  • Xcode 5.x 이후 버전에서는 Auto Layout이 기본적으로 활성화 되어 있습니다. File Inpector에서 Auto Layout, Size Class의 활성화 설정을 변경할 수 있습니다.
  • Canvas에 처음으로 추가된 컨트롤은 어떠한 제약도 가지고 있지 않습니다. 만약, 제약을 추가하지 않은채로 실행한다면 런타임에 사용될 Automatic Constraint가 자동으로 추가됩니다.
  • Storyboard는 Auto Layout과 연관된 4개의 메뉴를 제공합니다. 이 메뉴들이 제공하는 일부 기능들은 메뉴바, Document Outline 에서도 사용할 수 있습니다.
  • 뷰에 추가된 제약에 오류가 있을 경우 Canvas에서 노란색 또는 빨간색으로 표시됩니다. 그리고 Document Outline에서 오류 목록을 확인하고 수정할 수 있습니다.
  • Preview 기능을 활용하면 제약이 적용된 UI를 쉽게 확인할 수 있습니다.
  • 너비/높이 제약 대신 Intrinsic Size를 활용하는 것이 좋습니다.
  • Ctrl + 드래그를 통해 제약을 간편하게 추가할 수 있습니다.

 

 

Filed under: iOS, Swift

  1. mspark
    정말 좋은 내용입니다. 덕분에 오토레이아웃 많이 배우고갑니다! 감사합니다!
  2. 프로그램을 깍는 아재
    오호,,,,,정말 잘봤습니다.
  3. 이제막배움
    감사합니다. 초보들에게는 단비같은 강의입니다. 계속 기다립니다.
  4. 초보개발자
    감사합니다 덕분에 많은 도움 되었습니다 ㅎ

  5. Warning: printf() [function.printf]: Too few arguments in /www/meetkei_com/wordpress/wp-content/themes/Sparrow/functions.php on line 549
    […] Auto Layout #2. Auto Layout with Storyboard […]
  6. […] http://meetkei.com/?p=3460 […]
  7. […] Auto Layout #2. Auto Layout with Storyboard […]