개막사

최근 Auto Layout의 기사를 자주 볼 수 있는데, 뷰를 등거리로 배열한 기사를 지리적으로 잘 이해할 수 없기 때문에 내가 모바일 샘플 코드로 이해한 내용을 적어보려고 한다.
Auto Layout 실행 계기
http://blog.jarinosuke.com/entry/auto-layout-best-practice
샘플 초절도 참고: "코코아의 일상-Autolayout 등거리로 보기 배열"
http://cocoadays.blogspot.jp/2014/01/autolayout_7.html
공식 참고로도 있어요.
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/AutoLayoutbyExample/AutoLayoutbyExample.html
Auto Layout 카드(일본어 pdf)
https://developer.apple.com/jp/devcenter/ios/library/documentation/AutolayoutPG.pdf

View 등거리를 배열합니까?

화면의 너비와 높이가 변경되면 여러 위치 관계가 등거리로 변하는 등 View 등거리를 정렬합니다.
하지만 뷰 등의 간격만 배열하면 실제로는 Auto Layout을 사용하지 않아도 된다.너비나 높이를 측정하고 숫자별로 등거리의 길이를 나누면 되는데, 이 값을 쓰면 됩니다. 바로 제가 생각할 수 있는 더 쉬운 방법이 생겨서 학습 의욕이 높지 않은 게 Auto Layout이 잘 모르는 문제 때문일 수 있습니다.
근본적으로 Auto Layout이 기억하는 게 너무 많다는 것도 어쩔 수 없는 일이다.

뷰와 같은 간격으로 샘플을 배열하면 Auto Layout의 기초를 알 수 있습니다.

실제로 View를 등거리로 배열한 설명은 실제 필수 조건으로 그다지 많지 않은 패턴이며, 위와 같이 계산하면 Auto Layout을 사용하지 않아도 된다.하지만 이 방법을 알았다면 오토Layout이 꼭 해야 할 때 기반을 다졌으면 좋겠다고 생각했어요.

샘플 열기

'코코아의 일상-Autolayout은 보기 등 간격을 배열한다'의 샘플 코드가 GiitHub에서 Push되어 이해하기 쉽다
https://github.com/xcatsan/iOS7-Sample

Xcode의 Storyboard 미리보기에 화면 회전의 미리보기를 표시합니다. (일부러 시뮬레이터로 실행하면 번거롭습니다.)

View를 구성하고 제한하려면 다음 절차를 따르십시오.

간격이 같은 녹색 View를 정렬하고 세로 너비를 제한합니다

.

패드로 사용하려는 노란색과 주황색의 View를 병렬(실제로 이 View는 투명)

녹색 뷰 및 간격 결정

맨 왼쪽에 있는 간격 View를 선택하고 Control 키를 누르면서 맨 오른쪽에 있는 녹색 View를 선택한 다음 Horizontal Spacing을 선택하여 값을 결정합니다

오른쪽 Horizontal Spacing

확인

반복 간격 수

간격 View의 폭을 동일하게 만듭니다.

간격 View 자체를 선택하고 Control 키를 눌러 다른 간격 View를 선택할 때 Equal Widths는 두 View의 관계를 Equal로 선택합니다.

순서대로 하지 않는 일은 다음과 같다

개스킷 뷰 너비 제한 없음(무제한으로 경고가 발생하지만 경고가 발생하지 않음)

다른 간격 뷰 사이의 너비와 동일한 구속

하든 안 하든 그리 대단한 일은 아니다.

녹색 뷰를 수평 방향으로 정렬

견본에서 느낄 수 있는 지식의 총결

이 견본에서 얻은 지식을 총괄하면 다음과 같다.

Control 키를 누르면서 View를 선택하면 계층이 친자관계View의 제약을 받지 않고 간단하게 형제관계의 제약을 받는다

패드 View의 가로 제한이 없어도 문제없음(경고 없음)

두 뷰의 폭이 같은 구속이 있습니다.

View1 간격과 View2 간격이 같음

간격 View1과 간격 View3을 동일하게 하여 간격의 폭을 동일하게 합니다

.
오토Layout보다 더 좋은 방법 등 간격이 있어 이해를 방해했고, 오토Layout의 편의성과 절차를 이해했을 거라고 생각한다.