iOS Exemple de base Swift d'une vue de collection


Exemple

Créer un nouveau projet

Il ne peut s'agir que d'une application à vue unique.

Ajouter le code

Créez un nouveau fichier Cocoa Touch Class (Fichier> Nouveau> Fichier ...> iOS> Classe Cocoa Touch). Nommez-le MyCollectionViewCell . Cette classe contiendra les sorties pour les vues que vous ajoutez à votre cellule dans le storyboard.

import UIKit
class MyCollectionViewCell: UICollectionViewCell {
    
    @IBOutlet weak var myLabel: UILabel!
}

Nous allons connecter cette prise plus tard.

Ouvrez ViewController.swift et assurez-vous d'avoir le contenu suivant:

import UIKit
class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {
    
    let reuseIdentifier = "cell" // also enter this string as the cell identifier in the storyboard
    var items = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48"]
    
    
    // MARK: - UICollectionViewDataSource protocol
    
    // tell the collection view how many cells to make
    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return self.items.count
    }
    
    // make a cell for each cell index path
    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        
        // get a reference to our storyboard cell
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! MyCollectionViewCell
        
        // Use the outlet in our custom class to get a reference to the UILabel in the cell
        cell.myLabel.text = self.items[indexPath.item]
        cell.backgroundColor = UIColor.yellowColor() // make cell more visible in our example project
        
        return cell
    }
    
    // MARK: - UICollectionViewDelegate protocol
    
    func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
        // handle tap events
        print("You selected cell #\(indexPath.item)!")
    }
}

Remarques

  • UICollectionViewDataSource et UICollectionViewDelegate sont les protocoles que la vue de collection suit. Vous pouvez également ajouter le protocole UICollectionViewDelegateFlowLayout pour modifier la taille des vues par programmation, mais cela n'est pas nécessaire.
  • Nous mettons simplement des chaînes simples dans notre grille, mais vous pouvez certainement faire des images plus tard.

Configurer le storyboard

Faites glisser une vue de collection vers le contrôleur de vue de votre storyboard. Vous pouvez ajouter des contraintes pour le faire remplir la vue parent si vous le souhaitez.

Ajout de la vue de la collection à la capture d'écran du storyboard

Assurez-vous que vos valeurs par défaut dans l'inspecteur d'attributs sont également

  • Articles: 1
  • Mise en page: flux

La petite case en haut à gauche de la vue Collection est une cellule de vue de collection. Nous allons l'utiliser comme cellule prototype. Faites glisser une étiquette dans la cellule et centrez-la. Vous pouvez redimensionner les bordures de la cellule et ajouter des contraintes pour centrer l'étiquette si vous le souhaitez.

capture d'écran collection view label

Ecrivez "cellule" (sans guillemets) dans la zone Identifiant de l'inspecteur d'attributs pour la cellule de vue de collection. Notez que c'est la même valeur que let reuseIdentifier = "cell" dans ViewController.swift.

réglage de la cellule

Et dans l'inspecteur d'identité pour la cellule, définissez le nom de la classe sur MyCollectionViewCell , notre classe personnalisée que nous avons MyCollectionViewCell .

paramétrage du nom de la classe de cellule personnalisée

Brancher les sorties

  • Accrochez l'étiquette dans la cellule de collection à myLabel dans la classe MyCollectionViewCell . (Vous pouvez faire glisser le curseur .)
  • Accrochez le delegate et le dataSource du View View au View Controller. (Cliquez avec le bouton droit de la souris sur la vue Collection dans la structure du document. Cliquez ensuite sur la flèche et faites-la glisser jusqu'au View Controller.)

capture d'écran du délégué et des sorties de source de données

Fini

Voici à quoi cela ressemble après l'ajout de contraintes pour centrer l'étiquette dans la cellule et épingler la vue de collection aux murs du parent.

capture d'écran du résultat final

Faire des améliorations

Si vous souhaitez apporter des améliorations à l'apparence, reportez-vous à la publication d'origine de cet exemple .

vue de collection avec capture d'écran améliorée

Une étude plus approfondie