073_DiffableDataSource(테이블뷰스타일 컬렉션뷰)

iOS 13에서 나온 CollectionView API(DiffableDataSource, Compositional Layout)를 기반으로 iOS14에서 Section Snapshot, List Configuration이 새로 나왔다. 이를 사용하여 테이블뷰처럼 생긴 컬렉션뷰를 만들 수 있다.

 

#. 테이블뷰 스타일 컬렉션뷰 흐름(Diffable)

 1. 레이아웃 설정: UICollectionViewLayout타입 레이아웃을 반환하는 메서드 생성

 2. 데이터소스 설정(재사용셀+ 셀컨텐츠): diffable 데이터소스 타입으로 셀재사용(numberOfItemsInSection, CellForItemAt) + 셀컨텐츠 설정

 

*스냅샷데이터를 데이터소스에 저장하면 데이터갯수가 결정되기 때문에 그 데이터가 cellRegistration의 itemIdentifier역할 한다고 보면 됨.

---

 1. 레이아웃 설정: UICollectionViewLayout타입 레이아웃을 반환하는 메서드 생성 //createLayout()

//MARK: - 1. 레이아웃 설정: UICollectionViewLayout타입 레이아웃을 반환하는 메서드 생성
    private func createLayout() -> UICollectionViewLayout {
        let config = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
        let layout = UICollectionViewCompositionalLayout.list(using: config)
        return layout
    }

 

 2. 데이터소스 설정(재사용셀+ 셀컨텐츠) //configureDataSource()

-. diffable 데이터소스 타입으로 셀재사용(numberOfItemsInSection, CellForItemAt)

//cellForItemAt역할(diffable 데이터소스 설정): 어떤 컬렉션뷰에 해당하는 데이터소스인지, 어떤 셀을 재사용할건지 설정
        dataSource = UICollectionViewDiffableDataSource(collectionView: collectionView, cellProvider: {
            collectionView, indexPath, itemIdentifier in
            let cell = collectionView.dequeueConfiguredReusableCell(using: cellRegistration, for: indexPath, item: itemIdentifier)
            return cell
        })
          
        //numberofItemsInSection역할(스냅샷 설정): 화면에 보여줄 데이터 설정 + 데이터를 데이터소스에 넣어 화면 갱신
        var snapshot = NSDiffableDataSourceSnapshot<Int, String>() //string타입 데이터
        snapshot.appendSections([0])
        snapshot.appendItems(list)
        dataSource.apply(snapshot) //apply: UI업데이트(화면갱신), 연산, 차이점, 애니메이션 등 설정 가능한 메서드

 

-. 셀컨텐츠 설정

        //cellRegistration을 전역변수로 설정하지 않으면 cellRegistration의 타입을 모르기 때문에 cellRegistration에 타입 직접 명시하고 클로저 사용
        let cellRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, String>(handler: { cell, indexPath, itemIdentifier in
            var content = UIListContentConfiguration.valueCell() //세부설정
            content.text = itemIdentifier
            content.secondaryText = "\(itemIdentifier.count)살"
            cell.contentConfiguration = content
            
            var backgroundConfig = UIBackgroundConfiguration.listPlainCell() //배경관련 셀 속성 선택 가능
            backgroundConfig.strokeWidth = 2
            backgroundConfig.strokeColor = .systemPink
            cell.backgroundConfiguration = backgroundConfig
        })