集合视图的基本 Swift 示例

Created: November-22, 2018

创建一个新项目

它可以只是一个单一视图应用程序。

添加代码

创建一个新的 Cocoa Touch 类文件（文件>新建>文件…> iOS> Cocoa Touch 类）。把它命名为 MyCollectionViewCell。此类将保留你在故事板中添加到单元格的视图的出口。

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

我们稍后会连接这个插座。

打开 ViewController.swift 并确保你拥有以下内容：

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, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        
        // get a reference to our storyboard cell
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: 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.yellowColor() // make cell more visible in our example project
        
        return cell
    }
    
    // MARK: - UICollectionViewDelegate protocol
    
    func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
        // handle tap events
        print("You selected cell #\(indexPath.item)!")
    }
}

笔记

UICollectionViewDataSource 和 UICollectionViewDelegate 是集合视图遵循的协议。你还可以添加 UICollectionViewDelegateFlowLayout 协议以编程方式更改视图的大小，但这不是必需的。
我们只是在网格中添加简单的字符串，但你可以稍后进行图像处理。

设置故事板

将集合视图拖到故事板中的视图控制器。你可以添加约束以使其填充父视图（如果你愿意）。

StackOverflow 文档

确保属性检查器中的默认值也是

项目：1
布局：流程

Collection View 左上角的小方框是 Collection View Cell。我们将它用作我们的原型单元。将标签拖到单元格中并使其居中。你可以调整单元格边框的大小，并根据需要添加约束以使 Label 居中。

StackOverflow 文档

在集合视图单元的属性检查器的标识符框中写入单元格（不带引号）。请注意，这与 ViewController.swift 中的 let reuseIdentifier = "cell" 值相同。

StackOverflow 文档

在单元格的 Identity Inspector 中，将类名设置为 MyCollectionViewCell，即我们制作的自定义类。

StackOverflow 文档

连接插座

将收集单元格中的标签挂钩到 MyCollectionViewCell 类中的 myLabel。（你可以控制 - 拖动。）
将集合视图 delegate 和 dataSource 挂钩到 View Controller。（右键单击文档大纲中的集合视图。然后单击并将加号向下拖动到视图控制器。）

StackOverflow 文档