오늘의 주제는 콘텐츠 셋을 관리하고 레이아웃에 따라 시각적으로 보여주는 컬렉션 뷰.
그야말로 수집품을 보여주는 전시회와 같은 녀석이다.
UICollectionView를 사용하려면 두 개의 델리게이트 객체를 필요로 하는데, UICollectionViewDataSource와 UICollectionViewDelegate가 그것이다.
어라? 델리게이트 게시글에서 나온 테이블 뷰랑 판박이네?
맞다. 그렇지만 구분해서 사용한다.
Generally speaking, collections are ideal for showing image-based content.
우선 Human Inferface Guidelines(일명 HIG)에서는 일반적으로 이미지를 표시할 때 Collections를 사용한다고 이야기한다.
Consider using a table instead of a collection for text. It’s generally simpler and more efficient to view and digest textual information when it’s displayed in a scrollable list.
또 텍스트를 표시한다면 Table을 사용하라고 한다.
간단히 정리하면 콘텐츠가 텍스트라면 테이블뷰, 이미지라면 컬렉션뷰라고 생각할 수 있겠다.
구성
컬렉션 뷰는 델리게이트 뿐만 아니라 더욱 다양한 객체의 공동 작업으로 이루어진다.
- Cells: 각 콘텐츠를 시각적으로 표현한다.
- Layouts: 컬렉션 뷰에 있는 콘텐츠의 시각적 배치를 정의한다.
- Data source object:
UICollectionViewDataSource프로토콜을 채택하고 컬렉션 뷰에 대한 데이터(콘텐츠)를 제공한다. - Delegate object:
UICollectionViewDelegate프로토콜을 채택하고 선택 및 강조 표시와 같은 컬렉션 뷰 콘텐츠와의 사용자 상호 작용을 관리한다. - Collection view controller: 공식 문서에 따르면 일반적으로
UICollectionViewController객체를 사용하여 컬렉션 뷰를 관리한다. 다른 뷰 컨트롤러도 사용할 수 있지만 일부 컬렉션 관련 기능이 작동하려면 컬렉션 뷰 컨트롤러가 필요하다.
다섯가지 객체를 하나로 모으면 캡틴 컬렉션 뷰!
사실 컬렉션 뷰까지 해서 여섯 객체가 필요하긴 하다.
UICollectionView
An object that manages an ordered collection of data items and presents them using customizable layouts.
이제 이 UICollectionView에 대해 더욱 알아보자.
셀 및 추가 뷰
컬렉션 뷰의 데이터 소스 객체는 항목의 콘텐츠와 해당 콘텐츠를 표시하는 데 사용되는 뷰를 모두 제공한다. 여기서 말하는 뷰에 포함되는 것이 헤더, 푸터 등의 Supplementary views와 셀이다.
컬렉션 뷰는 이 뷰 객체들을 재사용하기 위해 표시했던 뷰 객체의 큐나 리스트를 유지 및 관리한다. 코드에서 명시적으로 새 뷰를 생성하는 대신 항상 뷰를 큐에서 꺼내온다.
뷰를 큐에서 제거하는 두가지 방법이 있는데 사용하는 뷰의 타입은 요청된 뷰 타입에 따라 다르다.
- 컬렉션 뷰의 아이템에 대한 셀을 가져오려면
dequeueReusableCell(withReuseIdentifier:for:)을 사용한다. - 레이아웃 객체가 요청한 추가 뷰를 얻으려면
dequeueReusableSupplementaryView(ofKind:withReuseIdentifier:for:)메소드를 사용한다.
컨텐츠를 처음 로드할 때와 같이 재사용할 뷰 객체가 없다면 그 때 최초로 생성하고 이후 재사용한다. 그렇기 때문에 해당 뷰를 생성하는 방법을 컬렉션 뷰에 알려줘야 하는데, 이를 위해서는 컬렉션 뷰에 클래스나 nib 파일을 등록해야 한다.
데이터 소스 메서드에서 적절한 뷰를 큐에서 뺀 후 해당 콘텐츠를 구성하고 사용할 수 있도록 컬렉션 뷰로 반환한다. 컬렉션 뷰는 레이아웃 객체로부터 레이아웃 정보를 가져온 후 이를 뷰에 적용하여 표시한다.
레이아웃
레이아웃 객체는 컬렉션 뷰에 있는 콘텐츠의 시각적 배치를 정의한다.
UICollectionViewLayout 클래스의 하위 클래스인 레이아웃 객체는 컬렉션 뷰 내의 모든 셀과 추가 뷰의 구성과 위치를 정의한다. 하지만 앞서 살펴봤듯 실제로 해당 정보를 해당 뷰에 직접 적용하지는 않는다. 이를 적용하는 것은 컬렉션 뷰로, 컬렉션 뷰는 해당 뷰에 레이아웃 정보를 적용한다.
레이아웃 개체는 아이템 데이터 대신 시각적 정보를 제공한다는 점을 제외하면 다른 데이터 소스와 같습니다.
그렇다는 것은 레이아웃도 일종의 델리게이트 패턴이라는 것이다.
레이아웃 변경
일반적으로 컬렉션 뷰를 생성할 때 레이아웃 객체를 지정하지만 컬렉션 뷰의 레이아웃을 동적으로 변경할 수도 있다.
1. 기본 변경 방법
레이아웃 객체는 collectionViewLayout 프로퍼티에 저장되는데, 이 프로퍼티를 설정하면 변경 내용에 애니메이션을 적용하지 않고 레이아웃이 즉시 업데이트된다.
2. 애니메이션
레이아웃을 변경할 때 애니메이션을 적용하려면 setCollectionViewLayout(_:animated:completion:) 메서드를 호출하면 된다.
3. 상호작용형 전환
제스처 또는 터치 이벤트에 의해 구동되는 상호작용형 전환을 생성하려면 startInteractiveTransition(to:completion:) 메서드를 사용하여 레이아웃 객체를 변경한다.
데이터 소스
컬렉션 뷰는 자신의 dataSource 프로퍼티에 저장된 객체에서 데이터를 가져온다. 이 데이터 소스는 크게 두 가지 방법을 사용할 수 있다.
- 컬렉션 뷰의 데이터 및 UI에 대한 업데이트를 간단하고 효율적으로 관리할 수 있는
UICollectionViewDiffableDataSource사용하기. UICollectionViewDataSource프로토콜을 채택한 커스텀 데이터 소스 객체 만들기.
당연히 1번의 UICollectionViewDiffableDataSource는 UICollectionViewDataSource 프로토콜을 채택하고 있다.
프리페칭
컬렉션 뷰는 응답성을 향상시키는 데 사용할 수 있는 두 가지 프리페칭 기술을 제공한다.
-
Cell prefetching
셀 프리페칭은 필요한 시간보다 미리 셀을 준비한다. 셀 프리페칭은 기본적으로 활성화되어 있다. -
Data prefetching
데이터 프리페칭은 셀 요청에 앞서 컬렉션 뷰의 데이터 요구 사항에 대한 알림을 받는 메커니즘을 제공한다. 이는 셀의 내용이 네트워크 요청과 같이 비용이 많이 드는 데이터 로드 프로세스에 의존하는 경우 유용하다.
상호작용으로 재정렬하기
컬렉션 뷰는 사용자 상호 작용에 따라 아이템을 이동할 수 있다. 일반적으로 컬렉션 뷰의 아이템 순서는 데이터 소스에 의해 정의되지만 사용자가 항목을 재정렬할 수 있도록 허용하는 경우 컬렉션 뷰 아이템과 사용자의 상호 작용을 추적하고 해당 아이템의 위치를 업데이트하도록 제스처 인식기를 구성할 수 있다.
마무리
오늘은 UIKit의 뷰 중 하나인 UICollectionView에 대해 알아보았다. 여러 콘텐츠를 레이아웃에 따라 하나의 컬렉션 뷰에서 디스플레이 할 수 있었다. 이 뷰 하나를 구성하기 위해서는 여러 객체의 협력이 필요하고, 그 만큼 유용한 기능을 제공하는 것을 알 수 있었다.
역시 뭉치면 살고 흩어지면 죽는 것인가.
