iOS 14에서 UICollectionView.CellRegistration 라는 API가 등장했지요. 이름 그대로 컬렉션뷰에서 셀을 등록하는 API 입니다. 자매품으로 UITableView.CellRegistration 은 없습니다. 같이 나온 UICollectionViewListCell 이 컬렉션뷰에서도 스와이프가 가능한 테이블뷰 비슷한 셀을 구현할 수 있게 해주기 때문이죠.
기존의 우리가 셀을 등록할 때는 어떻게 했었나요 ? 통상적으로는 아래와 같이 작성하곤 했습니다. 셀을 만들고 reuseIdentifier 를 생성하고 뷰컨트롤러의 viewDidLoad 에서 셀을 등록하곤 하는 식이죠.
class SmallTableCell: UICollectionViewCell {
static let reuseIdentifier: String = "SmallTableCell"
}
class AppsViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
collectionView.register(SmallTableCell.self, forCellReuseIdentifier: SmallTableCell.reuseIdentifier)
}
}
UICollectionView.CellRegistration 에서는 조금 바뀌었습니다. 공식 문서를 보면 아래와 같이 셀을 등록해요. UICollectionViewListCell이 위의 코드로 치면 SmallTableCell 이 되겠네요. Int는 클로저에서 데이터 값으로 사용하는 item 의 타입입니다.
UICollectionView.CellRegistration 내부는 크게 신경안쓰셔도 됩니다. 저 부분은 예전으로 치면 넘어오는 데이터를 셀의 뷰에 어떻게 보여주는 것에 대한 마치 cellForItemAt 의 역할이에요.
이어지는 dataSource 코드를 보면 cellRegistration 에서 셀을 어떻게 보여줄 것인지 지정하고나서, 그냥 셀을 collectionView.dequeueConfiguredReusableCell 하고 매개변수로 cellRegistration 를 넣어주고 리턴하죠? 저 리턴값이 cellRegistration 에서 지정한 UICollectionViewListCell 타입입니다.
사용하는 방법은 약간 다르지만, 느낌은 비슷하죠. 다른 점이라고 하면 reuseIdentifier 같은 것을 사용하지 않는다는 것입니다. 공식문서에는 아래와 같이 말하고 있어요.
register(_ cellClass:forCellWithReuseIdentifier:) 또는 register(_ nib:forCellWithReuseIdentifier:)를 호출할 필요가 없습니다. dequeueConfiguredReusableCell(using:for:item:)에 셀 등록을 전달할 때 컬렉션뷰는 셀을 자동으로 등록합니다.
자, 대략적인 사용방법의 차이를 알아봤으니 이제 두 방법을 비교해볼게요. 글을 작성하고 있는 저도 두 방법 중에 뭐가 더 낫다고 확언하기가 애매하네요.
사용하는 서비스의 최소버전이 iOS 14 이상이어야 하는 부분도 있고, 익숙하다면 익숙한 코드가 더 나은 것도 같구요. 상황에 맞게 적절하게 사용하면 될 것 같습니다.
이제 예시를 보겠습니다. 앱스토의 게임탭의 화면을 예시로 가져왔는데요. 그림을 보면 여러개의 컬렉션뷰 셀이 사용된 것을 보실 수 있어요.
첫째로 제일 상단의 큰 이미지뷰가 있는 FeaturedCell 이 하나 있고, 두번째로는 3 개의 테이블뷰 셀의 느낌을 가지고 있는 MediumTableCell 셀이 있죠. 그런데, 이 부분은 헤더 부분은 스크롤링이 되지 않으니 헤더는 또 다른 뷰가 여기서의 이름은 SectionHeader 가 될 에정입니다.
마지막으로 두번째 사진을 보면 인기 카테고리라고 적힌 SmallTableCell 라는 테이블뷰 느낌의 셀이 또 있죠. 그래서 헤더까지 총 4개의 뷰가 있는 예시입니다. 이것을 가지고 UICollectionView.CellRegistration 를 사용하는 것과 사용하지 않는 것의 코드를 둘 다 구현해볼게요.
기존 방법을 사용하는 코드부터 볼게요. 글과 관련없는 뷰의 속성값 할당 같은 내용들은 다 삭제했습니다. 먼저 셀이 여러개이므로 공통적인 설정을 SelfConfiguringCell 담당하는 프로토콜을 선언했습니다.
protocol SelfConfiguringCell {
static var reuseIdentifier: String { get }
func configure(with app: App)
}
그리고 각 셀에 해당 프로토콜을 준수하는 코드를 만듭니다. 헤더는 해당 프로토콜을 준수할 필요는 없겠지요.
class FeaturedCell: UICollectionViewCell, SelfConfiguringCell {
static var reuseIdentifier: String = "FeaturedCell"
let tagline = UILabel()
let name = UILabel()
let subtitle = UILabel()
let imageView = UIImageView()
func configure(with app: App) {
tagline.text = app.tagline.uppercased()
name.text = app.name
subtitle.text = app.subheading
imageView.image = UIImage(named: app.image)
}
}
class MediumTableCell: UICollectionViewCell, SelfConfiguringCell {
static var reuseIdentifier: String = "MediumTableCell"
let name = UILabel()
let subtitle = UILabel()
let imageView = UIImageView()
let buyButton = UIButton(type: .custom)
func configure(with app: App) {
name.text = app.name
subtitle.text = app.subheading
imageView.image = UIImage(named: app.image)
}
}
class SmallTableCell: UICollectionViewCell, SelfConfiguringCell {
static let reuseIdentifier: String = "SmallTableCell"
let name = UILabel()
let imageView = UIImageView()
func configure(with app: App) {
name.text = app.name
imageView.image = UIImage(named: app.image)
}
}
class SectionHeader: UICollectionReusableView {
static var reuseIdentifier: String = "SectionHeader"
let title = UILabel()
let subtitle = UILabel()
}
그리고 이제 만든 셀과 헤더를 사용합니다. 꽤나 익숙하죠 ? 특이한 점이라면 제네릭 타입으로 SelfConfiguringCell 프로토콜을 준수하는 func configure<T: SelfConfiguringCell> 메서드를 생성해서 내부에서 cell.configure(with:) 작업을 한번에 해줄 수 있게 하는 부분이 있겠네요.
class FeaturedCell: UICollectionViewCell, SelfConfiguringCell {
let tagline = UILabel()
let name = UILabel()
let subtitle = UILabel()
let imageView = UIImageView()
func configure(with app: App) {
tagline.text = app.tagline.uppercased()
name.text = app.name
subtitle.text = app.subheading
imageView.image = UIImage(named: app.image)
}
}
class MediumTableCell: UICollectionViewCell, SelfConfiguringCell {
let name = UILabel()
let subtitle = UILabel()
let imageView = UIImageView()
let buyButton = UIButton(type: .custom)
func configure(with app: App) {
name.text = app.name
subtitle.text = app.subheading
imageView.image = UIImage(named: app.image)
}
}
class SmallTableCell: UICollectionViewCell, SelfConfiguringCell {
let name = UILabel()
let imageView = UIImageView()
func configure(with app: App) {
name.text = app.name
imageView.image = UIImage(named: app.image)
}
}
class SectionHeader: UICollectionReusableView {
let title = UILabel()
let subtitle = UILabel()
}
다음으로 각 셀과 헤더에 맞는 Registration 메서드를 생성해줍니다. 이 메서드 내부에서 cell.configure(with: app) 을 사용하므로, 기존에 사용했던 제네릭 매개변수의 func configure<T: SelfConfiguringCell> 메서드는 필요가 없으니 삭제합니다.
그리고 dataSource 에서 dequeueConfiguredReusableCell(using:for:item:) 메서드의 매개변수로 만든 CellRegistration, SupplementaryRegistration 를 넣어줍니다. 위에서 말했던 것처럼 dequeueConfiguredReusableCell(using:for:item:) 에 셀 등록을 전달할 때 셀을 자동으로 등록하므로 reuseIdentifier 같은 것들은 필요가 없습니다.
import UIKit
class AppsViewController: UIViewController {
let sections = Bundle.main.decode([Section].self, from: "appstore.json")
var collectionView: UICollectionView!
var dataSource: UICollectionViewDiffableDataSource<Section, App>?
override func viewDidLoad() {
super.viewDidLoad()
//...
}
func createFeaturedCellRegistration() -> UICollectionView.CellRegistration<FeaturedCell, App> {
return UICollectionView.CellRegistration<FeaturedCell, App> { (cell, indexPath, app) in cell.configure(with: app) }
}
func createMediumTableCellRegistration() -> UICollectionView.CellRegistration<MediumTableCell, App>{
return UICollectionView.CellRegistration<MediumTableCell, App> { (cell, indexPath, app) in cell.configure(with: app) }
}
func createSmallTableCellRegistration() -> UICollectionView.CellRegistration<SmallTableCell, App>{
return UICollectionView.CellRegistration<SmallTableCell, App> { (cell, indexPath, app) in cell.configure(with: app) }
}
func createSectionHeaderRegistration() -> UICollectionView.SupplementaryRegistration<SectionHeader>{
return UICollectionView.SupplementaryRegistration<SectionHeader>(elementKind: UICollectionView.elementKindSectionHeader) { supplementaryView,elementKind,indexPath in }
}
func createDataSource() {
let featuredCellRegistration = createFeaturedCellRegistration()
let smallTableCellRegistration = createSmallTableCellRegistration()
let mediumTableCellRegistration = createMediumTableCellRegistration()
let sectionHeaderRegistration = createSectionHeaderRegistration()
dataSource = UICollectionViewDiffableDataSource<Section, App>(collectionView: collectionView) { collectionView, indexPath, app in
switch self.sections[indexPath.section].type {
case "mediumTable":
return collectionView.dequeueConfiguredReusableCell(using: mediumTableCellRegistration, for: indexPath, item: app)
case "smallTable":
return collectionView.dequeueConfiguredReusableCell(using: smallTableCellRegistration, for: indexPath, item: app)
case "featured":
return collectionView.dequeueConfiguredReusableCell(using: featuredCellRegistration, for: indexPath, item: app)
default:
return UICollectionViewCell()
}
}
dataSource?.supplementaryViewProvider = { [weak self] collectionView, kind, indexPath in
let sectionHeader = collectionView.dequeueConfiguredReusableSupplementary(using: sectionHeaderRegistration, for: indexPath)
//...
return sectionHeader
}
}
//...
}
4. 정리하기
셀과 헤더의 등록 방법은 비슷한 듯 다릅니다. 무슨 방법이 더 낫다라고 하기도 애매한 것 같고 위에서 말했듯 iOS 14 부터 지원이 되는 API 이다보니 최소 버전 지원되는 부분도 있구요.
아직 공부를 덜해서 모르는 부분이 많아 명확히 말하기가 애매한 점도 있는 것 같아요. 어쨌건, 새로 나왔으니 한 번 사용해보고 어떻게 사용하는지 정도는 알아야 좋겠지요. 저도 나중에 볼건데, 더 세부적인 학습을 위해 해당 세션의 WWDC 링크를 첨부해놓도록 하겠습니다.
