Come creare una vista collezione semplice con Swift

Question

Sto cercando di imparare come usare UICollectionView. Il documentation è un po 'difficile da capire e le esercitazioni che ho trovato erano in Objective C o lunghi progetti complicati.

Quando stavo imparando come utilizzare UITableView, Abbiamo ❤ diHow to make a simple tableview with iOS 8 and Swift Swift aveva una configurazione molto semplice e la spiegazione di farmi andare. C'è qualcosa come questo per UICollectionView?

La risposta sotto è il mio tentativo di imparare a fare questo.

Answer 1

Questo progetto è stato testato con Xcode 9 e Swift 4.

Creare un nuovo progetto

Può essere solo una vista singola applicazione.

aggiungere il codice

Creare un nuovo file Cocoa Touch Class (File> Nuovo> File ...> iOS> Cocoa Touch Class). Chiamarlo 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.

Aprire ViewController.swift e assicurarsi 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, 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)!") 
    } 
} 

Note

• UICollectionViewDataSource e UICollectionViewDelegate sono i protocolli che la vista di raccolta segue. È inoltre possibile aggiungere il protocollo UICollectionViewFlowLayout per modificare la dimensione delle viste a livello di codice, ma non è necessario.
• Stiamo semplicemente inserendo semplici stringhe nella nostra griglia, ma potreste sicuramente fare le immagini in seguito.

Setup storyboard

Trascinare una collezione guarda al controller View nel vostro storyboard. Puoi aggiungere vincoli per farlo riempire la vista genitore, se lo desideri.

Assicurarsi che le impostazioni predefinite nel Attribute Inspector sono anche

• Articoli: 1
• layout: Flusso

La piccola scatola in alto a sinistra della Vista raccolta è una cella di visualizzazione 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.

Write "cella" (senza virgolette) nella casella Identifier degli Attributi Ispettore per la raccolta delle cellule di vista. Si noti che questo è lo stesso valore di let reuseIdentifier = "cell" in ViewController.swift.

E nel ispettore di identità per la cella, impostare il nome della classe al MyCollectionViewCell, la nostra classe personalizzata che abbiamo fatto.

connettere i punti

• Agganciare l'etichetta nella cella raccolta per myLabel nella classe MyCollectionViewCell. (È possibile Control-drag.)
• Agganciare la vista raccolta delegate e dataSource al controller di visualizzazione. (Fare clic destro collezione guarda nella Struttura documento. Quindi fare clic e trascinare il plus freccia fino al Controller View.)

Finito

Ecco come si presenta dopo l'aggiunta di vincoli per centra l'etichetta nella cella e fissa la vista raccolta ai muri del genitore.

miglioramenti

L'esempio precedente funziona ma è piuttosto brutto. Qui ci sono alcune cose che si può giocare con:

sfondo di colore

In Interface Builder, vai al tuo Collection Visualizza> Attributi> Visualizza> Sfondo.

spaziatura cellulare

Modifica della spaziatura minima tra le cellule ad un valore inferiore rende un aspetto migliore. In Interface Builder, vai alla tua raccolta Visualizza> Impostazioni dimensione> Spaziatura minima e riduci i valori. "Per le celle" è la distanza orizzontale e "Per le linee" è la distanza verticale.

forma cellulare

Se volete angoli arrotondati, il bordo, e simili, si può giocare con la cella layer. Ecco alcuni esempi di codice. Lo inseriresti direttamente dopo lo cell.backgroundColor = UIColor.cyan nel codice sopra.

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

Vedere this answer per altre cose che si possono fare con lo strato (ombra, per esempio).

Modifica del colore quando sfruttato

Si fa per una migliore esperienza utente quando le cellule reagiscono visivamente rubinetti. Un modo per ottenere ciò è cambiare il colore di sfondo mentre la cella viene toccata. Per fare questo, aggiungere i seguenti due metodi per la 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 
} 

Ecco il look aggiornato:

ulteriore studio

• A Simple UICollectionView Tutorial
• UICollectionView Tutorial Part 1: Getting Started
• UICollectionView Tutorial Part 2: Reusable Views and Cell Selection

versione UITableView di questo Q & Un

• UITableView example for Swift

Answer 2

Delegati e Datasources di 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 
} 

Answer 3

UICollecti onView è uguale a UITableView ma ci offre la funzionalità aggiuntiva di creare semplicemente una griglia, che è un po 'problematica in UITableView. Sarà un post molto lungo che menziono uno link da cui otterrete tutto in semplici passaggi.