[WWDC19] Advances in Collection View Layout 정리

안녕하세요 Hani입니다.
이번에는 WWDC19에서 발표된 Advances in Collection View Layout에 대하여 정리할 거예요.


UICollectionViewCompositionalLayout이 소개되는 동영상인데
슬라이드 길이가 짧더라구요 🥰


대신 버릴 슬라이드가 거의 없는..

 

iOS 6에서 UICollectionView가 소개될 때
UICollectionViewLayout 추상 클래스를 상속받은 UICollectionViewFlowLayout도 같이 등장했는데,
iOS 12까지 계속 사용되어 왔습니다. 

 

AppStore를 비롯한 요즘 앱들을 보면 일반적인 컬렉션뷰보다 훨씬 복잡하죠?

이제 이런 컬렉션뷰를 만들기 위해서 UICollectionViewLayout을 상속받은 Custom Layout을 만들지 말라고
새로운 Layout을 만들어 준다고 합니다. ☺️

이제 UICollectionViewFlowLayout은 버릴 때가 됐다.. 🥺


UICollectionViewLayout을 상속받은 UICollectionViewCompositionalLayout는 iOS 13부터 사용 가능합니다.

(앗,, 아직 버리지마)

UICollectionViewCompositionalLayout로 레이아웃을 만들기 위해서는 몇 가지 알아야 할 게 있습니다.

UICollectionViewCompositionalLayout은 NSCollectionLayoutSection을 필요로 하고
NSCollectionLayoutSection은 NSCollectionLayoutGroup...
NSCollectionLayoutGroup은 NSCollectionLayoutItem...
NSCollectionLayoutItem은 NSCollectionLayoutSize...


아이고!

자.. Layout부터 시작해봅시다.
이제 여기에 Section, Group, Item이 차곡차곡 쌓이겠죠?

 

오홍..

큰 것부터 작은 것까지 봤으니까
작은 것부터 큰 걸로 올라가 봅시다.

 

Size는 CGFloat타입의 width와 height를 인자로 받는데
NSCollectionLayoutSize는 NSCollectionLayoutDimension타입의 widthDimension과 heightDimension을 인자로 받네요?

 

NSCollectionLayoutDimension은 4가지 타입 프로퍼티를 가지고 있습니다.

Size의 width나 height처럼 절대적인 값을 지니는 absolute값을 사용할 수도 있고
자신을 감싸고 있는 컨테이너에 비례한 값을 가지는 fractional값을 사용할 수도 있습니다. 👍

혹은 estimated. 즉, flexible한 추정 값을 사용할 수도 있어요.


처음 접하는 타입이니까 한 번 어떤가 봅시당.

absolute는 자신이 속한 Group에 관계없이 고정된 값을 가지고 있네요.

 

fractionalWidth와 fractionalHeight는 이렇게 자신을 감싸는 컨테이너의 크기 중 얼마를 차지할지 결정할 수 있는데

 

fractionalWidth의 값을 heightDimension에 넣을 수도 있습니다.

 

추정 값을 넣을 수도 있네욥.

 

이제 NSCollectionLayoutSize를 구성하는 NSCollectionLayoutDimension를 알았으니

NSCollectionLayoutSize를 통해 Item의 크기를 결정할 수 있습니다.

 

 

여기서 NSDirectionalEdgeInsets은 구조체이며,
NSCollectionLayoutDimension와 달리 iOS 11에 등장했습니다. ( 이번에 등장한 게 아님! )

특별한 건 없네욥. 평범한 인셋 🦀

 

Group의 크기를 결정하고, 아까 만들었던 Item을 배열로 넣으면 Group에 들어갈 수 있을 만큼 Item이 채워집니다.

 

NSCollectionLayoutGroup에서의 horizontal과 vertical 타입 메서드는 딱 느낌이 오시져 ☺️

 

custom에서의 itemProvider가 뭔지 호기심이 가긴 합니다.
(다음에 알아보자..ㅎ)

 

Section은 아까 만든 Group를 이용해서 만듭니다.

뒤에서 말하겠지만 이 Section에 SupplementaryView같은 것을 넣어줄 수 있어요. ☺️

드디어 다 왔다..!

여기도 Layout가 Section을 넣을 수 있을 만큼 넣어줍니다. 😎

 

클로저로 초기화하는 방법도 있네요. (자주 씀)

init(sectionProvider: @escaping UICollectionViewCompositionalLayoutSectionProvider) typealias UICollectionViewCompositionalLayoutSectionProvider = (Int, NSCollectionLayoutEnvironment) -> NSCollectionLayoutSection?

sectionProvider에 Section의 종류에 따라 item, group, section, supplementaryItem 등을 달리하여
UICollectionViewCompositionalLayout을 구성할 수 있습니다. ☺️

 

 

이제 UICollectionViewCompositionalLayout으로 할 수 있는 좀 더 재미난걸 알아봅시당.

 

Badge는 위 사진에서 초록색 꼬다리를 말하는 거예요.

출처로 달아놓은 Implementing Modern Collection Views에서 코드를 다운로드 받을 수 있습니다. ☺️

 

꼭 보세요.. 진짜

뱃지말고도 CompositionalLayout을 이용한 다양한 뷰 구성을 볼 수 있습니다.

 

 

NSCollectionLayoutSupplementaryItem이걸루 뱃지의 크기랑 종류랑 위치를 결정할 수 있어욥.

 

 

NSCollectionLayoutSupplementaryItem에는 containerAnchor라는 전달인자가 있는데

요기에 NSCollectionLayoutAnchor의 인스턴스를 만들어서 넣어주면 됩니다. 

 

뱃지는 배열로 넣어주는군용 🧐

 

header랑 footer는 둘 다 NSCollectionLayoutBoundarySupplementaryItem로 넣어주면 됩니다.

 

Section별로 배경색을 지정해줄 수 있는 NSCollectionLayoutDecorationItem입니다.

Section의 decorationItems에 넣어줍니다.

 

 

Dynamic Cell Size도 문제 없네요. ☺️

 

 

Size에 estimated 값을 넣어줄 수 있습니다.

 

 

pinToVisibleBounds는 SupplementaryView를 고정시켜주는 옵션이에요.

 

 

@MainActor class NSCollectionLayoutGroup: NSCollectionLayoutItem

사실 Group은 Item을 담는 Item이라고 할 수 있어서

여러 개를 중첩시켜서 레이아웃을 짤 수 있어요.

 

 

 

결과물인 containerGroup을 Section에 넣어주면 끝 ☺️

 

 

이건 Section에 달 수 있는 옵션으로, 스크롤 했을 때 어떻게 보여줄 건지 정할 수 있어요.

 

요로케

 

Right To Left도 기본적으로 지원하는 CompositionalLayout.

 

---

References
https://developer.apple.com/videos/play/wwdc2019/215/
https://developer.apple.com/documentation/uikit/uicollectionviewcompositionallayoutsectionprovider
https://developer.apple.com/documentation/uikit/views_and_controls/collection_views/implementing_modern_collection_views