로고

[번역] Interface Builder에서 제약 조건 설정하기 (Working with Constraints in Interface Builder)

작성일 :

개요

해당 문서는 학습 목적으로 Apple 공식 문서인 🔗 Auto Layout Guide을 번역한 글입니다. 다소 오역이 있을 수 있어 잘못된 내용이 있을 수 있습니다. 문제가 되거나 오류가 있다면 댓글 부탁드립니다.

내용

Interface Builder에서 Auto Layout 제약 조건을 설정하는 데는 세 가지 주요 옵션이 있습니다. 뷰 사이를 컨트롤-드래그할 수 있고, Pin 및 Align 도구를 사용할 수 있으며, Interface Builder에서 제약 조건을 설정한 다음 편집하거나 수정할 수 있습니다. 이러한 각 접근 방식에는 고유한 강점과 약점이 있습니다. 대부분의 개발자는 다른 방법보다 한 가지 접근 방식을 선호합니다. 그러나 세 가지 접근 방식 모두에 익숙해지면 당면한 작업에 따라 도구 간에 빠르게 전환할 수 있습니다.

세 가지 옵션 모두에 대해 Object Library에서 뷰와 및 컨트롤(controls)을 Scene으로 드래그하여 시작합니다. 필요에 따라 크기를 조정하고 배치합니다. 캔버스에 뷰를 배치하면 Interface Builder는 왼쪽 상단 모서리를 기준으로 뷰의 현재 크기와 위치를 정의하는 일련의 프로토타이핑 제약 조건을 자동으로 생성합니다.

앱은 프로토타이핑 제약 조건으로 빌드하고 실행할 수 있습니다. 이러한 제약 조건을 사용하여 사용자 인터페이스를 빠르게 시각화하고 테스트한 다음 암시적 제약 조건을 자신의 명시적 제약 조건으로 대체합니다. 프로토타이핑 제약이 있는 앱을 출시하지 마십시오.

첫 번째 제약 조건을 생성하는 즉시 시스템은 제약 조건이 참조하는 뷰에서 모든 프로토타이핑 제약 조건을 제거합니다. 프로토타이핑 제약 조건이 없으면 레이아웃이 더 이상 모든 뷰의 고유한 크기와 위치를 지정하는 데 충분한 제약 조건이 없습니다. 모호한 레이아웃이 됩니다. 영향을 받는 제약 조건이 갑자기 빨간색으로 표시되고 Xcode에서 여러 경고를 생성합니다.

당황하지 마세요. 레이아웃이 완료될 때까지 제약 조건을 계속 추가하십시오. 하나의 제약 조건을 추가하는 즉시 모호하지 않고 만족스러운 레이아웃을 만드는 데 필요한 모든 제약 조건을 추가해야 합니다.

레이아웃 경고 및 오류 수정에 대한 자세한 내용은 🔗 오토 레이아웃 디버깅을 참조하세요.

Control-Dragging Constraints

두 뷰 사이에 제약 조건을 생성하려면 보기 중 하나를 Control-Click 하고 다른 것으로 드래그합니다.

image01

마우스를 놓으면 Interface Builder는 가능한 제약 목록이 있는 HUD 메뉴를 표시합니다.

image02

Interface Builder는 제한하는 항목과 drag 제스처의 방향을 기반으로 지능적으로 constraints set를 선택합니다. 수평으로 어느 정도 끌면 뷰 사이의 수평 간격을 설정하는 옵션과 뷰를 수직으로 정렬하는 옵션이 표시됩니다. 수직으로 다소 드래그하면 수직 간격을 설정하는 옵션과 뷰를 수평으로 정렬하는 옵션이 제공됩니다. 두 제스처 모두 다른 옵션(예: 뷰의 상대적 크기 설정)을 포함할 수 있습니다.

NOTE

캔버스의 항목과 장면의 문서 개요에 있는 아이콘 모두에서 Ctrl-Drag 제스처를 사용할 수 있습니다. 이는 상단 또는 하단 레이아웃 가이드와 같이 찾기 어려운 항목에 대한 제약 조건을 그리려고 할 때 종종 유용합니다. 문서 아웃라인으로 또는 아웃라인에서 드래그할 때 Interface Builder는 제스처 방향에 따라 가능한 제약 목록을 필터링하지 않습니다.

Interface Builder는 뷰의 현재 프레임을 기반으로 제약 조건을 생성합니다. 따라서 제약 조건을 그리기 전에 뷰를 신중하게 배치해야 합니다. Interface Builder의 지침에 따라 보기를 정렬하면 합리적인 제약 조건 집합으로 끝나야 합니다. 필요한 경우 나중에 언제든지 제약 조건을 편집할 수 있습니다.

Control-dragging은 제약 조건을 설정하는 매우 빠른 방법을 제공합니다. 그러나 제약조건의 값은 장면의 현재 레이아웃에서 유추되기 때문에 한 지점으로 끝나기 쉽습니다. 더 세밀하게 제어하려면 제약 조건을 만든 후 검토 및 편집하거나 핀 및 정렬 도구를 사용하십시오.

Control-dragging 제약에 대한 자세한 내용은 오토 레이아웃 도움말에서 “Adding Layout Constraints by Control-Dragging”을 참조하십시오.

Stack, Align, Pin및, Resolve Auto Layout Issues 사용하기

Interface Builder는 Editor 창의 오른쪽 하단 모서리에 4개의 자동 레이아웃 도구를 제공합니다. Stack, Align, Pin 및 Resolve Auto Layout Issues 도구입니다.

image03

제약 조건을 만들 때 미세하게 제어하거나 한 번에 여러 제약 조건을 만들고 싶을 때 핀 및 정렬 도구를 사용합니다. 추가 이점으로 이러한 도구를 사용할 때 제약 조건을 생성하기 전에 뷰를 정확하게 배치할 필요가 없습니다. 대신 뷰의 상대 위치를 대략적으로 설정하고 제약 조건을 추가한 다음 프레임을 업데이트할 수 있습니다. 이렇게 하면 자동 레이아웃이 올바른 위치를 계산할 수 있습니다.

Stack Tool

Stack tool을 사용하면 스택 뷰를 빠르게 만들 수 있습니다. 레이아웃에서 하나 이상의 항목을 선택한 다음 Stack Tool을 클릭합니다. Interface Builder는 선택한 항목을 스택 뷰에 포함하고 스택의 내용을 기반으로 현재 피팅 크기로 크기를 조정합니다.

NOTE

시스템은 뷰의 초기 상대 위치에서 스택의 축과 정렬을 추론합니다. 속성 인스펙터를 사용하여 축과 정렬을 수정하고 분포와 간격을 설정할 수 있습니다.

Align Tool

정렬 도구(Align Tool)를 사용하면 레이아웃에서 항목을 빠르게 정렬할 수 있습니다. 정렬할 항목을 선택한 다음 정렬 도구를 클릭합니다. Interface Builder는 여러 가능한 정렬을 포함하는 popover view를 제공합니다.

image04

선택한 뷰를 정렬하기 위한 옵션을 선택하고 제약 조건 추가 버튼을 클릭합니다. Interface Builder는 이러한 정렬을 보장하는 데 필요한 제약 조건을 생성합니다. 기본적으로 제약 조건에는 오프셋이 없으며(가장자리 또는 중심이 서로 정렬됨) 제약 조건이 추가될 때 프레임이 업데이트되지 않습니다. 제약 조건을 생성하기 전에 이러한 설정을 변경할 수 있습니다.

일반적으로 정렬 도구를 사용하기 전에 두 개 이상의 보기를 선택합니다. 그러나 컨테이너에서 수평으로 또는 컨테이너에서 수직으로 제약 조건을 단일 보기에 추가할 수 있습니다. 팝오버를 사용하여 한 번에 여러 제약 조건을 만들 수 있지만 한 번에 하나 또는 두 개 이상 만드는 것은 거의 의미가 없습니다.

자세한 내용은 오토 레이아웃 도움말에서 Pin 및 정렬 도구를 사용하여 오토 레이아웃 제약 조건 추가를 참조하십시오.

Pin Tool

Pin Tool을 사용하면 다른 뷰를 기준으로 뷰의 위치를 빠르게 정의하거나 크기를 빠르게 정의할 수 있습니다. 고정하려는 위치 또는 크기의 항목을 선택하고 Pin Tool를 클릭합니다. Interface Builder는 여러 옵션이 포함된 팝오버 보기를 제공합니다.

image05

팝오버의 상단 부분을 사용하면 선택한 항목의 Leading, Top, Trailing, or Bottom edge를 가장 가까운 다른 뷰에 고정할 수 있습니다. 연결된 숫자는 캔버스에 있는 항목 사이의 현재 간격을 나타냅니다. 사용자 지정 간격을 입력하거나 삼각형 모양의 아이콘을 클릭하여 제한할 뷰를 설정하거나 간격을 선택할 수 있습니다. "Constrain to margins" 체크박스는 부모뷰에 대한 제약이 부모뷰의 여백을 사용할지 가장자리를 사용할지를 결정합니다.

image06

팝오버의 아래쪽 부분에서 항목의 너비 또는 높이를 설정할 수 있습니다. 다른 값을 입력할 수 있지만 너비 및 높이 제한은 현재 캔버스 크기로 기본 설정됩니다. 종횡비 제약도 항목의 현재 종횡비를 사용합니다. 그러나 이 비율을 변경하려면 제약조건을 만든 후 검토하고 편집해야 합니다.

일반적으로 고정할 단일 뷰를 선택합니다. 그러나 두 개 이상의 뷰를 선택하고 동일한 너비 또는 동일한 높이를 제공할 수 있습니다. 한 번에 여러 제약 조건을 생성하거나 제약 조건을 추가할 때 프레임을 업데이트할 수도 있습니다. 원하는 옵션을 설정한 후 제약 조건 추가 버튼을 클릭하여 제약 조건을 만듭니다.

자세한 내용은 자동 레이아웃 도움말에서 Pin 및 Align Tools 사용하여 오토 레이아웃 제약 조건 추가를 참조하십시오.

자동 레이아웃 문제 해결 도구(Resolve Auto Layout Issues Tool)

오토 레이아웃 문제 해결 도구는 일반적인 오토 레이아웃 문제를 해결하기 위한 다양한 옵션을 제공합니다. 메뉴 상단에 있는 옵션은 현재 선택된 뷰에만 영향을 미칩니다. 아래쪽 절반의 옵션은 장면의 모든 뷰에 영향을 줍니다.

image07

이 도구를 사용하여 현재 제약 조건을 기반으로 뷰의 프레임을 업데이트하거나 캔버스에서 뷰의 현재 위치를 기반으로 제약 조건을 업데이트할 수 있습니다. 누락된 제약 조건을 추가하거나 제약 조건을 지우거나 Interface Builder에서 권장하는 제약 조건 세트로 보기를 재설정할 수도 있습니다.

제약 조건을 추가하거나 재설정하는 명령은 인터페이스 빌더가 제약 조건을 생성하도록 허용에서 자세히 설명합니다.

Interface Builder가 제약 조건을 생성하도록 해라.

Interface Builder는 일부 또는 모든 제약 조건을 생성할 수 있습니다. 이 접근 방식을 사용할 때 Interface Builder는 캔버스에서 뷰의 현재 크기와 위치가 주어진 최상의 제약 조건을 추론하려고 시도합니다. 뷰를 신중하게 배치해야 합니다. 간격의 작은 차이로 인해 레이아웃이 크게 달라질 수 있습니다.

Interface Builder가 모든 제약 조건을 생성하도록 하려면 Resolve Auto Layout Issues 도구 > Reset to Suggested Constraints를 클릭하십시오. Interface Builder는 선택한 뷰(또는 장면의 모든 뷰)에 필요한 모든 제약 조건을 생성합니다.

또는 몇 가지 제약 조건을 직접 추가한 다음 Auto Layout Issues tool > Add Missing Constraints를 클릭할 수 있습니다. 이 옵션은 모호하지 않은 레이아웃을 갖는 데 필요한 제약 조건을 추가합니다. 다시 한 번, 선택한 뷰 또는 장면의 모든 뷰에 제약 조건을 추가할 수 있습니다.

이 접근 방식을 사용하면 명확하고 만족스러운 레이아웃을 신속하게 구축할 수 있지만 사용자 인터페이스가 간단하지 않으면 결과 레이아웃이 원하는 방식으로 작동하지 않을 수 있습니다. 항상 사용자 인터페이스를 테스트하고 의도한 결과를 얻을 때까지 제약 조건을 수정하십시오.

제약 조건 찾기 및 편집

제약 조건을 추가한 후에는 찾고, 보고, 편집할 수 있어야 합니다. 제약 조건에 액세스하기 위한 여러 가지 옵션이 있습니다. 각 옵션은 제약 조건을 구성하고 표시하는 고유한 방법을 제공합니다.

Canvas에서 제약 조건 보기

편집기는 현재 선택된 보기에 영향을 미치는 모든 제약 조건을 캔버스에 컬러 선으로 표시합니다. 모양, 획 유형 및 선 색상은 제약 조건의 현재 상태에 대해 많은 정보를 제공할 수 있습니다.

  • I-bars (lines with T-shaped end-caps): I-바는 공간의 크기를 나타냅니다. 이 공간은 두 항목 사이의 거리이거나 항목의 높이 또는 너비일 수 있습니다.
  • 일반 선(끝마감이 없는 직선): 일반 선은 가장자리가 정렬되는 위치를 보여줍니다. 예를 들어, Interface Builder는 둘 이상의 보기의 앞쪽 가장자리를 정렬할 때 간단한 선을 사용합니다. 이 선은 사이에 0포인트 공간이 있는 항목을 연결하는 데에도 사용할 수 있습니다.
  • 실선: 실선은 필수 제약 조건을 나타냅니다(우선 순위 = 1000).
  • 점선: 파선은 선택적 제약 조건(우선 순위 < 1000)을 나타냅니다.
  • 레드 라인: 이 제약 조건의 영향을 받는 항목 중 하나에 오류가 있습니다. 항목의 레이아웃이 모호하거나 레이아웃이 만족스럽지 않습니다. 자세한 내용은 이슈 탐색기 또는 Interface Builder 개요 보기의 공개 화살표를 참조하십시오.
  • 오렌지 라인: 주황색 선은 이 제약 조건의 영향을 받는 항목 중 하나의 프레임이 현재 제약 조건 세트를 기준으로 올바른 위치에 있지 않음을 나타냅니다. Interface Builder는 또한 프레임의 계산된 위치를 점선 윤곽선으로 표시합니다. Resolve Auto Layout Issues tool > Update Frames 명령을 사용하여 항목을 계산된 위치로 이동할 수 있습니다.
  • 블루 라인: 제약 조건의 영향을 받는 항목에는 모호하지 않고 만족스러운 레이아웃이 있으며 항목의 프레임은 자동 레이아웃 엔진에서 계산된 대로 올바른 위치에 있습니다.
  • 동등한 배지(Equal Badges): Interface Builder는 두 항목에 동일한 너비 또는 동일한 높이를 각 항목에 대한 별도의 막대로 제공하는 제약 조건을 보여줍니다. 두 막대 모두 내부에 등호(=)가 포함된 파란색 배지로 태그가 지정됩니다.
  • 크거나 같음 및 작거나 같음 배지: Interface Builder는 내부에 >= 또는 < = 기호가 있는 작은 파란색 배지로 크거나 같음 및 작거나 같음 관계를 나타내는 모든 제약 조건을 표시합니다.
image08

문서 개요(Document outline)에 제약 조건 나열하기

Interface Builder는 문서 아웃라인에 모든 제약 조건을 나열하고 제약 조건을 포함하는 뷰 아래에 그룹화합니다. 제약 조건은 제약 조건의 두 항목을 모두 포함하는 가장 가까운 뷰에 의해 유지됩니다. 이 계산을 위해 각 뷰는 자신과 모든 하위 뷰를 포함하고 상단 및 하단 레이아웃 가이드는 장면의 루트 뷰에 포함됩니다.

image09

제약 조건이 외곽선 주변에 분산될 수 있지만 대부분의 제약 조건은 장면의 루트 뷰 아래에 있습니다. 모든 제약 조건을 찾았는지 확인하려면 전체 뷰 계층 구조를 확장합니다.

제약 조건은 의사 코드(pseudocode)를 사용하여 나열됩니다. 이러한 목록은 종종 길고 유사한 보기 세트로 시작하는 경우가 많으므로 의미 있는 정보를 보려면 outline의 너비를 늘려야 할 수 있습니다. outline에서 제약 조건을 선택하면 캔버스에서 해당 제약 조건이 강조 표시됩니다. 이 기능을 사용하면 검토하려는 제약조건을 빠르게 식별할 수 있습니다.

간단한 scenes의 경우 윤곽선은 scenes의 모든 제약 조건을 한눈에 볼 수 있는 좋은 outline입니다. 그러나 레이아웃이 더 복잡해짐에 따라 특정 제약 조건을 찾기가 빠르게 어려워집니다. 캔버스에서 뷰를 선택하거나 크기 관리자에서 뷰를 검사하여 한 번에 하나의 뷰에서 제약 조건을 검사하는 것이 더 나은 경우가 많습니다.

Size Inspector에서 제약 조건 찾기

Size Inspector는 현재 선택된 뷰에 영향을 미치는 모든 제약 조건을 나열합니다. 필수 제약조건은 실선으로 표시되고 선택적 제약조건은 점선 윤곽으로 나타납니다. 설명에는 제약 조건에 대한 중요한 정보가 나열됩니다. 항상 영향을 받는 속성과 제약 조건의 다른 항목을 포함합니다. 관계, 상수 값, 승수 또는 비율도 포함될 수 있습니다.

image10

위 스크린샷 상단의 다이어그램은 어떤 속성이 제약 조건의 영향을 받는지 보여줍니다. 하나 이상의 다이어그램 속성을 선택하여 제약 조건 목록을 필터링할 수 있습니다. 그런 다음 목록에는 선택한 속성에 영향을 미치는 제약 조건만 표시됩니다.

자세한 내용은 오토 레이아웃 도움말에서 항목에 대한 전체 레이아웃 제약 목록 보기를 참조하십시오.

제약 조건 검사 및 편집

캔버스나 document outline에서 제약 조건을 선택하면 속성 관리자에 제약 조건의 모든 속성이 표시됩니다. 여기에는 제약 방정식의 모든 값(첫 번째 항목, 관계, 두 번째 항목, 상수 및 승수)이 포함됩니다. 속성 관리자(Attribute inspector)는 제약 조건의 우선 순위와 식별자도 표시합니다.

image11

NOTE

제약 조건의 식별자 속성을 사용하면 콘솔 로그 및 기타 디버깅 작업에서 제약 조건을 보다 쉽게 식별할 수 있도록 설명이 포함된 이름을 제공할 수 있습니다.

제약 조건을 placeholder로 표시할 수도 있습니다. 이러한 제약 조건은 design time에만 존재합니다. 앱이 실행될 때 레이아웃에 포함되지 않습니다. 일반적으로 런타임에 제약 조건을 동적으로 추가하려는 경우 placeholder 제약 조건을 추가합니다. 명확하고 만족스러운 레이아웃을 만드는 데 필요한 제약 조건을 임시로 추가하여 Interface Builder에서 경고나 오류를 지웁니다.

Constant, Priority, Multiplier, Relation, Identifier 및 Placeholder 속성을 자유롭게 수정할 수 있습니다. 그러나 첫 번째 및 두 번째 항목의 경우 옵션이 더 제한됩니다. 첫 번째 항목과 두 번째 항목을 바꿀 수 있습니다(필요에 따라 Multiplier와 상수 반전). 항목의 속성도 변경할 수 있지만 항목 자체는 변경할 수 없습니다. 제약조건을 완전히 다른 항목으로 이동해야 하는 경우 제약조건을 삭제하고 새 제약조건으로 교체하십시오.

크기 속성에서 직접 일부 편집도 가능합니다. 제약 조건에서 편집 버튼을 클릭하면 제약 조건의 관계, 상수, 우선 순위 또는 Multiplier를 변경할 수 있는 popover가 나타납니다. 추가로 변경하려면 제약 조건을 두 번 클릭하여 선택하고 속성 관리자(Attribute inspector)에서 엽니다.

image12

자세한 내용은 자동 레이아웃 도움말에서 Editing Auto Layout Constraint을 참조하십시오.

Content-Hugging 및 Compression-Resistance우선 순위 설정

View의 Content-Hugging 및 Content-Hugging 우선 순위(CHCR 우선 순위)를 설정하려면 캔버스 또는 document outline에서 보기를 선택합니다. 크기 속성을 열고 Content Hugging Priority 및 Compression Resistance Priority 설정을 찾을 때까지 아래로 스크롤합니다.

image13

Interface Builder에서 뷰의 고유 크기를 설정할 수도 있습니다. 기본적으로 Interface Builder는 뷰의 intrinsicContentSize 메서드에서 반환된 크기를 사용합니다. 그러나 디자인 타임에 다른 크기가 필요한 경우 placeholder의 고유 콘텐츠 크기를 설정할 수 있습니다. 이 placeholder는 Interface Builder에서만 뷰의 크기에 영향을 미칩니다. 런타임 시 뷰에 영향을 주지 않습니다.

자세한 내용은 오토 레이아웃 도움말의 사용자 지정 보기에 대한 자리 표시자 고유 크기 설정을 참조하십시오.

iOS 전용 기능

iOS는 오토 레이아웃과 상호 작용하는 몇 가지 고유한 기능을 추가합니다. 여기에는 상단 및 하단 레이아웃 가이드, 뷰의 레이아웃 여백, 뷰의 읽을 수 있는 콘텐츠 가이드 및 뷰의 시맨틱 콘텐츠(semantic content)가 포함됩니다.

상단 및 하단 레이아웃 가이드

top 및 bottom 레이아웃 가이드는 현재 활성 뷰 컨트롤러에 대해 표시되는 콘텐츠 영역의 top 및 bottom 가장자리를 나타냅니다. 콘텐츠가 투명하거나 반투명한 UIKit 바(예: 상태 표시줄, 내비게이션 바 또는 탭 바) 아래로 확장되지 않도록 하려면 오토 레이아웃을 사용하여 해당 레이아웃 가이드에 콘텐츠를 고정하세요.

레이아웃 가이드는 UILayoutSupport 프로토콜을 채택하여 가이드와 뷰의 각 가장자리 사이의 거리를 측정하는 길이 속성을 가이드에 제공합니다. 구체적으로:

  • 상단 레이아웃 가이드의 길이는 뷰 컨트롤러의 뷰 상단과 뷰를 오버레이하는 맨 아래 막대의 하단 사이의 거리를 포인트로 나타냅니다.
  • 하단 레이아웃 가이드의 경우 길이는 뷰 컨트롤러의 뷰 하단과 뷰를 오버레이하는 막대(예: 탭 표시줄) 상단 사이의 거리를 포인트로 나타냅니다.

이러한 안내선은 제약 조건에서 항목 역할을 하여 top, bottom 및 height 속성을 지원합니다. 일반적으로 top 레이아웃 가이드의 bottom 속성 또는 bottom 레이아웃 가이드의 top 속성으로 보기를 제한합니다. 가이드는 프로그래밍 방식의 제약 조건 생성을 단순화하기 위해 topAnchor, bottomAnchor 및 heightAnchor 속성도 제공합니다.

Interface Builder는 루트 뷰의 top 또는 bottom 가장자리에 대한 제약 조건을 적절하게 만들 때 자동으로 위쪽 및 아래쪽 레이아웃 가이드를 옵션으로 제공합니다. 레이아웃 가이드가 뷰의 가장 가까운 이웃인 경우 Interface Builder는 기본적으로 가이드를 사용합니다. 핀 도구를 사용할 때 필요에 따라 레이아웃 가이드와 루트 뷰의 가장자리 사이를 전환할 수 있습니다. 펼침 삼각형을 클릭하기만 하면 됩니다.

Layout Margins

오토 레이아웃은 각 뷰의 여백을 정의합니다. 이 여백은 보기의 가장자리와 해당 하위 뷰 사이의 기본 간격을 설명합니다. layoutMargins 또는 layoutMarginsGuide 속성을 사용하여 보기의 여백에 액세스할 수 있습니다. layoutMargins 속성을 사용하면 여백을 UIEdgeInsets 구조로 가져오고 설정할 수 있습니다.

layoutMarginsGuide 속성은 여백에 대한 읽기 전용 액세스를 UILayoutGuide 개체로 제공합니다. 또한, preservesSuperviewLayoutMargins 속성을 사용하여 뷰의 여백이 해당 부모뷰의 여백과 상호 작용하는 방식을 결정합니다.

기본 여백은 양쪽에 8포인트입니다. 앱의 필요에 따라 이러한 여백을 수정할 수 있습니다.

NOTE

시스템은 뷰 컨트롤러의 루트 뷰의 여백을 설정하고 관리합니다. 위쪽 및 아래쪽 여백은 0포인트로 설정되어 막대(있는 경우) 아래의 내용을 쉽게 확장할 수 있습니다. 측면 여백은 컨트롤러가 표시되는 방법과 위치에 따라 다르지만 16포인트 또는 20포인트일 수 있습니다. 이 여백은 변경할 수 없습니다.

뷰를 부모 뷰로 제한할 때 일반적으로 뷰의 가장자리 대신 레이아웃 여백을 사용합니다. UIKit에서 NSLayoutAttribute enum은 top, bottom, leading, trailing, left, 및 right margins을 나타내는 여러 속성을 정의합니다. 또한 여백을 기준으로 center X 와 center Y에 대한 속성도 포함합니다.

Interface Builder에서 뷰와 해당 부모뷰 사이의 제약 조건을 Control-drag하면 기본적으로 여백 속성이 사용됩니다. Pin Tool을 사용할 때 "Constrain to margins" 체크박스를 토글할 수 있습니다. 선택하면 결과 제약 조건이 부모뷰의 여백 속성을 사용합니다. 선택하지 않으면 부모뷰의 가장자리를 사용합니다. 마찬가지로 속성 관리자에서 제약 조건을 편집할 때 첫 번째 항목과 두 번째 항목의 팝다운 메뉴에는 "여백 기준" 옵션이 포함됩니다. 여백 속성을 사용하려면 이 항목을 선택합니다. 가장자리를 사용하려면 선택을 취소합니다.

마지막으로 프로그래밍 방식으로 부모뷰 여백에 대한 제약 조건을 생성할 때 layoutMarginsGuide 속성을 사용하고 레이아웃 가이드에 대한 제약 조건을 직접 생성합니다. 이를 통해 가이드의 레이아웃 앵커를 사용하여 제약 조건을 생성하고 읽기 쉬운 간소화된 API를 제공할 수 있습니다.

읽을 수 있는 콘텐츠 가이드(Readable Content Guides)

뷰의 readableContentGuide 속성에는 뷰 내부의 텍스트 개체에 대한 최대 최적 너비를 정의하는 레이아웃 가이드가 포함되어 있습니다. 이상적으로 콘텐츠는 사용자가 조작하지 않고 읽을 수 있을 만큼 좁습니다.(the content is narrow enough that users can read it without having to move their head.)

이 가이드는 항상 뷰의 레이아웃 여백 내부 중앙에 있으며 해당 여백을 넘어 확장되지 않습니다. 가이드의 크기도 시스템의 동적 유형의 크기에 따라 다릅니다. 일반적으로 사용자가 글을 읽는 동안 장치를 글꼴에서 더 멀리 유지하기 때문에 사용자가 더 큰 글꼴을 선택하면 시스템에서 더 넓은 안내선을 만듭니다.

Interface Builder에서 보기의 여백이 레이아웃 여백을 나타내는지 아니면 읽을 수 있는 콘텐츠 가이드를 나타내는지 설정할 수 있습니다. 뷰(일반적으로 뷰 컨트롤러의 루트 뷰)를 선택하고 크기 속성을 엽니다. 읽을 수 있는 너비 따르기(the Follow Readable Width) 확인란을 선택하면 뷰의 여백에 그려진 모든 제약 조건이 읽을 수 있는 콘텐츠 가이드를 대신 사용합니다.

NOTE

대부분의 장치에서 읽을 수 있는 콘텐츠 가이드와 레이아웃 여백 사이에는 거의 또는 전혀 차이가 없습니다. 차이점은 iPad에서 가로 방향으로 작업할 때만 분명해집니다.

Semantic Content

leading 와 trailing 제약 조건을 사용하여 뷰를 배치하는 경우 왼쪽에서 오른쪽으로 쓰는 언어(예: 영어)와 오른쪽에서 왼쪽으로 쓰는 언어(예: 아랍어) 간에 전환할 때 보기가 자동으로 위치를 뒤집습니다. 그러나 일부 인터페이스 요소는 읽는 방향에 따라 위치가 변경되지 않아야 합니다. 예를 들어 물리적 방향(위, 아래, 왼쪽 및 오른쪽)을 기반으로 하는 버튼은 항상 동일한 상대 방향을 유지해야 합니다.

뷰의 semanticContentAttribute 속성은 왼쪽에서 오른쪽 및 오른쪽에서 왼쪽 언어 간에 전환할 때 보기의 콘텐츠를 뒤집을지 여부를 결정합니다.

Interface Builder에서 Attribute inspector의 Semantic 옵션을 설정합니다. 값이 미지정이면 보기의 내용이 읽기 방향으로 뒤집힙니다. Spatial, Playback 또는 Force Left-to-Right로 설정되어 있으면 컨텐츠는 항상 선행 가장자리가 왼쪽으로, 후행 가장자리가 오른쪽으로 배치됩니다. Force Right-to-Left는 항상 선행 가장자리가 오른쪽에 있고 후행 가장자리가 왼쪽에 있는 콘텐츠를 배치합니다.

Rules of Thumb

다음 지침은 오토 레이아웃을 성공적으로 사용하는 데 도움이 됩니다. 의심할 여지없이 이러한 각 규칙에 대해 적법한 예외가 많이 있습니다. 그러나 방향을 바꾸기로 결정한 경우 진행하기 전에 잠시 멈추고 접근 방식을 신중하게 고려하십시오.

  • 프레임, 경계 또는 중심 속성(frame, bounds, or center properties)을 사용하여 보기의 형상을 지정하지 마십시오.
  • 가능하면 스택 뷰를 사용하십시오.
  • 스택 뷰는 콘텐츠의 레이아웃을 관리하여 나머지 레이아웃에 필요한 제약 논리를 크게 단순화합니다. 스택 뷰가 필요한 동작을 제공하지 않는 경우에만 사용자 지정 제약 조건을 사용하십시오.
  • 뷰와 가장 가까운 다른 뷰 사이에 제약 조건을 만듭니다.
  • 서로 옆에 두 개의 버튼이 있는 경우 두 번째 버튼의 앞쪽 가장자리를 첫 번째 버튼의 뒤쪽 가장자리로 제한합니다. 일반적으로 두 번째 버튼에는 첫 번째 버튼을 가로질러 뷰의 가장자리까지 도달하는 제약 조건이 없어야 합니다.
  • 뷰에 고정된 높이나 너비를 제공하지 마십시오.
  • 오토 레이아웃의 요점은 변경 사항에 동적으로 대응하는 것입니다. 고정 크기를 설정하면 뷰의 유연성이 없어집니다. 그러나 뷰의 최소 또는 최대 크기를 설정할 수 있습니다.
  • 제약 조건을 설정하는 데 문제가 있는 경우 핀 및 정렬 도구를 사용해 보십시오. 이러한 도구는 Control-dragging보다 다소 느릴 수 있지만 제약 조건을 만들기 전에 관련된 정확한 값과 항목을 확인할 수 있습니다. 이 추가 온전성 검사는 특히 처음 시작할 때 도움이 될 수 있습니다.
  • 항목의 프레임을 자동으로 업데이트할 때 주의하십시오. 항목에 크기와 위치를 완전히 지정하기에 충분한 제약 조건이 없는 경우 업데이트 동작이 정의되지 않습니다. 뷰는 높이나 너비가 0으로 설정되거나 실수로 화면 밖에 배치되어 사라지는 경우가 많습니다.
  • 언제든지 항목의 frame을 업데이트한 다음 필요한 경우 변경 사항을 취소할 수 있습니다.
  • 레이아웃의 모든 뷰에 의미 있는 이름이 있는지 확인하십시오. 이렇게 하면 도구를 사용할 때 뷰를 훨씬 쉽게 식별할 수 있습니다.
  • 시스템은 텍스트 또는 제목을 기반으로 라벨과 버튼의 이름을 자동으로 지정합니다. 다른 보기의 경우 Identity inspector에서(또는 문서 outline에서 보기 이름을 두 번 클릭하고 편집하여) Xcode 특정 레이블을 설정해야 할 수 있습니다.
  • 항상 right과 left 대신 leading 및 right 제약 조건을 사용하십시오.
  • semanticContentAttribute 속성(iOS) 또는 userInterfaceLayoutDirection 속성(OS X)을 사용하여 뷰가 선행 및 후행 가장자리를 해석하는 방법을 항상 조정할 수 있습니다.
    • 수평 제약: 대부분의 컨트롤의 경우 레이아웃 여백에 0point 제약 조건을 사용합니다. 시스템은 장치가 무엇이고 앱이 뷰 컨트롤러를 표시하는 방식에 따라 자동으로 올바른 간격을 제공합니다. 여백에서 여백까지 루트 뷰를 채우는 텍스트 Object의 경우 레이아웃 여백 대신 읽을 수 있는 콘텐츠 가이드를 사용합니다. 가장자리에서 가장자리까지 루트 뷰를 채워야 하는 항목(예: 배경 이미지)의 경우 뷰의 leading 및 trailing 가장자리를 사용합니다.
    • 수직 제약: 뷰가 bar 아래로 확장되는 경우 top 및 bottom 여백을 사용합니다. 이것은 스크롤 뷰에서 특히 일반적이며 콘텐츠가 bar 아래에서 스크롤되도록 합니다. 그러나 콘텐츠의 초기 위치를 올바르게 설정하려면 스크롤 뷰의 contentInset 및 scrollIndicatorInsets 속성을 수정해야 할 수도 있습니다. 뷰가 막대 아래로 확장되지 않으면 대신 뷰를 top 및 bottom 레이아웃 가이드로 제한합니다.
  • 프로그래밍 방식으로 뷰를 인스턴스화할 때 translatesAutoresizingMaskIntoConstraints 속성을 NO로 설정해야 합니다. 기본적으로 시스템은 뷰의 프레임과 자동 크기 조정 마스크를 기반으로 일련의 제약 조건을 자동으로 생성합니다. 고유한 제약 조건을 추가하면 필연적으로 자동 생성된 제약 조건과 충돌합니다. 이는 만족스럽지 못한 레이아웃을 만듭니다.
  • OS X와 iOS는 레이아웃을 다르게 계산합니다.
  • OS X에서 Auto Layout은 윈도우의 내용과 윈도우의 크기를 모두 수정할 수 있습니다.
  • iOS에서 시스템은 장면의 크기와 레이아웃을 제공합니다. 자동 레이아웃은 장면의 내용만 수정할 수 있습니다.
  • 이러한 차이는 상대적으로 사소해 보이지만 레이아웃을 디자인하는 방법, 특히 우선 순위를 사용하는 방법에 큰 영향을 미칠 수 있습니다.