[iOS] 오토레이아웃(Auto Layout)의 모든 것 - 2

Working with Constraints in Interface Builder

오토 레이아웃 제약을 인터페이스 빌더에서 설정하는 세가지 옵션

1. 컨트롤 드래그

2. Pin과 Align 툴

3. 인터페이스 빌더가 설정

 

Control-Dragging Constraints

두 뷰 사이에 제약을 만들려면 컨트롤 클릭해서 다른 뷰로 드래그합니다.

드래그해서 놓으면 다음과 같은 메뉴가 나옵니다.

캔버스 내의 아이템에서 할 수 있고, scene의 도큐먼트 아웃라인에서도 설정 가능합니다.

인터페이스 빌더는 현재 뷰의 프레임을 기준으로 제약을 만듭니다.

그렇기 때문에 뷰의 위치를 정확하게 잡고 제약을 설정해야합니다.

필요하다면 제약을 나중에 수정할 수 있습니다.

 

Using the Stack, Align, Pin and Resolve Tools

오른쪽 아래 화면에 다음과 같은 오토레이아웃 툴을 볼 수 있습니다.

 

 

스택뷰를 만들 수 있으며 현재 뷰의 위치에 따라 수평 수직의 스택뷰를 만듭니다.

 

Align Tool

빠르게 정렬을 도와주는 툴입니다.

인터페이스 빌더가 가능한 정렬을 보여줍니다.

 

두 개 이상의 뷰를 선택하는게 일반적입니다.

하지만 컨테이너에 수평이나 수직으로 설정할 때 하나의 뷰를 선택할 수 있습니다.

한 번에 여러개의 제약을 추가할 수 있습니다.

 

 

Pin Tool

이웃한 뷰 등과 빠르게 위치를 정하거나 크기를 만들어줍니다.

 

근처의 뷰 등과 리딩, 탑, 트레일링, 바텀 제약을 만들 수 있습니다.

역삼각형을 눌러서 이웃하는 뷰 등을 선택할 수 있습니다.

Constrain to margins를 사용해서 슈퍼뷰의 엣지나 마진에 연결할 수 있습니다.

 

 

크기를 지정할 수 있고 현재 뷰의 크기가 나타납니다.

숫자를 직접 입력해서 바꿀 수 있습니다.

Aspect Ratio는 현재 비율을 사용하지만 원하면 설정 후 직접 바꿔줘야 합니다.

 

여러개의 뷰를 동시에 선택해서 제약을 동일하게 추가할 수 있습니다.

 

Resolve Auto Layout Issues Tool

여러가지 오토레이아웃 문제를 해결하기 위해 사용합니다.

 

현재 제약을 기준으로 뷰를 업데이트하거나, 캔버스안의 뷰의 현재 위치를 통해 제약을 업데이트 할 수 있습니다.

누락된 제약을 추가하거나, 제약을 삭제하거나, 인터페이스 빌더가 추천하는 제약을 사용할 수 있습니다.

 

Letting Interface Builder Create Constraints

인터페이스 빌더는 일부분에서 전체의 제약까지 생성할 수 있습니다.

현재 캔버스에서 뷰의 사이즈와 위치를 바탕으로 인터페이스 빌더가 최적의 제약을 추론해서 만듭니다.

작은 차이도 큰 차이를 만들기 때문에 뷰를 아주 신중하게 만들어야합니다.

Resolve Auto Layout Issues tool > Reset to Suggested Constraints를 눌러서 제약을 스스로 만듭니다.

직접 제약을 일부 만들어 놓고 Resolve Auto Layout Issues tool > Add Missing Constraints를 눌러서 나머지 제약을 추가할 수 있습니다.

 

Finding and Editing Constraints

Viewing Constraints in the Canvas

• I-bars (lines with T-shaped end-caps). I모양 바는 공간의 크기를 나타냅니다. 두 아이템 간의 거리를 나타내거나 아이템의 너비 높이를 나타냅니다.

• Plain lines (straight lines with no end-caps). 일반 선(끝이 T모양이 아닌)은 정렬을 나타냅니다.

• Solid Lines. 실선은 필수 제약(priority = 1000).

• Dashed Lines. 점선은 옵셔널 제약 (priority < 1000).

• Red Lines. 빨간 선은 하나 이상의 아이템의 제약에 에러가 있음을 나타냅니다.

• Orange Lines. 주황선은 현재 뷰의 상태와 제약이 일치하지 않을때 나타납니다. Resolve Auto Layout Issues tool > Update Frames command를 사용해서 뷰를 업데이트 할 수 있습니다.

• Blue Lines. 파란선은 제약이 제대로 설정되면 나타납니다.

• Equal Badges. (=) 두 아이템이 너비나 높이가 같을 때 나타납니다. 

• Greater-than-or-equal and less-than-or-equal badges.  (>= , <=) 크거나 같다, 작거나 같다. 옵션을 나타냅니다. 

 

 

Listing Constraints in the Document Outline

인터페이스 빌더는 모든 제약을 도큐먼트 아웃라인에 리스트로 제공합니다.

 

Scene의 루트뷰아래에 제약이 모두 나타납니다.

만약에 모든 제약을 보고 싶으면 모든 계층구조를 누르면 됩니다.

제약은 pseudocode(의사코드)를 사용하여 표시됩니다.

제약에 관한 정보를 얻을 수 있고 제약을 누르면 해당 제약이 캔버스에 하이라이트 됩니다.

 

Finding Constraints in the Size Inspector

현재 선택된 뷰와 관련된 모든 제약을 보여줍니다.

필수 제약은 실선, 선택 제약은 실선으로 나타납니다.

영향을 받는 속성을 나타내고 다른 아이템과의 제약을 보여줍니다.

다이어그램 속성을 선택해서 필터를 할 수 있습니다.

 

Examining and Editing Constraints

Attribute inspector는 모든 제약속성을 보여줍니다.

첫 번째 아이템, 관계, 두 번째 아이템 값, 몇 배, 우선순위, Identifier(콘솔로그나 디버깅 시 사용가능)

Placeholder로 지정할 수도 있습니다.

앱을 실행할 때는 포함되지 않습니다.

런타임에 동적으로 제약을 추가할 때 사용합니다.

 

몇몇 값은 사이즈 인스펙터에서 바로 설정할 수 있습니다.

 

Setting Content-Hugging and Compression-Resistance Priorities

사이즈 인스펙터를 스크롤로 내리면 설정이 나옵니다.

 intrinsicContentSize method를 통해서  인터페이스 빌더가 intrinsic 사이즈를 정합니다.

하지만 필요하다면 직접 placeholder를 정할 수 있습니다.

캔버스에서만 보이고 실행엔 영향을 미치지 않습니다.

 

Rules of Thumb

• 뷰의 기하를 프레임이나 바운드, 센터속성으로 정하지 마십시오.

• 가능하다면 스택뷰를 사용하세요.

• 제약을 가장 가까운 뷰 등에 연결하세요.

• 뷰에 고정된 높이나 너비를 사용하는 것을 지양하세요.

• 제약을 설정하는데 문제가 있다면, Pin and Align 툴을 사용하세요.

• 자동으로 아이템의 프레임을 업데이트 할 때는 조심하세요.

• 모든 뷰가 레이아웃에서 의미 있는 이름이 있는지 확인하세요.

• 오른쪽 왼쪽이 아니라 leading, trailing 을 사용하세요.

• iOS에서, 루트뷰의 엣지에 제약을 만들 경우 다음을 따르세요.

  • Horizontal constraints. 대부분 레이아웃 마진에 0점 제약을 사용합니다.

    루트뷰의 마지에서 마진까지 채우는 텍스트 오브젝트는 레이아웃 마진 대신에 컨텐츠를 읽을 수 있는 가이드를 사용하세요.

    루트뷰의 엣지에서 엣지를 채우는 아이템(배경 등)은 leading trailing 엣지를 사용하세요.

  • Vertical constraints. 뷰가 bars 아래로 확장되면 top, bottom 마진을 사용하세요(스크롤 뷰).  스크롤 뷰의 contentInset 와 scrollIndicatorInsets 속성을 정확하게 설정해야합니다.

    뷰가 bars 아래로 확장되지 않으면 top, bottom 레이아웃 가이드에 제약을 만드세요.

• 코드로 뷰를 만들 때, translatesAutoresizingMaskIntoConstraints 속성을 NO로 설정하세요.

• OS X 와 iOS 는 레이아웃을 다르게 계산합니다.