web-dev-qa-db-fra.com

Comment créer une vue de collection simple avec Swift

J'essaie d'apprendre à utiliser UICollectionView. Le documentation est un peu difficile à comprendre et les tutoriels que j'ai trouvés étaient soit dans Objective C, soit dans de longs projets compliqués.

Quand j'apprenais à utiliser UITableView, Nous Swift's Comment créer un tableau simple avec iOS 8 et Swift avait une configuration très simple et une explication pour que je puisse continuer. Y a-t-il quelque chose comme ceci pour UICollectionView?

La réponse ci-dessous est ma tentative d'apprendre à le faire.

iosswiftuicollectionview
165
Suragch

Ce projet a été testé avec Xcode 10 et Swift 4.2.

Créer un nouveau projet

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

Ajouter le code

Créez un nouveau fichier Cocoa Touch Class (Fichier> Nouveau> Fichier ...> iOS> Cocoa Touch Class). Nommez-le MyCollectionViewCell. Cette classe contient les points de vente des vues que vous ajoutez à votre cellule dans le storyboard.

import UIKit
class MyCollectionViewCell: UICollectionViewCell {

    @IBOutlet weak var myLabel: UILabel!
}

Nous connecterons cette prise plus tard.

Ouvrez ViewController.Swift et assurez-vous que vous avez 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, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

        // get a reference to our storyboard cell
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath as 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.cyan // make cell more visible in our example project

        return cell
    }

    // MARK: - UICollectionViewDelegate protocol

    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        // handle tap events
        print("You selected cell #\(indexPath.item)!")
    }
}

Notes

  • UICollectionViewDataSource et UICollectionViewDelegate sont les protocoles suivis par la vue Collection. Vous pouvez également ajouter le protocole UICollectionViewFlowLayout pour modifier la taille des vues par programmation, mais cela n'est pas nécessaire.
  • Nous ne faisons que placer des chaînes simples dans notre grille, mais vous pouvez certainement créer des images plus tard.

Installer le storyboard

Faites glisser une vue de collection vers le contrôleur de vues de votre story-board. Vous pouvez ajouter des contraintes pour que celle-ci remplisse la vue parent si vous le souhaitez.

enter image description here

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

  • Articles: 1
  • Layout: Flow

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

enter image description here

Écrivez "cellule" (sans les guillemets) dans la zone Identifiant de l'inspecteur des attributs pour la cellule de la vue Collection. Notez qu'il s'agit de la même valeur que let reuseIdentifier = "cell" dans ViewController.Swift.

enter image description here

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

enter image description here

Brancher les points de vente

  • Accrochez le libellé de la cellule de collection à myLabel dans la classe MyCollectionViewCell. (Vous pouvez Control-drag .)
  • Accrochez la vue de collection delegate et dataSource au contrôleur de vues. (Cliquez avec le bouton droit de la souris sur Collection dans le plan du document. Cliquez et déplacez la flèche plus vers le contrôleur de vue.)

enter image description here

Fini

Voici à quoi cela ressemble après avoir ajouté des contraintes pour centrer le libellé dans la cellule et épinglé la vue Collection aux murs du parent.

enter image description here

Faire des améliorations

L'exemple ci-dessus fonctionne, mais il est plutôt moche. Voici quelques éléments avec lesquels vous pouvez jouer:

Couleur de fond

Dans le Générateur d'interface, accédez à votre vue Collection> Inspecteur des attributs> Vue> Arrière-plan .

Espacement des cellules

La modification de l'espacement minimal entre les cellules en une valeur inférieure le rend meilleur. Dans le Générateur d'interface, accédez à la vue Collection> Inspecteur de taille> Espacement minimum et réduisez les valeurs. "Pour les cellules" est la distance horizontale et "Pour les lignes" est la distance verticale.

Forme de la cellule

Si vous voulez des coins arrondis, une bordure, etc., vous pouvez jouer avec la cellule layer. Voici un exemple de code. Vous le mettriez directement après cell.backgroundColor = UIColor.cyan dans le code ci-dessus.

cell.layer.borderColor = UIColor.black.cgColor
cell.layer.borderWidth = 1
cell.layer.cornerRadius = 8

Voir cette réponse pour d'autres choses que vous pouvez faire avec la couche (ombre, par exemple).

Changer la couleur lorsque vous appuyez dessus

Il en résulte une meilleure expérience utilisateur lorsque les cellules répondent visuellement aux taps. Une façon d'y parvenir est de changer la couleur d'arrière-plan pendant le toucher de la cellule. Pour ce faire, ajoutez les deux méthodes suivantes à votre classe ViewController:

// change background color when user touches cell
func collectionView(_ collectionView: UICollectionView, didHighlightItemAt indexPath: IndexPath) {
    let cell = collectionView.cellForItem(at: indexPath)
    cell?.backgroundColor = UIColor.red
}

// change background color back when user releases touch
func collectionView(_ collectionView: UICollectionView, didUnhighlightItemAt indexPath: IndexPath) {
    let cell = collectionView.cellForItem(at: indexPath)
    cell?.backgroundColor = UIColor.cyan
}

Voici le look mis à jour:

enter image description here

Une étude plus approfondie

Version UITableView de ce Q & A

464
Suragch

Délégués et sources de données de UICollectionView

//MARK: UICollectionViewDataSource

override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
    return 1     //return number of sections in collection view
}

override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 10    //return number of rows in section
}

override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("collectionCell", forIndexPath: indexPath)
    configureCell(cell, forItemAtIndexPath: indexPath)
    return cell      //return your cell
}

func configureCell(cell: UICollectionViewCell, forItemAtIndexPath: NSIndexPath) {
    cell.backgroundColor = UIColor.blackColor()


    //Customise your cell

}

override func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {
    let view =  collectionView.dequeueReusableSupplementaryViewOfKind(UICollectionElementKindSectionHeader, withReuseIdentifier: "collectionCell", forIndexPath: indexPath) as UICollectionReusableView
    return view
}

//MARK: UICollectionViewDelegate
override func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
      // When user selects the cell
}

override func collectionView(collectionView: UICollectionView, didDeselectItemAtIndexPath indexPath: NSIndexPath) {
     // When user deselects the cell
}
3
Saranjith

Pour Swift 4.2 -

//MARK: UICollectionViewDataSource

func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
    return 1     //return number of sections in collection view
}

func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 10    //return number of rows in section
}

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "collectionCell", for: indexPath as IndexPath)
    configureCell(cell: cell, forItemAtIndexPath: indexPath)
    return cell      //return your cell
}

func configureCell(cell: UICollectionViewCell, forItemAtIndexPath: NSIndexPath) {
    cell.backgroundColor = UIColor.black


    //Customise your cell

}

func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {
    let view =  collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "collectionCell", for: indexPath as IndexPath) as UICollectionReusableView
    return view
}

//MARK: UICollectionViewDelegate
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
    // When user selects the cell
}

func collectionView(collectionView: UICollectionView, didDeselectItemAtIndexPath indexPath: NSIndexPath) {
    // When user deselects the cell
}
3
Abhishek Mishra

La mise en œuvre de UICollectionView est très intéressante. Vous pouvez utiliser le code source simple et regarder un didacticiel vidéo en utilisant ces liens:

https://github.com/Ady901/Demo02CollectionView.git

https://www.youtube.com/watch?v=5SrgvZF67Yw

extension ViewController : UICollectionViewDataSource {

    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 2
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return nameArr.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "DummyCollectionCell", for: indexPath) as! DummyCollectionCell
        cell.titleLabel.text = nameArr[indexPath.row]
        cell.userImageView.backgroundColor = .blue
        return cell
    }

}

extension ViewController : UICollectionViewDelegate {

    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        let alert = UIAlertController(title: "Hi", message: "\(nameArr[indexPath.row])", preferredStyle: .alert)
        let action = UIAlertAction(title: "OK", style: .default, handler: nil)
        alert.addAction(action)
        self.present(alert, animated: true, completion: nil)
    }

}
1
Aditya Sharma

UICollectionView est identique à UITableView, mais il nous offre la fonctionnalité supplémentaire consistant à simplement créer une vue en grille, ce qui est un peu problématique dans UITableView. Ce sera un très long post je mentionne un lien d'où vous obtiendrez tout en étapes simples.

0
Dilraj Singh