[SWIFT] Implementieren Sie iOS14 UICollectionView mit dem minimal erforderlichen Code.

Auslösen

UICollectionView wurde auf der WWDC2020 um eine neue API erweitert, und ich bin sehr dankbar, dass verschiedene Personen die Gliederung und die detaillierten Funktionen geschrieben haben! Ich verstehe jedoch nicht, dass ich es nicht verstehe oder wie ich es konkret schreibe. ・ Ich verstehe nicht das ganze Bild des Codes ... Ich hatte große Probleme, also gibt es vielleicht andere Leute, die die gleichen Schwierigkeiten haben! Ich dachte, es wäre ein Artikel.

Implementierungsimage

Alle 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

Datendefinition anzeigen

enum Section: CaseIterable {
    case kanto
    case kyusyu
}

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

Hier werden die anzuzeigenden Daten definiert. data Die allerersten" Kanto "und" Kyusyu "sind Abschnittsüberschriften. (Wie Sie im Implementierungsabbild sehen können, werden die Abschnitte automatisch großgeschrieben.)

Layouteinstellungen

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

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

Hier wird das Layout der collectionView festgelegt. Dieses Mal verwende ich das Layout, das standardmäßig verwendet werden kann, aber ich plane, diesen Bereich beim Anpassen der Zellengröße usw. zu ändern. HeaderMode.firstItemInSection ← Dies ist die Einstellung, die den Datenanfang als Abschnittsüberschrift behandelt.

Zelleneinstellungen

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

Hier legen wir fest, wie die übergebenen Daten angezeigt werden. Von der traditionellen "UICollectionViewDataSource" func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell Es hat die gleiche Rolle wie.

normalCell ist eine Variable zum Registrieren von Zellen in collectionView. Der Ausblick ist besser, da Sie die Zelle gleichzeitig registrieren und einstellen können.

Datenaktualisierung

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

Die zuerst definierten Daten werden auf dem Bildschirm angezeigt, indem sie auf die collectionView angewendet werden.

Zusammenfassung

Ich habe den Wunsch, den Abschnittstitel besser zu schreiben, aber ich konnte ihn klarer als zuvor schreiben. Dieser Artikel verwendet nur grundlegende UICollectionView-Funktionen, daher schreibe ich in anderen Artikeln weiterführende Artikel.

Bitte LGTM, wenn Sie möchten, da es ermutigend sein wird \ (^ o ^) /