[SWIFT] schnelle CollectionView Super grundlegende Verwendung

Notieren Sie sich, wie CollectionView nach TableView verwendet wird.

1. Grundelemente 1.1 DataSource, Delegate (auf StoryBoard) Nach dem Hinzufügen der CollectionView im Storyboard Überprüfen Sie DataSource und Delegate, indem Sie CollectionView und ViewController zuordnen Wenn Sie es überprüfen können, sieht es so aus 

ID zur Zelle hinzufügen

1.2 DataSource, Delegate (im Quellcode) Protokoll im View Controller hinzufügen

CellDetailPageViewController

class CellDetailPageViewController: UIViewController,UICollectionViewDelegate, UICollectionViewDataSource {
}

CollectionView-Instanz hinzufügen

CellDetailPageViewController

@IBOutlet weak var collectionView: UICollectionView!

1.3 Fügen Sie die fehlerhaft zurückgegebene Methode hinzu Bestimmen Sie die Anzahl der Zellen

CellDetailPageViewController

    let contentNeedShow = ["Apfel","Erdbeere","Traube","Ananas","Kiwi","Tateyama","Männerkörperberg","Tanigawadake","Mt. Kinmine","Hotakadake","Großer Bodhisattva","Kaffee","Soja Milch","Saft","Mit Kohlensäure","Wasser"]
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return contentNeedShow.count
    }

Bestimmen Sie den Inhalt der Zelle (stellen Sie die Farbe des Grundelements ein)

CellDetailPageViewController

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) 
    cell.backgroundColor = UIColor.lightGray
    return cell
    }

2. Kundenelemente 2.1 Verwendet Rounded Corner, um Zeichen in Cell einzufügen Erstellen Sie eine neue CollectionViewCell-Klasse

Cell

class Cell: UICollectionViewCell{
    @IBOutlet weak var label: UILabel!
}

Ändern Sie die Variable, die den Inhalt von Cell zurückgibt

CellDetailPageViewController

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! Cell
    cell.backgroundColor = UIColor.lightGray
    cell.layer.cornerRadius = 10
    cell.label.text = contentNeedShow[indexPath.row]
    return cell
    }

2.2 Passen Sie den Abstand zwischen den Zellen an

Neues Protokoll UICollectionViewDelegateFlowLayout hinzugefügt

CellDetailPageViewController

class CellDetailPageViewController: UIViewController,UICollectionViewDelegate, UICollectionViewDataSource,UICollectionViewDelegateFlowLayout {
}

Methode hinzufügen

CellDetailPageViewController

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let horizontalSpace : CGFloat = 20
    let cellSize : CGFloat = self.view.bounds.width / 3 - horizontalSpace
    return CGSize(width: cellSize, height: cellSize)
    }

Zu viewDidLoad hinzufügen

CellDetailPageViewController

    override func viewDidLoad() {
        super.viewDidLoad()

        let layout = UICollectionViewFlowLayout()
        layout.sectionInset = UIEdgeInsets(top: 15, left: 15, bottom: 15, right: 15)
        collectionView.collectionViewLayout = layout
    }

Das Ergebnis sieht so aus