[예제] Collection View

CollectionView
Collection View

CompositionalLayout + DiffableDataSource

List

class ListCollectionViewController: UIViewController {
    private var collectionView: UICollectionView!
    private var dataSource: UICollectionViewDiffableDataSource<Section, Product>!

    override func viewDidLoad() {
        super.viewDidLoad()
        createCollectionView()
        createDataSource()
    }
}

//MARK: - CollectionView
extension ListCollectionViewController {

    private func createCollectionView() {
        let layout =  UICollectionViewCompositionalLayout { (section, layoutEnvironment) in
            let appearance = UICollectionLayoutListConfiguration.Appearance.plain
            let configuration = UICollectionLayoutListConfiguration(appearance: appearance)
            
            return NSCollectionLayoutSection.list(using: configuration,
                                                  layoutEnvironment: layoutEnvironment)
        }
        
        collectionView = UICollectionView(frame: view.frame, collectionViewLayout: layout)
    }
}

//MARK: - Data Source
extension ListCollectionViewController {

    private func createDataSource() {
        let cellRegistration = UICollectionView.CellRegistration<CollectionViewListCell, Product> {
            (cell, indexPath, item) in
        }
      
        dataSource = UICollectionViewDiffableDataSource<Section, Product>(collectionView: collectionView) {
            (collectionView, indexPath, item) -> UICollectionViewCell? in
            let cell = collectionView.dequeueConfiguredReusableCell(
                using: cellRegistration,
                for: indexPath,
                item: item
            )
            
            ...
            
            return cell
        }
    }
}

//MARK: - Snapshot
extension ListCollectionViewController {
    func applySnapShot(products: [Product]) {
        var snapshot = NSDiffableDataSourceSnapshot<Section, Product>()
        snapshot.appendSections([.main])
        snapshot.appendItems(products)
        self.dataSource.apply(snapshot, animatingDifferences: false)
    }
}

Grid

class GridCollectionViewController: UIViewController {
    private var collectionView: UICollectionView!
    private var dataSource: UICollectionViewDiffableDataSource<Section, Product>!

    override func viewDidLoad() {
        super.viewDidLoad()
        createCollectionView()
        createDataSource()
    }
}

//MARK: - CollectionView
extension GridCollectionViewController {

    private func createCollectionView() {
        let itemSize = NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1.0),
            heightDimension: .estimated(LayoutAttribute.estimatedHeight)
        )
        let item = NSCollectionLayoutItem(layoutSize: itemSize)
        
        let groupSize = NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1.0),
            heightDimension: .estimated(LayoutAttribute.estimatedHeight)
        )
        let group = NSCollectionLayoutGroup.horizontal(
            layoutSize: groupSize,
            subitem: item,
            count: LayoutAttribute.itemsPerGroup
        )
        group.interItemSpacing = .fixed(LayoutAttribute.largeSpacing)
        
        let section = NSCollectionLayoutSection(group: group)
        section.interGroupSpacing = LayoutAttribute.largeSpacing
        section.contentInsets.leading = LayoutAttribute.smallSpacing
        section.contentInsets.trailing = LayoutAttribute.smallSpacing
        
        let layout = UICollectionViewCompositionalLayout(section: section)
        
        collectionView = UICollectionView(frame: view.frame, collectionViewLayout: layout)
    }
}

//MARK: - Data Source
extension GridCollectionViewController {

    private func createDataSource() {
        let cellRegistration = UICollectionView.CellRegistration<CollectionViewGridCell, Product> {
            (cell, indexPath, item) in
        }
      
        dataSource = UICollectionViewDiffableDataSource<Section, Product>(collectionView: collectionView) {
            (collectionView, indexPath, item) -> UICollectionViewCell? in
            let cell = collectionView.dequeueConfiguredReusableCell(
                using: cellRegistration,
                for: indexPath,
                item: item
            )
            
            ...
            
            return cell
        }
    }
}

//MARK: - Snapshot
extension ListCollectionViewController {
    func applySnapShot(products: [Product]) {
        var snapshot = NSDiffableDataSourceSnapshot<Section, Product>()
        snapshot.appendSections([.main])
        snapshot.appendItems(products)
        self.dataSource.apply(snapshot, animatingDifferences: false)
    }
}