Modern Collection View [1] - Using Cell Registration API | iOS 14

Modern Collection View: Cell Registration API

구현 목표

• 컬렉션 뷰 셀, 재사용 뷰 등록

구현 태스크

• CellRegistration을 통해 커스텀 셀을 컬렉션 뷰에 등록
• SupplementaryRegistration을 통해 커스텀 뷰를 컬렉션 뷰에 등록
• 데이터 소스 함수에서 해당 셀을 디큐로 꺼내 사용하기

핵심 코드

private var cellRegistration: UICollectionView.CellRegistration<CharacterCell, Character>!
    private var headerRegistation: UICollectionView.SupplementaryRegistration<HeaderView>!

• UICollectionView.CellRegistration 제네릭 타입 선언을 통해 해당 셀에 해당 아이템을 사전에 등록

cellRegistration = .init(handler: { cell, _, item in
            cell.configure(with: item)
        })

• 해당 셀 등록 인스턴스를 이니셜라이즈할 때 생성되는 핸들러에서 셀과 인덱스 패스, 아이템 등이 클로저를 통해 들어오는데 이를 통해 해당 셀의 인스턴스 메소드(즉 해당 셀을 만들 때 넣어둔 커스텀 함수와 함께) 사용 가능

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let character = sectionedStubs[indexPath.section].characters[indexPath.item]
        let cell = collectionView.dequeueConfiguredReusableCell(using: cellRegistration, for: indexPath, item: character)
        return cell
    }
    

• 해당 셀이 디큐되는 데이터 소스 함수 내에서는 지금까지 guard let 바인딩을 통해 타입 캐스팅한 것과 달리 using을 통해 받아올 수 있음

headerRegistation = .init(elementKind: UICollectionView.elementKindSectionHeader, handler: { [weak self] header, _, indexPath in
            guard let self = self else { return }
            let section = self.sectionedStubs[indexPath.section]
            header.configure(with: "\(section.category) \(section.characters.count)".uppercased())
        })

• 헤더, 푸터 뷰 또한 같은 맥락으로 핸들러 내에서 해당 뷰 및 인덱스 패스 등에 접근 가능

unc collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
        let section = sectionedStubs[indexPath.section]
        let header = collectionView.dequeueConfiguredReusableSupplementary(using: headerRegistation, for: indexPath)
        header.configure(with: "\(section.category) \(section.characters.count)".uppercased())
        return header
    }

• 헤더 뷰를 재사용할 때 using을 통해 꺼내온 뒤 곧바로 커스텀 메소드를 통해 해당 뷰를 configure하면 된다.

구현 화면

기본적인 셀 등록보다 해당 방법은 캐스팅을 할 필요 없이 곧바로 커스텀 인스터스 메소드를 사용할 수 있다는 점이다.