Ich versuche zu lernen, wie man es benutzt UICollectionView. Die Dokumentation ist etwas schwer zu verstehen und die Tutorials, die ich gefunden habe, befanden sich entweder in Ziel C oder in langen, komplizierten Projekten.

Als ich lernte, wie man es benutzt UITableView, hatte We ❤ Swift's, wie man mit iOS 8 eine einfache Tabellenansicht erstellt, und Swift hatte eine sehr grundlegende Einrichtung und Erklärung, um mich zum Laufen zu bringen. Gibt es so etwas für UICollectionView?

Die Antwort unten ist mein Versuch, dies zu lernen.

Dieses Projekt wurde mit Xcode 10 und Swift 4.2 getestet.

Erstellen Sie ein neues Projekt

Es kann nur eine Single View App sein.

Fügen Sie den Code hinzu

Erstellen Sie eine neue Cocoa Touch Class-Datei (Datei> Neu> Datei ...> iOS> Cocoa Touch Class). Nennen Sie es MyCollectionViewCell. Diese Klasse enthält die Ausgänge für die Ansichten, die Sie Ihrer Zelle im Storyboard hinzufügen.

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

Wir werden diese Steckdose später anschließen.

Öffnen Sie ViewController.swift und stellen Sie sicher, dass Sie über den folgenden Inhalt verfügen:

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

Anmerkungen

• UICollectionViewDataSourceund UICollectionViewDelegatesind die Protokolle, denen die Sammlungsansicht folgt. Sie können das UICollectionViewFlowLayoutProtokoll auch hinzufügen , um die Größe der Ansichten programmgesteuert zu ändern. Dies ist jedoch nicht erforderlich.
• Wir fügen nur einfache Zeichenfolgen in unser Raster ein, aber Sie könnten sicherlich später Bilder machen.

Richten Sie das Storyboard ein

Ziehen Sie eine Sammlungsansicht auf den View Controller in Ihrem Storyboard. Sie können Einschränkungen hinzufügen, damit die übergeordnete Ansicht gefüllt wird, wenn Sie möchten.

Stellen Sie sicher, dass Ihre Standardeinstellungen im Attributinspektor ebenfalls vorhanden sind

• Gegenstände: 1
• Layout: Ablauf

Das kleine Feld oben links in der Sammlungsansicht ist eine Sammlungsansichtszelle. Wir werden es als unsere Prototypzelle verwenden. Ziehen Sie eine Beschriftung in die Zelle und zentrieren Sie sie. Sie können die Größe der Zellenränder ändern und Einschränkungen hinzufügen, um die Beschriftung zu zentrieren, wenn Sie möchten.

Schreiben Sie "Zelle" (ohne Anführungszeichen) in das Feld "Kennung" des Attributinspektors für die Zelle "Sammlungsansicht". Beachten Sie, dass dies der gleiche Wert wie let reuseIdentifier = "cell"in ViewController.swift ist.

Setzen Sie im Identitätsinspektor für die Zelle den Klassennamen auf MyCollectionViewCellunsere benutzerdefinierte Klasse, die wir erstellt haben.

Schließen Sie die Steckdosen an

• Verknüpfen Sie das Label in der Auflistungszelle mit myLabelder MyCollectionViewCellKlasse. (Sie können bei gedrückter Ctrl-Taste ziehen .)
• Haken Sie die Sammlung Ansicht delegateund dataSourceauf den View - Controller. (Klicken Sie in der Dokumentübersicht mit der rechten Maustaste auf Sammlungsansicht. Klicken Sie dann auf den Pluspfeil und ziehen Sie ihn nach oben zum Ansichts-Controller.)

Fertig

So sieht es aus, nachdem Sie Einschränkungen hinzugefügt haben, um die Beschriftung in der Zelle zu zentrieren, und die Sammlungsansicht an den Wänden des übergeordneten Elements befestigt haben.

Verbesserungen vornehmen

Das obige Beispiel funktioniert, ist aber ziemlich hässlich. Hier sind einige Dinge, mit denen Sie spielen können:

Hintergrundfarbe

Wechseln Sie im Interface Builder zu Ihrer Sammlungsansicht> Attributinspektor> Ansicht> Hintergrund .

Zellabstand

Wenn Sie den Mindestabstand zwischen Zellen auf einen kleineren Wert ändern, sieht es besser aus. Gehen Sie im Interface Builder zu Ihrer Sammlungsansicht> Größeninspektor> Min. Abstand und verkleinern Sie die Werte. "Für Zellen" ist der horizontale Abstand und "Für Linien" ist der vertikale Abstand.

Zellform

Wenn Sie abgerundete Ecken, einen Rand und dergleichen möchten, können Sie mit der Zelle herumspielen layer. Hier ist ein Beispielcode. Sie würden es direkt danach cell.backgroundColor = UIColor.cyanin den obigen Code einfügen.

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

In dieser Antwort finden Sie weitere Informationen zu der Ebene (z. B. Schatten).

Ändern der Farbe beim Tippen

Dies sorgt für eine bessere Benutzererfahrung, wenn die Zellen visuell auf Tippen reagieren. Eine Möglichkeit, dies zu erreichen, besteht darin, die Hintergrundfarbe zu ändern, während die Zelle berührt wird. Fügen Sie dazu Ihrer ViewControllerKlasse die folgenden zwei Methoden hinzu :

// 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
}

Hier ist der aktualisierte Look:

Weitere Studie

• Ein einfaches UICollectionView-Tutorial
• UICollectionView Tutorial Teil 1: Erste Schritte
• UICollectionView Tutorial Teil 2: Wiederverwendbare Ansichten und Zellenauswahl

UITableView-Version dieser Fragen und Antworten

• UITableView-Beispiel für Swift

Delegaten und Datenquellen von 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
}

Für 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
}

Die Implementierung von UICollectionView ist sehr interessant. Über die folgenden Links können Sie den einfachen Quellcode verwenden und ein Video-Tutorial ansehen:

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

}

UICollectionView ist dasselbe wie UITableView, bietet uns jedoch die zusätzliche Funktionalität, einfach eine Rasteransicht zu erstellen, was in UITableView etwas problematisch ist. Es wird ein sehr langer Beitrag sein. Ich erwähne einen Link, über den Sie alles in einfachen Schritten erhalten.