[SWIFT] Implémentez iOS14 UICollectionView avec le code minimum requis.

Déclencheur

Une nouvelle API a été ajoutée à UICollectionView à la WWDC2020, et je suis très reconnaissant que plusieurs personnes aient écrit le plan et les fonctions détaillées! Cependant, je ne comprends pas mon manque de compréhension ou comment l'écrire concrètement. ・ Je ne comprends pas toute l'image du code ... J'ai eu beaucoup de mal, alors peut-être qu'il y a d'autres personnes qui ont la même difficulté! Je pensais que c'était un article.

Image de mise en œuvre

Tous les codes

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)
    }
}

Kaisetsu

Afficher la définition des données

enum Section: CaseIterable {
    case kanto
    case kyusyu
}

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

Ici, les données à afficher sont définies. data Les tout premiers" Kanto "et" Kyusyu "sont des titres de section. (Comme vous pouvez le voir dans l'image d'implémentation, les sections sont automatiquement mises en majuscules.)

Paramètres de mise en page

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

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

Ici, la disposition de la collectionView est définie. Cette fois, j'utilise la mise en page qui peut être utilisée par défaut, mais je prévois de modifier cette zone lors de la personnalisation de la taille de la cellule, etc. HeaderMode.firstItemInSection ← Il s'agit du paramètre qui traite le début des données comme le titre de la section.

Paramètres de cellule

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)
	}
}

Ici, nous définissons comment afficher les données transmises. De la traditionnelle ʻUICollectionViewDataSource func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell` Il a le même rôle que.

normalCell est une variable pour enregistrer des cellules dans collectionView. Les perspectives sont meilleures car vous pouvez enregistrer et définir la cellule en même temps.

Mise à jour des données

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)
}

Les données définies en premier sont affichées à l'écran en appliquant à la collectionView.

Sommaire

J'ai le désir de mieux écrire le titre de la section, mais j'ai pu l'écrire plus clairement qu'avant. Cet article utilise uniquement les fonctionnalités UICollectionView de base, je vais donc écrire des articles plus avancés dans d'autres articles.

S'il vous plaît LGTM si vous le souhaitez car cela encouragera \ (^ o ^) /