iOS/iOS 지식

[WWDC2020] Advances in UICollectionView

홍복치 2024. 7. 19. 22:05

ColelectionView를 구성하는 API는 3가지의 카테고리로 나눌 수 있음

Data / Layout/ Presentation임. 데이터를 어떤 레이아웃으로 어떻게 표현해줄 것인가? 대충 뭐 그런것같음

iOS6에 처음 도입되었을 때 데이터는 "indexPath"기반의 UICollectionViewDataSource 프로토콜 기반으로 관리되었음

그리고 Layout에는 UICollectionViewFlowLayout을, Presentation쪽에는 UICollectionViewCell이나UICollectionViewReusable을 제공했다고 함.

자 그 다음 iOS13에는 Data와 Layout 에 DiffableDataSource, CompositionalLayout을 도입함

iOS14에서는 세가지 카테고리 모두에 새로운 기능을 도입하는데, 새로 도입된 기능들은 DifferableDataSource와 CompositionalLayout을 향상시키기 위한 기능들임

 

우리의 스티브 개발자님은 DiffableDataSource의 향상된 기능에 대해 말씀해주심

일단 DiffableDataSource는 "스냅샷" 을 통해 UI 상태의 관리를 단순화 시켜준다고 함

새로운 스냅샷을 생성하고, 이 스냅샷에 UI가 가져야 할 상태를 반영하고, 그 다음 데이터소스에 적용해서 컬렉션뷰를 업데이트 한다고 함. 스냅샷은 고유한 섹션 및 item식별자를 사용해서 UI상태를 캡슐화 한다고 함

 

기존방식과 다른 점을 생각해보면

1. 인덱스 기반 방식에서 데이터 기반으로 변경

-> let data = list[indexPath.item] 같은 작업이 필요 없음

2.  업데이트 시 추가적인 작업을 요구하지 않고, 차이를 계산해서 애니메이션을 자동으로 넣어줌 

-> collectionView.reloadData()같은 작업이 필요 없음

 

그래서  iOS14에서는 data카테고리에서 뭘 도입하셨다 하는데 그게 뭐냐면 "Section snapshot"임

단일 섹션에 대한 데이터 관리를 하는 스냅샷임

 

여기서 2가지의 장점을 소개하고 있는데

1. 데이터 소스를 섹션단위 데이터로 더 쉽게 구성할 수 있게 함

2. 계층적 데이터 모델링을 허용함

 

위의 사진을 보면 첫번째 수평 스크롤되는 섹션, 두번째 expendable로 되어있는 섹션, 세번째 테이블뷰같은 섹션이 있음

이 세개의 섹션을 각각의 스냅샷으로 관리할 수 있고(1번 장점)

두번째 섹션의 expendable되는 부분을 계층적 모델로 구성할 수 있다는 것 같음(2번 장점)

 

이번에는 iOS14에서 Layout과 Presentation에 대한 변화임

iOS14에서는 List 형태로 compositionalLayout을 구성할 수 있음-> UITableView같은 UICollectionView임

간단하게 구성할 수 있고 섹션별로 또는 전체적인 레이아웃을 list형태로 구성할 수 있다고 함

header와 footer,사이드바(iPad) 그 외의 UITableView에서 제공하는 스와이프 액션 등을 사용할 수 있음

위와같은 코드를 입력해서 List형태의 컬렉션뷰를 구성할 수 있다고 함

 

iOS14에서는 cell Registeration을 통해서 셀을 구성할 수 있는 방법을 제시함

이 방법은 뷰모델에서 셀을 설정해줄 수 있는 간단하고, 재사용 가능한 방법이라함

여기서 사라진게 reuseIdentifier와 register cell(nib)임

이게 진짜 넘나 신기하던 거였는데, registeration을 제네릭으로 정의함(어떤 셀을 쓰고, 어떤 데이터를 쓸건지)

여기 안에 closure가 제공되는데 저 안에서 셀에 대한 configuration을 설정해줄 수 있음

그 다음 dataSource cell Provider에서 dequeueConfigureReusableCell을 호출해서 registeration을 사용해주면 됨

 

cell content Configuration은 UITableView의 셀 유형과 비슷하게 기본 셀을 제공해줌

그냥 셀..... 그냥셀임

valueCell은 trailing쪽에 secondText가 있음

이건 subTitleCell. secondText가 아래쪽에 있음..

 

이거 말고도 backgroundConfiguration도 제공해주는데, 모든 셀의 배경에 적용되는 테두리 스타일 같은거라함

 

스티브 개발자님이 궁금하면 찾아보라고 한 거 정리해놓으면 아래와 같음

Advances in UI Data Sources

Advances in Collection View Layout

Lists in UICollectionView

Modern Cell Configuration

 

참고 소스코드

https://developer.apple.com/documentation/uikit/views_and_controls/collection_views/implementing_modern_collection_views

 

참고 영상

https://developer.apple.com/videos/play/wwdc2020/10097/