개시하다

21일째는 스마트 세일즈맨·벤차스의 오쓰@okuderap가 맡았다.
이번에는 AutoLayout에 관한 이야기입니다.
저 혼자 AutoLayout 때문에 고민하고 있어요.
나는 기초부터 총결하고 싶다.

원래 AutoLayout은

아이폰SE에는 아이폰7, 아이폰7플러스 등이 있다
화면 사이즈에 따라 판면 디자인을 자동으로 조정하는 녀석.
화면의 회전에 따라 종횡비례가 변하는 상황에서도 대응할 수 있는 녀석.
상대하기 어려운 녀석.

Constraint 정보(제한)

AutoLayout은 각 요소에 대해 제약을 설정하여 레이아웃을 결정한다.
제약의 종류로 이번에는 두 가지를 쓰겠습니다.
・Pin: 고정 요소의 크기와 위치
・Align: 화면 중앙에 요소를 배치하거나 여러 요소를 같은 높이에 배치
※ Pin, Align뿐만 아니라 Stack도 중요
이번에 초기초편이라 머리를 잘랐어요.

Pin

요소의 크기와 위치를 고정합니다.

Spacing to nearest neighbor (A-1 ~ A-4)
중심□표지 주위의 빨간색 점선 선택
실선이면 그 핀이 유효할 거야.
A-1: top
고정 요소의 상단
A-2: leading
고정 요소의 왼쪽 가장자리
A-3: bottom
고정 요소의 하단
A-4: trailing
고정 요소의 오른쪽 가장자리

▶ 구속의 기준 선택

top의▼ 로고를 선택하면 다음과 같이 어디를 기준으로 고정할지 선택할 수 있다.

예컨대
상태막대에서 공백 비우기
상태막대 아래를 기준으로 Top Layout Guide를 선택합니다.
상태막대의 공간을 비우고 싶지 않을 때
뷰의 상단을 기준으로 뷰를 선택합니다.
A-5: Constrain to margins
화면 좌우 여백(기본값은 선택된 여분)
B-1: Width
고정 요소 너비
B-2: Height
고정 요소 높이
C-1: Equal Widths(여러 요소를 선택한 경우에만)
여러 요소의 너비를 동일하게 만들기
C-2: Equal Heights(여러 요소를 선택한 경우에만)
여러 요소의 높이를 동일하게 만들기
C-3: Aspect Ratio
고정 원소의 종횡비
C-4: Align(여러 요소를 선택한 경우에만)
여러 요소 통합

Align

요소를 가운데로 정렬하거나 여러 요소를 같은 높이로 정렬합니다.

A-1: Leading Edges
여러 요소의 왼쪽 정렬
A-2: Trailing Edges
여러 요소의 오른쪽 끝 정렬
A-3: Top Edges
여러 요소의 상단을 일치시키다
A-4: Bottom Edges
여러 요소의 하단을 일치시키다
B-1: Horizontal Centers
여러 요소의 중심을 수평으로 정렬합니다.
B-2: Vertical Centers
여러 요소의 수직 중심을 정렬합니다.
B-3: Baselines
여러 레이블과 같은 텍스트 아래에 정렬
C-1: Horizontally in Container
수평 가운데 맞춤
C-2: Vertically in Container
수직 가운데 정렬

최후

이번에는 AutoLayout 초기초편으로 Pin과 Align에 관한 이야기입니다.
각자 어떤 제약을 설정할 수 있는지 총결해 봤다.
SmartTec Bencers에서는 경험이 없지만 iOS를 개발하고 싶어요!라고 말했다.
Advent Calendar의 SmiltTec Bencers 페이지에 회사와 Wantedly의 URL이 게재되었으니 관심 있는 분들은 꼭 보십시오.
http://qiita.com/advent-calendar/2016/stv
내일은 @KentaKudo입니다.
기대해주세요!