iOS Esempio di base Swift di una vista insieme

Esempio

Crea un nuovo progetto

Può essere solo un'applicazione vista singola.

Aggiungi il codice

Creare un nuovo file di classe Cocoa Touch (File> Nuovo> File ...> iOS> Cocoa Touch Class). MyCollectionViewCell . Questa classe terrà gli outlets per le viste che aggiungi alla tua cella nello storyboard.

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

Collegheremo questa presa più tardi.

Apri ViewController.swift e assicurati di avere il seguente contenuto:

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

Gli appunti

  • UICollectionViewDataSource e UICollectionViewDelegate sono i protocolli UICollectionViewDelegate dalla vista UICollectionViewDelegate . È anche possibile aggiungere il protocollo UICollectionViewDelegateFlowLayout per modificare la dimensione delle viste a livello di UICollectionViewDelegateFlowLayout , ma non è necessario.
  • Stiamo semplicemente mettendo delle semplici stringhe nella nostra griglia, ma potreste sicuramente fare le immagini in seguito.

Imposta lo storyboard

Trascina una vista raccolta sul controller di visualizzazione nello storyboard. Puoi aggiungere vincoli per farlo riempire la vista genitore, se lo desideri.

aggiungendo la visualizzazione della raccolta allo screenshot della storyboard

Assicurati che anche i tuoi valori di default nell'Inspector degli attributi

  • Articoli: 1
  • Layout: flusso

La piccola scatola in alto a sinistra della Vista raccolta è una cella Vista raccolta. Lo useremo come nostra cellula prototipo. Trascina un'etichetta nella cella e centrala. Puoi ridimensionare i bordi della cella e aggiungere vincoli per centrare l'etichetta, se lo desideri.

screenshot dell'etichetta della raccolta

Scrivi "cella" (senza virgolette) nella casella Identificatore dell'Ispettore Attributi per la cella Vista raccolta. Si noti che questo è lo stesso valore di let reuseIdentifier = "cell" in ViewController.swift.

impostazione screenshot dell'identificatore di riutilizzo delle celle

E in Identity Inspector per la cella, imposta il nome della classe su MyCollectionViewCell , la nostra classe personalizzata che abbiamo creato.

impostazione screenshot del nome della classe di cella personalizzata

Agganciare le prese

  • Aggancia l'etichetta nella cella di raccolta a myLabel nella classe MyCollectionViewCell . (Puoi trascinare il controllo .)
  • Agganciare il delegate Vista View e dataSource al View Controller. (Fare clic con il pulsante destro del mouse su Vista raccolta nella struttura del documento, quindi fare clic e trascinare la freccia più verso l'alto fino a visualizzare il controller.)

impostazione screenshot di delegati e datasource

Finito

Ecco come appare dopo aver aggiunto i vincoli per centrare l'etichetta nella cella e bloccare la vista raccolta sui muri del genitore.

screenshot del risultato finale

Fare miglioramenti

Se vuoi migliorare l'aspetto, guarda il post originale da cui proviene questo esempio .

visualizzazione raccolta con screenshot dell'aspetto migliorato

Ulteriore studio