So erstellen Sie mit Swift eine einfache Sammlungsansicht

181

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.

Suragch
quelle

Antworten:

497

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.

Geben Sie hier die Bildbeschreibung ein

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.

Geben Sie hier die Bildbeschreibung ein

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.

Geben Sie hier die Bildbeschreibung ein

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

Geben Sie hier die Bildbeschreibung ein

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

Geben Sie hier die Bildbeschreibung ein

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.

Geben Sie hier die Bildbeschreibung ein

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:

Geben Sie hier die Bildbeschreibung ein

Weitere Studie

UITableView-Version dieser Fragen und Antworten

Suragch
quelle
1
Ich bekomme cell.myLabel als Null und es stürzt ab. Irgendeine Idee warum? Ich benutze ein benutzerdefiniertes Layout
Gerald
4
Wenn Sie den Ausgang nicht durch Ziehen mit gedrückter Ctrl-Taste vom Etikett im Storyboard zum @IBOutletFor- myLabelIn-Code anschließen würden, würde dies zu einem Absturz führen.
Suragch
3
Wenn Sie den Interface Builder verwenden und die Zelle über eine Steckdose referenzieren, registrieren Sie die benutzerdefinierte Zellenklasse nicht in Ihrem Controller. siehe das
Gerald
1
Wenn der UICollectionViewCell-Ausgang Null ist, müssen Sie ihn entfernen self.collectionView.registerClass(MyCollectionViewCell.self, forCellWithReuseIdentifier: "Cell"). Wenn Sie immer noch das Problem haben, überprüfen Sie, ob reuseIdentifieres im dequeueReusableCellWithReuseIdentifierund im Storyboard gleich ist
Ashok R
40
Ich wünschte, Apples Dokumentation wäre so einfach zu lesen wie diese Erklärung
elmarko
3

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
}
Saranjith
quelle
3

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
}
Abhishek Mishra
quelle
1

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

}
Aditya Sharma
quelle
0

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.

Dilraj Singh
quelle