김혜빈_0511

[kimhyebeen]

Auto Layout

목차

• Auto Layout에서 leading/trailing과 right/left의 차이와 용도를 알고 있다.
• auto size를 활용한 멀티 디바이스 지원 방법을 알고 있다.
• layout이 제대로 그려지는 조건을 알고 있다.
• Auto Layout의 constraint 변경 시 어느 시점에 UI에 반영되는지 알고 있다.

[kimhyebeen]

Auto Layout 에서 leading/trailing 과 right/elft 의 차이와 용도를 알고 있다.

애플에서는 left/right 대신 leading/trailing 권장

Left/Right 와 Leading/Trailing 비교

• Left / Right
  • 사용자가 바라보는 화면 상의 왼쪽과 오른쪽 위치 속성
• Leading / Trailing
  • Reading Direction 의 시작과 끝을 나타내는 위치 속성

❓ Reading Direction?

말 그대로 읽는 방향. 예를 들어 우리가 주로 사용하는 언어 (한국어, 영어 등) 는 읽는 방향이 왼쪽 → 오른쪽 따라서 이 default reading direction 은 사용자가 설정한 언어에 의해 영향을 받음. 만약 아랍권 글자라면 읽는 방향이 아래와 같이 오른쪽 → 왼쪽 이 됨.

글을 읽는 순서가 달라지면, 사용자 경험도 달라지기 때문에 아래 이미지와 같이 horizontal scroll 방향이나 버튼 위치 등이 다른 UI를 접하게 됨

따라서 아래 예시를 통해 차이를 비교하면, 애플에서 Left/Right 보다 Leading/Trailing 을 권장하는 이유를 알 수 있음

Example For Left

Example For Leading

Reference

• https://sueaty.tistory.com/175
• https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/AnatomyofaConstraint.html

[kimhyebeen]

auto size를 활용한 멀티 디바이스 지원 방법을 알고 있다

Compact Size와 Regular Size

• Compact Size
  • interface의 너비 혹은 높이가 비교적 작다
  • 제한된 공간을 나타내며, 너비는 wC, 높이는 hC 로 나타냄
• Regular Size
  • interface의 너비 혹은 높이가 비교적 크다
  • 제한되지 않는 공간을 나타내며, 너비는 wR, 높이는 hR 로 나타냄

따라서 iOS에서는 아래처럼 width와 height의 Size class를 지정해서 표현되는 Size class에 따라 레이아웃을 동적으로 적용시킬 수 있다.

Reference

• 디바이스별 Size class
• https://velog.io/@minni/Size-class

[kimhyebeen]

layout 이 제대로 그려지는 조건을 알고 있다.

• x축과 y축 모두에 제약조건을 명확히 해야한다.
  • AutoLayout 을 사용할 때는 실행가능한 솔루션이 하나여야만 한다. 두 가지 이상의 솔루션이 제공된다면 모호한 제약 조건으로 인해 제대로 된 레이아웃을 구성할 수 없다.
• 크기 속성 (width, height) 과 위치 속성 (leading, top,..) 사이에 제약조건을 둘 수 없다.
• 위치 속성에 상수 값을 할당할 수 없다.
• (?) You cannot use a nonidentity multiplier (a value other than 1.0) with location attributes.
• 위치 속성의 경우, vertical 속성과 horizontal 속성 사이에 제약조건을 둘 수 없다. (top/bottom과 leading/trailing)
• 위치 속성의 경우, leading/trailing 과 left/right 사이에 제약조건을 둘 수 없다.

Reference

• https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/AnatomyofaConstraint.html#//apple_ref/doc/uid/TP40010853-CH9-SW1

[kimhyebeen]

Auto Layout의 constraint 변경 시 어느 시점에 UI에 반영되는지 알고 있다.

• 화면이 켜지면서 layout과 constraint가 구성될 때는 updateViewConstraints가 호출이 됨
• 하지만 constraint를 변경하는 순간에는 viewWillLayoutSubview가 호출되면서 UI에 반영

Reference

• https://jeonyeohun.tistory.com/336