[iOS] CollectionView

이번 글에서는 CollectionView의 개념에 대해서 살펴보도록 하겠습니다. 다음 글부터는 실제로 CollectionView를 사용해보고, 어떤 식으로 활용이 가능한 지에 대해서 알아보겠습니다.

저는 CollectionView의 FlowLayout이 아닌 Compositional Layout을 사용할 예정입니다.

* 이 글은 애플의 공식문서를 보고 작성했습니다. 공부하면서 작성한 거라 틀린 부분이 있을 수 있습니다. 그 부분에 대해서 댓글을 달아주시면 감사하겠습니다.

---

1. CollectionView 개요

(1) CollectionView?

CollectionView는 TableView와 비교해 데이터의 Layout을 구성하는데 조금 더 자유로운 View입니다.

(2) DataSource?

UICollectionViewDiffableDataSource는 CollectionView에 데이터 소스를 간단하고 효율적으로 업데이트 할 수 있도록 기능을 제공하는 객체입니다. 또는 UICollectionViewDataSource Protocol을 이용해서 커스텀 데이터 소스를 구성할 수 있습니다.

(3) Item?

CollectionView에서 가장 작은 단위는 아이템입니다. "하나의 데이터 = 아이템"이라고 생각할 수 있습니다. CollectionView에서는 TableView에서와 마찬가지로 이 아이템을 Cell을 사용해 화면에 띄웁니다. 이때 UICollectionViewCell을 사용해 Cell의 모양을 커스텀하거나 데이터를 변경할 수 있습니다.

출처: apple developer document

(4) Section Header , Footer?

CollectionView에서도 TableView와 마찬가지로 Supplymentary View를 이용해 Section Header와 Footer를 설정할 수 있습니다.

---

2. Layouts

UICollectionViewLayuout 클래스의 서브 클래스인 Layout 객체는 CollectionView의 배열 방법을 정의합니다. 모든 Cell과 Supplementary View들의 위치가 Layout 객체에 의해 정의됩니다.

Layout 객체는 collectionViewLayout 프로퍼티에 저장되는데, setCollectionViewLayout(_:animated:completion:) 메소드를 이용하면 레이아웃을 바로바로 업데이트 할 수 있고, 다이나믹하게 변경할 수 있습니다. 

startInteractiveTransition(to:completion:)을 이용하면 이벤트를 받을 수 있습니다. 또 finishInterativeTransition()과 cancelInteractiveTransition() 메소드를 이용하면 이벤트 객체를 제거할 수 있습니다.

---

3. Cell과 Supplementary Views

dequeueReusableCell(withReuseIdentifier:for:): Cell(item) 설정
dequeueReusableSupplementaryView(ofKind:withReuseIdentifier:for:): Section의 Header와 Footer 설정

위 설정을 하기 전에 반드시 Cell이 등록이 되어 있어야 합니다.
register(_:forCellWithReuseIdentifier:): Cell, Header, Footer를 등록할 때 사용

---

4. Data prefetching

CollectionView는 두 가지 Prefetching 기술을 제공합니다.

• Cell prefetching은 Cell이 화면에 보이기 전에 미리 구성해 놓는 기술입니다. Grid와 같은 layout의 경우 한번에 많은 Cell이 화면에 렌더링되기 때문에, Cell이 미리 구성되지 않은 상태에서 스크롤을 하게 되면 버범임이 있을 수 있습니다. Cell prefetching 기술을 이용해 부드러운 화면을 보여줍니다.
• Data prefetching은 Cell을 구성하기 위한 Data를 미리 요청하는 기술입니다. Data가 미리 준비되어 있지 않으면 Cell prefetching으로 미리 Cell을 구성할 때, 빈 칸으로 구성되기 때문에 Data 역시 미리 가져와서 구성할 준비를 마쳐야 합니다. 이를 수행하기 위한 프로토콜이 UICollectionViewDataSourcePrefetching Protocol 입니다. 이 프로토콜은 Data를 미리 가져오는 시점에 대한 알람을 받기 위해 prefetchDataSource 프로퍼티를 제공합니다.

---

5. Reorder items interactively

CollectionView는 사용자가 item의 위치 변경이 가능하도록 할 수 있습니다. 일반적으로 item의 배열은 data source에 의해 결정됩니다. 하지만 개발자는 사용자가 item을 재배치 할 수 있도록 허용할 수 있습니다.

사용자가 item을 재배치 할 수 있도록 하기 위해 몇 가지 메소드를 제공합니다. 우선 beginInteractiveMovementForItem(at:)을 호출해 사용자가 재배치를 시작했다는 것을 알 수 있습니다. 다음으로 updateInteractiveMovementTargetPostion(_:) 메소드를 통해 사용자의 터치 움직임을 추적할 수 있습니다. 사용자의 재배치가 끝나면 endInteractiveMovement() 또는 cancelInteractiveMovement()를 호출해 재배치가 끝났음을 알립니다. 위 메소드들을 통해서 CollectionView를 업데이트 할 수 있습니다.

UICollectionViewController class는 기본적인 제스처 이벤트를 인식할 수 있는 기능을 제공합니다. 이 기능을 사용하기 위해서는 CollectionViewController의 installsStandardGestureForInteractiveMovement 프로퍼티를 true로 설정해주어야 합니다.

---