Autolayout 이란??
constraint 즉 제약 조건을 기반으로 화면 변화에 동적으로 view 의 size 와 position 을 계산해주는 기능
view 의 크기나 위치를 고정적으로 할당하는 것이 아닌, 주변의 다른 객체를 이용해 상대적으로 할당하는 것을 의미
핵심은 constraint 의 설정
Anatomy of a constraint
대부분의 constraint 는 두 항목간의 관계를 정의하지만, 하나의 항목의 서로다른 두 특성간의 관계를 정의하기도 합니다. 예 : aspect ratio (height 와 width 사이의 관계)
Auto Layout Attributes
•
Leading : 상대 뷰와의 왼쪽 면과의 간격
•
Trailing : 상대 뷰와의 오른쪽 면과의 간격
•
Top : 상대 뷰와의 위쪽 면과의 간격
•
Bottom : 상대 뷰와의 아래쪽 면과의 간격
•
Width : 넓이
•
Height : 높이
•
Center X : X축 중심
•
Center Y : Y축 중심
•
baseline : view의 content를 기준으로 정렬하고 싶을 때 사용합니다.
Constraint 설정 방법
Constraint 를 설정하는 방법에는 3가지가 존재합니다.
Control-Dragging Constraints
1.
constraint 를 적용할 객체를 선택
컨트롤 클릭 후 다른 view 드래그함으로 써 두 view 사이의 constraint 를 적용할 수 있습니다.
2.
마우스 클릭을 풀면, Interface Builder 는 HUD 메뉴를 보여줍니다.
이 메뉴에는 현재 적용이 가능한 constraint 들의 목록이 표시됩니다.
Interface Builder 는 드래그 한 방향에 따라 다른 방향의 constraint 를 자동으로 선택합니다.
드래그를 가로로 하게 되면 view 간의 horizontal spacing 에 대한 option 이 표시됩니다.
반대로 드래그를 세로로 하게 되면 view 간의 vertical spacing 에 대한 option 이 표시됩니다.
대각선 방향의 드래그는 가로 세로 spacing option 모두를 표시하게 됩니다.
두 제스쳐는 모두 상대적인 size 설정과 같은 다른 옵션들 또한 포함할 수 있습니다.
Canvas 내의 항목 뿐만 아니라 document outline 과도 컨트롤 드래그 제스쳐의 적용이 가능합니다.
위 특징은 canvas 내에서 찾기 힘든 view 객체 또는 safe area 같은 항목과의 constraint 를 설정하는 데 유용합니다.
인터페이스 빌더는 constraint 를 현재 view frame 의 위치에 기반해서 constraint 를 생성하므로 constraint 를 설정하기전에 view 들을 적절한 위치에 두어야합니다.
Control -dragging 방법은 빠르게 constraint 를 설정할 수 있다는 것이 가장 큰 장점이빈다. 하지만 constraint 의 값이 현재 scene 의 layout 으로 부터 값이 추론되므로 더 세밀하게 제어하려면 constraint 를 생성 한 후 검토 및 편집하거나. 아래의 tool 을 사용하세요.
Using the Stack, Align, Pin and Resolve Tools
인터페이스 빌더는 에디터 창의 오른쪽 하단에 4개의 Auto Layout 도구를 제공합니다.
Stack Tool
Stack tool 을 사용하면 빠르게 stack view 를 생성할 수 있습니다.
layout 에서 하나 또는 여러개의 아이템을 선택한 후 stack tool 을 클릭
인터페이스 빌더는 선택된 항목들은 stack view 에 일괄적으로 넣어주고, stack 을 현재 내부 콘텐츠들에 맞게 재조정해줍니다.
시스템은 stack 의 axis과 alignment을 view 들의 초기 상대적 위치에 기반해 추론. Attibute inpector 에서 axis와 alignment 를 수정 가능
Pin Tool
Pin tool 을 활용하면 인접한 항목에 상대적인 view 의 위치와 크기를 빠르게 정의할 수 있습니다.
1.
제약 조건을 설정할 객체를 선택한 후 위 아이콘을 클릭
2.
상하좌우 간격에 대한 constraint 입력 및 설정
이때 Spacing 제약 조건은 디폴트로 가장 인접한 View 와의 간격을 의미하게 됩니다.
따라서 constraint 를 적용할 대상에 대한 선택을 생략할 수 있어 빠르게 constraint 를 추가할 수 있게 되죠 하지만 이는 변경해줄 수도 있답니다. :)
Align Tool
Align Tool 을 사용하면 layout 내의 여러개의 항목들을 빠르게 정렬할 수 있습니다
Resolve Auto Layout Issues Tool
이 툴은 오토레이아웃의 여러 이슈들을 해결하기 위한 옵션들을 제공합니다.
위쪽 절반의 옵션은 현재 선택한 뷰에
아래쪽 절반의 옵션은 scene 의 모든 view에 적용됩니다.
Letting Inreface Builder Create Constraints
인터페이스 빌더가 자동으로 적절한 constraint 를 추가하도록 허가할 수 있습니다.
View 를 위치시키고 싶은 위치에 세밀하게 위치시킨 후 왼쪽의 옵션을 선택하면 됩니다.
인터페이스 빌더가 현재 위치에 기반해 적절한 constraint 를 추가합니다.
Finding and Editing Constraints
생성한 constraint 는 size inspector와 outline에서 확인 및 수정할 수 있습니다.
Safe Area
등장배경
이전에는 top bottom layout guide 만으로도 커버가 가능하였으나.
iOS 11 부터 생긴 M자 탈모와 홈 버튼 대신 생긴 bar로 인해 Leading / Trailing에 대한 마진이 필요해져 위 Top / Bottom Layout Guide 가 삭제, Top Bottom Leading Trailing 의 시스템 마진을 모두 포함하는 Safe Area 가 등장하게 되었음
참고문서
