swift CollectionView Utilisation super basique

Notez comment utiliser CollectionView après TableView.

1. Éléments de base 1.1 DataSource, délégué (sur StoryBoard) Après avoir ajouté la CollectionView dans Storyboard Vérifiez DataSource et Delegate en associant CollectionView et ViewController Si vous pouvez le vérifier, il ressemble à ceci 

Ajouter l'ID à la cellule

1.2 DataSource, Delegate (sur le code source) Ajouter un protocole dans le contrôleur de vue

CellDetailPageViewController

class CellDetailPageViewController: UIViewController,UICollectionViewDelegate, UICollectionViewDataSource {
}

Ajouter une instance CollectionView

CellDetailPageViewController

@IBOutlet weak var collectionView: UICollectionView!

1.3 Ajouter la méthode renvoyée avec une erreur Déterminez le nombre de cellules

CellDetailPageViewController

    let contentNeedShow = ["Pomme","fraise","grain de raisin","Ananas","kiwi","Tateyama","Body Mountain pour homme","Tanigawadake","Mont Kinmine","Hotakadake","Grand Bodhisattva","café","Lait de soja","jus","Gazéifiée","eau"]
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return contentNeedShow.count
    }

Déterminer le contenu de la cellule (définir la couleur de l'élément de base)

CellDetailPageViewController

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) 
    cell.backgroundColor = UIColor.lightGray
    return cell
    }

2. Éléments clients 2.1 Utilise le coin arrondi pour mettre des caractères dans la cellule Créer une nouvelle classe CollectionViewCell

Cell

class Cell: UICollectionViewCell{
    @IBOutlet weak var label: UILabel!
}

Changer la variable qui renvoie le contenu de Cell

CellDetailPageViewController

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! Cell
    cell.backgroundColor = UIColor.lightGray
    cell.layer.cornerRadius = 10
    cell.label.text = contentNeedShow[indexPath.row]
    return cell
    }

2.2 Ajuster l'espacement entre les cellules

Ajout du nouveau protocole UICollectionViewDelegateFlowLayout

CellDetailPageViewController

class CellDetailPageViewController: UIViewController,UICollectionViewDelegate, UICollectionViewDataSource,UICollectionViewDelegateFlowLayout {
}

Ajouter une méthode

CellDetailPageViewController

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let horizontalSpace : CGFloat = 20
    let cellSize : CGFloat = self.view.bounds.width / 3 - horizontalSpace
    return CGSize(width: cellSize, height: cellSize)
    }

Ajouter à la vue

CellDetailPageViewController

    override func viewDidLoad() {
        super.viewDidLoad()

        let layout = UICollectionViewFlowLayout()
        layout.sectionInset = UIEdgeInsets(top: 15, left: 15, bottom: 15, right: 15)
        collectionView.collectionViewLayout = layout
    }

Le résultat ressemble à ceci