156. Auto Layout Interface Builder Technique

Auto Layout Interface Builder Technique

새 프로젝트를 생성한 뒤 위치와 크기를 조금 변경했다.
지금 상태에선 어떠한 제약도 추가하지 않았지만, 앱을 실행하면 현재 Frame을 기반으로 자동으로 제약이 추가된다.
이러한 제약을 '프로토타이핑 제약 (Prototyping Constraints)'라고 부른다.
이름 그대로 실제 앱에서 사용하기에 적합하지 않고, Autoresizing Mask와 함께 UI 개발 초기에 Prototype 목적으로 사용하기 적합하다.
제약을 추가하기 시작하면 이 프로토타이핑 제약은 사용할 수 없다.

우측 하단의 5개의 버튼 중 가운데에 위치하는 버튼이 제약을 추가할 수 있는 팝업을 표시한다.

해당 팝업에서 오른쪽과 같이 위, 왼쪽, 오른쪽 그리고 높이에 대해 제약을 추가하면

이렇게 Document Outline에 추가된 제약들이 나타나고, Scene에도 파란색 실선으로 추가된 제약들이 표시된다.
이렇게 Canvas 메뉴를 통해 제약을 추가할 수 있고, 다른 방법으로도 추가할 수 있다.

View를 밖을 향해 오른쪽 클릭으로 드래그 해 Safe Area와의 제약을 추가하고

내부에서 오른쪽 클릭으로 드래그 해 높이와 너비 제약을 추가한다.
Canvas 메뉴를 통하지 않고 드래그를 사용해 동일한 제약을 추가할 수 있다.

Canvas 메뉴를 사용하는 방법은 여러개의 대상에 동일한 제약을 추가하는 경우 유리하고,
드래그로 추가하는 방법은 View 사이의 제약을 추가할 때 유리하다.

두 View 사이에 추가할 수 있는 제약이 표시되기 때문에 드래그하는 대상에 따라 추가할 수 있는 제약의 목록이 달라진다.
이때 주의해야 할 점은 드래그하는 방향에 따라서 추가할 수 있는 제약의 종류가 달라진다는 것이다.

이렇게 같은 View를 대상으로 드래그하지만 방향에 따라 각각 다른 제약 메뉴가 표시된다.
이를 알고 있어야 제약을 추가할 때 혼란스럽지 않을 수 있다.

또한 Canvas에서만 가능한 것이 아니라 Document Outline에서도 드래그를 통해 똑같이 제약을 추가할 수 있다.
이 때는 드래그의 방향에 관계 없이 두 View 사이에 추가할 수 있는 모든 제약이 표시된다.

드래그를 통해 제약을 추가하는 경우 현재 추가된 View를 기준으로 제약이 추가되는 것 또한 주의할 점이다.
따라서 제약을 추가하기 전에 View의 Frame을 원하는 값으로 설정해야 한다.
반면 Canvas를 통해 추가할 때는 현재 Frame을 무시하고 제약을 추가할 수 있다.

Canvas 메뉴의 높이와 너비는 현재 View의 크기와 일치한다.
이를 100으로 변경한다.

이렇게 되면 Scene에서 제약 조건이 붉은색으로 바뀌게 된다.
Auto Layout에서 빨간색은 오류를 의미한다.
지금 나타나는 오류는 위치를 지정하는 제약이 없기 때문이다.

Canvas 메뉴의 두 번째 버튼을 클릭하면 정렬 제약조건을 추가할 수 있다.

새 제약조건이 추가되고, 이전에 붉은색이던 제약조건도 파란색으로 표시된다.
Auto Layout에서 파란색은 제약조건이 정상적으로 추가됐음을 나타낸다.

추가된 I 바를 클릭하면 제약을 선택할 수 있고, 선택한 제약은 위의 사진처럼 그림자로 강조된다.
I바는 I빔, H바, H빔, T바 등 다양한 이름으로 불리고, 공식 명칭은 I바이다.
이는 공간의 크기, 너비, 높이와 관련된 제약을 표현한다.

상단 제약을 선택하고 Attribute에서 Constant를 0으로 변경하면

위처럼 화면 상단에 실선이 표시된다.
이 실선은 정렬 위치를 표현한다.

따라서 아래에 있는 보라색 View는 수직과 수평으로 중앙에 정렬되어있고,
높이와 너비의 제약이 표시된다.
해당 View에 추가된 제약들은 모두 오류가 존재하지 않고, Scene에 표시된 Frame과 제약을 통해 계산된 Frame이 동일하다.
이 경우 제약과 관련된 모든 Indicator가 파란색으로 표시된다.

하지만 View를 움직이면 Indicator가 노란색으로 강조된다.
이는 제약에는 오류가 없지만 현재 Frame과 제약에 의해 계산된 최종 프레임이 다름을 의미한다.
최종 Frame은 노란색 점선으로 표시되고, 현재 Frame과의 차이를 실선 위에 숫자로 표시한다.
이는 오류가 아니기 때문에 이대로 실행해도 문제가 없다.
하지만 편집의 혼동을 막기 위해 최종 프레임과 일치시키는 것이 좋다.
이 경우 Canvas 메뉴의 첫 번째 버튼을 선택하면 최종 프레임으로 자동으로 옮길 수 있다.

View의 너비 제약을 삭제하면 수평 정렬 제약이 붉은색으로 표시된다.
View를 얼마만큼의 너비로 표시할지 알 수 없게 되고, 따라서 수평 정렬 시 x좌표를 계산할 수 없게 된다.

이 경우 Document Outline에 빨간색으로 표시되고,
클릭하면 상세 정보를 확인할 수 있다.
또한 상세 정보에서 Fix it을 클릭하면 수정사항을 제안하고, 이를 자동으로 추가할 수도 있다.
단, 자동으로 추가하는 제약이 필요한 제약과 다른 경우도 많으므로, 직접 추가하는 것이 좋다.

이번에는 두 View를 연결해 Equal Widths 제약을 추가한다.
이 경우 아래의 보라색 View의 너비가 위의 분홍색 View에 의해 결정되므로

수평 제약도 정상적으로 동작한다.
새로 추가된 I바의 중앙에는 원과 기호가 추가되어있다.
이것을 Equality Badge라고 부른다.
두 View의 너비가 동일하기 때문에 등호로 표시되고, 다른 관계를 설정하면 연관된 기호가 표시된다.

가로 제약을 선택하고 Priority를 확인해 보면 1000으로 설정되어있다.
이것은 필수 제약을 의미하며, 항상 실전으로 표시된다.

이를 1000보다 작은 값으로 변경하면 점선으로 표시된다.
이러한 제약들은 모두 선택적 제약이 되고, 우선순위의 크기에 관계없이 항상 점선으로 표시된다.

Canvas Menu

Canvas의 오른쪽 하단에는 Canvas Menu가 존재한다.

왼쪽부터 순서대로

• Update Frame
  디자인 Frame과 최종 Frame이 다를 경우 활성화되고,
  클릭하면 최종 Frame으로 업데이트된다.
• Align
  정렬과 관련된 제약을 추가한다.
• Constraint
  핀 메뉴라고도 불리며 View 마진과 크기에 관련된 제약을 추가할 때 사용한다.
• Resolve Auto Layout Issue
  Resolve 메뉴라고도 불린다.
  제약에 문제가 발생했을 때 사용할 수 있는 메뉴가 표시된다.
  두 개의 Section으로 구분되어있는데
  Selected Section은 Scene에서 선택되어있는 View에 적용되고,
  All Views in View Controller Section의 메뉴는 선택된 Scene에 추가된 모든 View에 적용된다.
• Stack
  Canvas에서 하나 이상의 View가 선택된 경우 활성화되고,
  클릭하면 Stack을 추가하고 해당 Stack 아래로 선택된 View들이 이동한다.
  주로 화면을 균등하게 분할하는 UI를 구현하는 경우 사용한다.

Resolve Auto Layout Issue

 

 

 

• Update Constraint Constants
  만약 기존에 추가되어있는 제약을 지금의 Frame에 맞게 업데이트하고 싶다면
  Update Constraint Constants를 선택해 현재 Frame에 맞게 업데이트된다.
• Add Missing Constraints
  제약 오류가 발생한 경우 필요한 제약을 자동으로 추가한다.
  하지만 마찬가지로 의도와 다른 제약이 추가될 여지가 있다.
• Reset to Suggested Contraints
  추가된 모든 제약을 삭제하고 현재 Frame을 기반으로 적합한 제약을 추가한다.
  단, 마찬가지로 의도와 다른 제약이 추가될 수 있다.
• Clear Constraints
  추가되어있는 모든 제약을 삭제한다.
  Auto Layout을 다루는데 서툰 경우 해당 메뉴를 통해 제약들을 완전히 삭제하고 처음부터 다시 추가하는 것이 좋다.

Document Outline

제약을 추가하면 위의 사진처럼 Document Outline에서 제약을 확인할 수 있다.
다른 View와 연관 없이 View 자체에 추가되는 제약들은 해당 View의 아래에 추가된다.
하지만 다른 View와 연관된 제약들은 연관된 View들이 포함되어있는 상위 View 중에 가장 인접한 View 아래에 추가된다.

leading, top, trailing 제약은 모두 상위 View와 관련된 제약이다.
따라서 선택된 View의 아래에 추가되는 것이 아닌 인접한 상위 View인 Root View의 아래에 추가된다.
Document Outline에서 제약을 선택하면 Canvas에서 해당 제약이 선택되고, Attribute와 Size inspector에서 속성을 변경할 수 있다.
제약의 이름은 개요로 표시되는데 이는 천천히 이해할 수 있게 된다.

제약의 속성

 제약의 속성에서 Identifier를 설정하면 디버깅에 도움이 되기도 한다.
아해의 Remove at Build time을 활성화하면 Storyboard를 빌드할 때 제약이 제거된다.
해당 옵션은 디자인 타임에 편집을 쉽게 하기 위해 추가한 제약을 자동으로 제거할 때 사용한다.

View의 Size Inspector의 Constraints 섹션에서 추가된 제약을 모두 확인할 수 있다.
해당 Section에서 제약을 클릭하면 Filtering Mode가 토글 된다.
아래에 추가되어있는 제약에 마우스를 가져다 대면 Canvas의 제약이 강조되고, 클릭하면 선택된다.
Edit을 선택하면 속성을 변경할 수 있는 팝업이 나타난다.
더블클릭하면 Size Inspector가 제약의 속성을 변경할 수 있는 창으로 변경된다.

미리 보기

제약의 결과를 확인하기 위해 매번 Sumulator를 구동하는 것은 매우 비효율적이다.
따라서 Xcode는 미리 보기 기능을 지원한다.

Xcode의 우측 상단에서 보조 편집기 메뉴를 통해 Preview를 활성화할 수 있다.

미리보기의 아래에 표시되는 기기의 이름을 클릭하면 Landscape 모드의 모습도 확인할 수 있다.
미리보기의 좌측 하단의 '+'버튼을 누르면 다른 기기의 미리보기를 동시에 표시할 수 있다.
삭제할 때는 미리보기를 선택하고 delete키를 눌러 삭제할 수 있다.