[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 ^) /

Recommended Posts

Implémentez iOS14 UICollectionView avec le code minimum requis.
Implémentez iOS14 UICollectionView avec CustomCell.
Comment implémenter UICollectionView avec du code uniquement dans Swift
Spécifiez le code de caractère de la source lors de la construction avec Maven
Essayez HelloWorld avec la configuration minimale de Heroku Java spring-boot
Application Android: expliquons le mécanisme de transition d'écran avec un code simple
[swift5] Comment changer la couleur de TabBar ou la couleur de l'élément de TabBar avec le code
Vérifiez le contenu des paramètres avec le levier
Implémentez le système de box ball avec Processing
À propos du traitement de BigDecimal (avec réflexion)
Mettre en forme le contenu de LocalDate avec DateTimeFormatter
[Mise en œuvre] Éliminez l'odeur inquiétante du code
[IOS] Implémentez le mécanisme de mise à jour semi-forcée en passant
Briser de force le problème C "* 3 ou / 2" de [AtCoder Problem-ABC100] avec Java [Code]
Vérifiez le contenu de l'objet argument avec Mockito
Gérez la version de Ruby elle-même avec rbenv
Écraser le contenu de la configuration avec Spring-boot + JUnit5
L'histoire du réglage de l'application Android avec libGDX
RSpec-Résultats de la révision du code de test pour la «validation des utilisateurs»
Calculer le score de similarité des chaînes de caractères avec JAVA
[Ruby] Code pour afficher le jour
Préparez l'environnement CentOS 8 avec Sakura VPS
Spécifiez la valeur par défaut avec @Builder of Lombok
Mesurez la distance du labyrinthe avec la recherche de priorité de largeur
Automatisation dérivée du profil de l'authentification des artefacts de code avec Gradle
J'ai vérifié le nombre de taxis avec Ruby
La procédure que j'ai effectuée lorsque j'ai préparé l'environnement pour gradle + Java avec VS Code (Windows 10)
[Swift] J'ai essayé d'implémenter une interface utilisateur semblable à un profil Instagram avec UICollectionView avec juste du code sans storyboard
Implémentons une fonction pour limiter le nombre d'accès à l'API avec SpringBoot + Redis
Expérimentons le flux d'octroi de code d'autorisation avec Spring Security OAuth-Part 1: Review of OAuth 2.0