iOS 6에서 오토 레이아웃 시작하기. 파트 1-2

메모 iOS Human Interface Guidelines의 축약인 “HIG”는 좋은 유저 인터페이스 디자인을 위해 애플이 추천하고 있는 것을 포함한다. iOS 개발자들이 필수 적으로 읽어야 한다. HIG 어떤 UI 요소가 어떤 상황에서 사용하기 적합하고 사용하기 가장 좋은 방법을 설명한다. 여기에서. 이 문서를 찾을 수 있다.

두 개의 콘트롤 사이의 표준 공간은 제한되지 않는다. 제약조건은 뷰 처럼 수정할 수 있는 객체이다. 따라서 변경할 수 있는 속성이 있다.

두 개의 버튼 사이의 Vertical Space 제약조건 선택한다. 비록 약간 신경이 쓰이게 까다롭지만 캔버스에서 T자 바를 클릭하면 이 작업을 할 수 있다. 가장 쉬운 방법은 Documents Outline에서 제약조건을 클릭하는 것이다. 일단 그것을 선택하면 Attribute 인스펙터로 전환된다.

기본적으로 표준속성은 체크되어있다. 두 의 오브젝트 사이의 공간 제약사항은 8 포인트이다. 슈퍼뷰의 가장자리 주변 마진은 20 포인트이다. 얼마나 큰 제약조건인지 확인을 위해 Constant 필드에 40을 입력을 한다. 두개의 버튼은 좀 더 멀어졌다. 그러나 둘은 여전히 연결되어 있다.

앱을 실행하고 가로방향으로 회전해서 다음 효과를 확인한다.

두 개의 버튼의 수직 정렬은 확실하게 유지되고 있다. 그러나 수평 정렬은 그렇지 않다.

nib을 보면 위쪽 버튼과 캔버스의 왼쪽 가장자리 사이의 Horizontal Space 가 보인다. (적어도 필자가 한 것과 같이 대략적으로 버튼을 배치한 경우)

아래 레이블은 화면에서 수평적으로 중앙에 있다. 그러나 위쪽 버튼은 그렇지 않다. 항상 왼쪽 가장자리로부터 똑같은 거리를 유지한다.

멋지게 보이지 않는다. 그래서 대신에 다음 의도를 표현 할 것이다.

“아래쪽 버튼은 항상 수평적으로 가운데 있을 것이다. 그리고 위쪽 버튼은 아래쪽 버튼의 왼쪽 가장자리에 그것의 왼쪽 가장자리가 정렬 될 것이다.”

첫 번째 조건으로 제약조건을 이미 가졌다. 그러나 두 번째는 아니다. 인터페이스 빌더는 정렬을 위한 가이드를 보여준다. 그래서 그것의 왼쪽 가장자리가 아래쪽 버튼의 왼쪽 가장자리에 자석효과로 붙을 때까지 드래그 할 수 있다.

불행하게도 이 또한 두 버튼의 사이의 Vertical Space를 (적어도 가끔씩 드래그와 배치된 방법에 따라서) 삭제한다. 인터페이스 빌더는 그것이 거기에 있었고 뷰의 아래에 Vertical Space 포함해서 대체 하는 것을 간단하게 잊는다.

이것은 원하는 것과 다르다. 모든 방법으로 윈도우의 가장자리가 확장 된 것이 아니고 대신 두 버튼 사에 Vertical Space가 있어야 한다. 이러한 일이 일어났을 때 느껴지는 느낌은 다음 만화와 같다.

이전에 언급 한 바와 같이 제약조건을 그대로 유지하길 원하면 뷰 주위에 드래그 하는 것은 좋은 생각이 아니다. 두 버튼의 정렬하기 위한 좋은 방법이 있다.

우선 위쪽 버튼을 원래의 정렬되지 않은 이전 상태로 돌려 놓는다. Cmd 키를 누르고 두 버튼을 선택하기 위해 클릭한다. Editor 메뉴에서 AlignLeft Edges을 선택한다. 이것은 인터페이스 빌더에게 기존의 제약조건은 그대로 두고, 두 개의 버튼을 왼쪽 정렬을 원하는 것을 알려준다.

보는것 처럼 새로운 “Leading Alignment” 제약조건이 아래 버튼에 위쪽 버튼의 왼쪽 정렬을 유지하기 위해 추가될 동안에 이전 제약조건(아래 버튼의 Center X Alignment와 두 개 버튼 사이의 Vertical Space)은 여전히 존재한다.

팁: 정렬 옵션을 선택하기 위해 항상 Editor 메뉴로 갈 필요가 없다. 인터페이스 빌더는 오른쪽 아래 코너에 단축 메뉴를 가지고 있다.

가장 왼쪽 버튼은 정렬 메뉴를 연다.

이 옵션을 많이 사용하기 때문에 단축 메뉴를 사용하면 시간이 많이 절약 될 것이다.

앱을 실행하고 가로방향으로 회전해서 잘 작동하는지 확인한다.

어디로 가야 하나?

이제 오토 레이아웃의 첫 맛을 보았다. 어떻게 마음에 드는가? 익숙하기까지 시간이 살짝 걸릴 수 있지만 삶을 편안하게 만들어 주고 앱도 더 유연하게 된다.

더 배우길 원하면 계속해서 이 튜토리얼의 파트 2를 읽어라. 오토 레이아웃이 제공하는 가능성과 발생할 수 있는 문제의 더 나은 이해를 얻기 위해 인터페이스 빌더에서 버튼으로 계속해서 작업 할 것이다.

그리고 무엇보다도 실제 앱에서 찾을 수 있는 현실적인 레이아웃을 만들기 위해 오토 레이아웃을 사용 할 것이다.

어떠한 질문이나 의견이 있으면 포럼의 토론에 참여하라.