Implement the UICollectionView of iOS14 with the minimum required code.

Trigger

A new API has been added to UICollectionView in WWDC2020, and I am very grateful that various people have written the outline and detailed functions! However, I don't understand my lack of understanding or how to write it concretely. ・ I don't understand the whole picture of the code ... I had a lot of trouble, so maybe there are other people who have the same difficulty! I thought it was an article.

Implementation image

All chords

ViewController.swift

class ViewController: UIViewController {

    @IBOutlet weak var collectionView: UICollectionView!
    
    enum Section: CaseIterable {
        case kanto
        case kyusyu
    }
    
    let data: [Section: [String]] = [
        .kanto: ["Kanto", "Tokyo", "Chiba"],
        .kyusyu: ["Kyusyu", "Fukuoka", "Miyazaki"]
    ]

    var collectionViewDataSource: UICollectionViewDiffableDataSource<Section, String>!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        var layoutConfig = UICollectionLayoutListConfiguration(appearance: .grouped)
        layoutConfig.headerMode = UICollectionLayoutListConfiguration.HeaderMode.firstItemInSection

        let layout = UICollectionViewCompositionalLayout.list(using: layoutConfig)
        collectionView.collectionViewLayout = layout
        
        collectionViewDataSource = createDataSource()
        reloadList()
    }
    

    func createDataSource() -> UICollectionViewDiffableDataSource<Section, String> {
        let normalCell = UICollectionView.CellRegistration<UICollectionViewListCell, String> { (cell, indexPath, text) in
            var content = cell.defaultContentConfiguration()
            content.text = text
            cell.contentConfiguration = content
        }
        
        return UICollectionViewDiffableDataSource<Section, String>(collectionView: collectionView) {
            (collectionView, indexPath, text) -> UICollectionViewCell? in
        
            return collectionView.dequeueConfiguredReusableCell(using: normalCell, for: indexPath, item: text)
        }
    }
    
    func reloadList(){
        var snapshot = NSDiffableDataSourceSnapshot<Section, String>()
        snapshot.appendSections(Section.allCases)
        snapshot.appendItems(data[.kanto]!, toSection: .kanto)
        snapshot.appendItems(data[.kyusyu]!, toSection: .kyusyu)
        collectionViewDataSource.apply(snapshot)
    }
}

Boil

Display data definition

enum Section: CaseIterable {
    case kanto
    case kyusyu
}

let data: [Section: [String]] = [
    .kanto: ["Kanto", "Tokyo", "Chiba"],
    .kyusyu: ["Kyusyu", "Fukuoka", "Miyazaki"]
]

Here, the data to be displayed is defined. data The very first" Kanto "and" Kyusyu "are section titles. (As you can see in the implementation image, the sections are automatically capitalized.)

Layout settings

var layoutConfig = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
layoutConfig.headerMode = UICollectionLayoutListConfiguration.HeaderMode.firstItemInSection

let layout = UICollectionViewCompositionalLayout.list(using: layoutConfig)
collectionView.collectionViewLayout = layout

Here, the layout of the collectionView is set. This time I am using the layout that can be used by default, but I plan to change this area when customizing the cell size etc. HeaderMode.firstItemInSection ← This is the setting that treats the beginning of the data as the section title.

Cell settings

func createDataSource() -> UICollectionViewDiffableDataSource<Section, String> {
	let normalCell = UICollectionView.CellRegistration<UICollectionViewListCell, String> { (cell, indexPath, text) in
		var content = cell.defaultContentConfiguration()
		content.text = text
		cell.contentConfiguration = content
	}
	
	return UICollectionViewDiffableDataSource<Section, String>(collectionView: collectionView) {
		(collectionView, indexPath, text) -> UICollectionViewCell? in
	
		return collectionView.dequeueConfiguredReusableCell(using: normalCell, for: indexPath, item: text)
	}
}

Here, we set how to display the passed data. Of the traditional ʻUICollectionViewDataSource func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell` It has the same role as.

normalCell is a variable for registering cells in collectionView. The outlook is better because you can register and set the cell at the same time.

Data update

func reloadList(){
	var snapshot = NSDiffableDataSourceSnapshot<Section, String>()
	snapshot.appendSections(Section.allCases)
	snapshot.appendItems(data[.kanto]!, toSection: .kanto)
	snapshot.appendItems(data[.kyusyu]!, toSection: .kyusyu)
	collectionViewDataSource.apply(snapshot)
}

The data defined first is displayed on the screen by ʻapply` to the collectionView.

Summary

I have a desire to write the section title in a better way, but I was able to write it more clearly than before. This article uses only basic UICollectionView features, so I'll write more advanced articles in other articles.

Please LGTM if you like because it will be encouraging \ (^ o ^) /