Layout-driven UI 정리
WWDC 2018의 세션 233 Adding Delight to your iOS App 중 8분 50초부터 나오는 Layout-driven UI를 정리한 글입니다.
https://developer.apple.com/videos/play/wwdc2018/233/?time=531
한줄요약
모든 UI 업데이트를 레이아웃 시스템에게 넘겨라.
점점 복잡해지는 제스처 콜백, 노티 콜백, 변경된 값의 콜백 등으로 UI 버그가 발생합니다.
이런 버그를 해결하는 간단한 방법은 다음 절차를 따르는 것입니다.
- UI에 영향을 주는 변수들을 주시합니다.
- 이 변수의 값이 바뀌면 setNeedsLayout을 호출합니다.
- layoutSubviews에서 UI를 업데이트합니다.
레이아웃, 애니메이션, 제스처 등 3가지 측면에서 Layout-driven UI를 살펴보겠습니다.
레이아웃은 콘텐츠를 화면에 배치하는 프로세스입니다. 이 프로세스에서 UI 업데이트를 처리하는 것이 핵심입니다.
coolView를 업데이트하는게 만드는 것은 feelingCool 변수입니다. 이 변수를 주시하고 있다가 값이 변경되면 setNeedsLayout을 호출합니다. setNeedsLayout은 다음 업데이트 주기에 layoutSubviews가 호출되도록 합니다. layoutSubviews가 호출되면 coolView를 숨기거나 보여주는 UI 업데이트를 처리합니다.
애미메이션이란 기술적으로 시작값과 끝값이 얼마만큼의 시간동안 변하는 과정입니다. Layout-driven UI에서는 UIView-based Animations을 사용합니다.
그리고 beginFromCurrentState 옵션을 사용합니다. 이 옵션은 애니메이션 중간에 애니메이션이 취소되고 다른 애니메이션이 시작해도 현재 위치부터 애니메이션이 이어질 수 있도록 합니다.
cardsInDeck에 card를 추가한 후 UIView animation 블럭 안에서 layoutIfNeeded를 호출하면 layoutSubviews가 호출되고 필요한 UI 업데이트를 합니다. 이제 애니메이션 시스템이 UI 업데이트 전과 후 상태 사이를 적절히 채워줍니다.
제스처에는 이산적인(값들이 연속적이지 않은) 제스처와 연속적인 제스처가 있습니다. 연속적인 제스처 중에서 UIPanGestureRecognizer로 Layout-driven UI를 설명하겠습니다.
Pan 제스처가 발생하면 changed 상태에서 CardView의 offset을 추적할 수 있습니다. 변경된 offset을 cardsToOffsets에 저장하면 setNeedsLayout, layoutSubviews 호출 순서를 따라갑니다. 제스처에 의한 뷰의 상태 변화도 레이아웃으로 처리할 수 있습니다.
다시 한 번 정리하면…
- UI에 영향을 주는 변수들을 주시합니다.
- 이 변수의 값이 바뀌면 setNeedsLayout을 호출합니다.
- layoutSubviews에서 UI를 업데이트합니다.
