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
UICollectionViewDataSource
und UICollectionViewDelegate
sind die Protokolle, denen die Sammlungsansicht folgt. Sie können das UICollectionViewFlowLayout
Protokoll 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 MyCollectionViewCell
unsere benutzerdefinierte Klasse, die wir erstellt haben.
Schließen Sie die Steckdosen an
- Verknüpfen Sie das Label in der Auflistungszelle mit
myLabel
der MyCollectionViewCell
Klasse. (Sie können bei gedrückter Ctrl-Taste ziehen .)
- Haken Sie die Sammlung Ansicht
delegate
und dataSource
auf 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.cyan
in 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 ViewController
Klasse 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
UITableView-Version dieser Fragen und Antworten
@IBOutlet
For-myLabel
In-Code anschließen würden, würde dies zu einem Absturz führen.self.collectionView.registerClass(MyCollectionViewCell.self, forCellWithReuseIdentifier: "Cell")
. Wenn Sie immer noch das Problem haben, überprüfen Sie, obreuseIdentifier
es imdequeueReusableCellWithReuseIdentifier
und im Storyboard gleich istDelegaten und Datenquellen von UICollectionView
quelle
Für
swift 4.2
-quelle
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
quelle
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.
quelle