CollectionView

2025年3月17日 | 阅读 8 分钟

CollectionView 是一个对象，它以可定制的布局呈现数据的有序集合。它以网格布局的形式显示数据。 CollectionView 是 UICollectionView 类的一个实例，它继承自 UIScrollView，这将在本教程后面介绍。

当我们将 collectionview 添加到应用程序界面时，iOS 应用程序负责管理与 collectionview 相关联的数据。 CollectionView 对象的工作方式类似于 tableview，因为它从 DataSource 对象获取数据，DataSource 对象符合 UICollectionViewDataSource 协议。

与集合视图相关联的数据被视为可以分组到部分中的单个项目，以便在 iPhone 屏幕上表示为网格布局。 UICollectionView 用于大多数 iOS 应用程序，在这些应用程序中，我们希望数据可以水平滚动。

例如，在像 Flipkart 这样的电子商务应用程序中，产品是使用 UICollectionVIew 显示的。可以使用 collecitionview 开发的最基本的 UI 是计算器，其中单个按钮被视为可以使用 UICollectionViewDelegate 和 UICollectionViewDataSource 协议中定义的委托和 DataSource 方法管理的单个 collectionview 项目。

UICollectionView 在屏幕上呈现数据，如下图所示。

将 CollectionView 添加到界面生成器

1. 在对象库中搜索 CollectionView，并将结果拖到情节提要中。

2. 在 ViewController 中创建 collectionview 的连接出口。

3. 在 ViewController 中实现 UICollectionViewDataSource 和 UICollectionViewDelegate 协议，并将委托和数据源对象分配给 self。

collectionView.delegate = self
collectionView.dataSource = self

4. 定义用于绘制集合视图布局的集合视图的委托和数据源方法。

UICollectionViewCell

它类似于 tableview 中的 UITableViewCell。 CollectionView 以有序的项目集合的形式呈现数据。项目是可以使用 UICollectionView 对象呈现的最小数据单位。 CollectionView 使用单元格呈现项目，单元格是 UICollectionViewCell 的实例。数据源方法使用可重用标识符配置 UICollectionView 单元格。单元格使用 CollectionViewCell 进行配置，如下所示。

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! MyCollectionviewCell
        cell.myView.backgroundColor = itemArr[indexPath.row]
        return cell
    }

补充视图

CollectionView 也可以使用补充视图呈现数据。补充视图是使用 UICollectionViewDelegate 方法配置的节标题和页脚。对补充视图的支持可以由集合视图布局对象定义。集合视图布局对象还定义了这些视图的位置。

CollectionView 委托方法

CollectionView 委托方法处理 collectionview 中项目的选择、取消选择、突出显示。此协议的所有方法都是可选的。下表包含最常用的 CollectionView 委托方法。

序号	方法	描述
1	func collectionView(UICollectionView, shouldSelectItemAt: IndexPath) -> Bool	此方法要求委托选择 indexpath 处的项目。
2	func collectionView(UICollectionView, didSelectItemAt: IndexPath)	此方法告诉委托选择 indexpath 处的项目。当选择 collectionview 中 indexpath 处的项目时，将执行此方法。
3	func collectionView(UICollectionView, shouldDeselectItemAt: IndexPath) -> Bool	此方法要求委托取消选择 indexpath 处的项目。
4	func collectionView(UICollectionView, didDeselectItemAt: IndexPath)	当取消选择 collectionview 中 indexpath 处的项目时，将执行此方法。
5	func collectionView(UICollectionView, shouldBeginMultipleSelectionInteractionAt: IndexPath) -> Bool	它询问委托是否可以使用集合视图中的双指平移手势选择多个项目。
6	func collectionView(UICollectionView, didBeginMultipleSelectionInteractionAt: IndexPath)	当使用双指平移手势选择多个项目时，将执行此方法。
7	func collectionView(UICollectionView, shouldHighlightItemAt: IndexPath) -> Bool	它询问委托是否在跟踪期间突出显示项目。
8	func collectionView(UICollectionView, didHighlightItemAt: IndexPath)	当在某个 indexpath 处的 collectionview 中突出显示项目时，将执行此方法。

CollectionView 数据源方法

CollectionView 数据源采用 UICollectionViewDatasource 协议。集合视图数据源对象负责提供集合视图所需的数据。它就像集合视图应用程序的数据模型。它将要显示的数据传递给集合视图。

下表包含 UICollectionViewDataSource 协议中声明的方法。

序号	方法	描述
1	func collectionView(UICollectionView, numberOfItemsInSection: Int) -> Int	此方法返回一个整数，表示要在 collectionview 中显示的 section 中的项目数。它是与 collectionview 关联的数据数组的计数。
2	func numberOfSections(in: UICollectionView) -> Int	此方法返回一个整数，表示要在 collectionview 中显示的 section 数。
3	func collectionView(UICollectionView, cellForItemAt: IndexPath) -> UICollectionViewCell	此方法返回 UICollectionViewCell 的实例，该实例配置为显示实际内容。如果视图控制器符合 UICollectionViewDataSource 协议，则此方法不是可选的，需要定义。
4	func collectionView(UICollectionView, viewForSupplementaryElementOfKind: String, at: IndexPath) -> UICollectionReusableView	此方法要求数据源对象提供一个要在集合视图中显示的补充视图。
5	func collectionView(UICollectionView, canMoveItemAt: IndexPath) -> Bool	它询问数据源对象是否可以将指定的项目移动到 collectionview 中的另一个位置。
6	func collectionView(UICollectionView, moveItemAt: IndexPath, to: IndexPath)	此方法将指定的项目移动到指定的 indexpath。
7	func indexTitles(for: UICollectionView) -> [String]?	此方法返回一个字符串数组，其中包含索引的标题。
8	func collectionView(UICollectionView, indexPathForIndexTitle: String, at: Int) -> IndexPath	它要求数据源对象返回与其中一个索引条目对应的集合视图项目的索引路径。

示例 1

在此示例中，我们将使用集合视图在屏幕上呈现项目网格。

界面生成器 (main.storyboard)

要将 collectionview 添加到项目的情节提要中，请在对象库中搜索 collectionview，并将结果拖到界面生成器中。这会将 collectionview 添加到界面。现在，为集合视图定义自动布局规则，以控制其在不同屏幕设备上的大小和位置。 CollectionView 的实际内容由 collectionview 单元格显示。我们必须在 Xcode 的属性检查器中为单元格定义属性。在此示例中，我们将标签添加到 collectionview 单元格，并在单元格对象上的数据源方法中设置标签的文本。

分配给 collectionview 单元格的属性如下图所示。

分配给集合视图的属性如下图所示。

为项目创建的界面生成器如下所示。

ViewController.swift

import UIKit

class ViewController: UIViewController {


    @IBOutlet weak var collectionView: UICollectionView!
    
    var itemArr = Array<String>()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        collectionView.delegate = self
        collectionView.dataSource = self
        for i in 1...60{
            itemArr.append(i.description)
        }
    }
}


extension ViewController : UICollectionViewDelegate{
    
}


extension ViewController : UICollectionViewDataSource{
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return itemArr.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! MyCollectionViewCell
        
        cell.myLbl.text = itemArr[indexPath.item]
        cell.myLbl.layer.borderColor = UIColor.blue.cgColor
        cell.myLbl.textAlignment = .center
        cell.myLbl.layer.cornerRadius = 10
        cell.myLbl.layer.borderWidth = 2
        
        return cell
    }
}

MyCollectionViewCell.swift

import UIKit

class MyCollectionViewCell: UICollectionViewCell {
    
    @IBOutlet weak var myLbl: UILabel!
    
}

输出

CollectionView 演示项目

此项目展示了 collection view 如何在 iOS 应用程序中使用。此应用程序模拟了一个电子商务应用程序，该应用程序在视图控制器场景中显示多个产品。单击产品会将我们导航到另一个屏幕，该屏幕显示特定产品的详细视图。

在此应用程序中，我们将使用两个视图控制器，并将视图控制器嵌入到导航控制器中，该导航控制器提供通过视图控制器的导航。我们建议您掌握导航控制器的基本知识，本教程中将介绍这些知识。

界面生成器 (main.storyboard)

我们将在此项目中使用 collectionview 在应用程序中显示类似网格的场景。要添加集合视图，请在对象库中搜索它，并将结果拖到情节提要中。

配置单元格

现在，我们需要配置原型单元格，该单元格将在屏幕上显示实际项目。原型单元格将包含图像视图以显示产品图像，以及标签以显示图像的名称。将 imageview 和标签添加到 collectionview 单元格，并将类 DemoCollectionViewCell.swift 分配给单元格，以分别创建 imageview 和标签的连接出口。

添加导航控制器

要将 ViewController 嵌入到导航控制器，我们将选择视图控制器，然后单击编辑器，并选择 嵌入到 选项，如下图所示。

当我们将 View Controller 嵌入到导航控制器时，默认情况下所有视图控制器上都会显示一个导航栏。我们可以设置导航栏的标题。当我们在本教程中讨论导航界面时，我们将更多地了解导航控制器。下图显示了导航控制器以及我们已将导航栏标题设置为“产品”的视图控制器。

添加 ImageDetailViewController

对于界面生成器，我们需要一个 ViewController，它可以显示有关产品的详细信息。为此，我们将 ViewController 添加到界面生成器，并将类 ImageDetailViewController 分配给此 ViewController。

对于 imageDetailViewController，我们将 ImageView 和标签添加到 ViewController。我们还将此视图控制器嵌入到我们的导航控制器中，并将导航栏标题设置为“产品详细信息”。

当在 CollectionView 中选择一个项目时，将显示 ImageDetailViewController。我们将在 collectionview 的数据源方法中编写以下代码以导航到此视图控制器。

let imageDetailVC = self.storyboard?.instantiateViewController(withIdentifier: "ImageDetailViewController") as! ImageDetailViewController
        
        imageDetailVC.img = imgArr[indexPath.row]
        imageDetailVC.name = lblArr[indexPath.row]
        self.navigationController?.pushViewController(imageDetailVC, animated: true)

当导航控制器推送到情节提要中的某个视图控制器时，该视图控制器上会启用一个后退按钮，该按钮向后导航到情节提要。

演示项目中内置的界面生成器如下图所示。

ViewController.swift

import UIKit


class ViewController: UIViewController {


    var imgArr = Array<UIImage>()
    var lblArr = Array<String>()
    
    
    @IBOutlet weak var collectionView: UICollectionView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        collectionView.delegate = self
        collectionView.dataSource = self
        for i in 1...10{
            lblArr.append("Watch"+i.description)
        }
        imgArr = [ imageLiteral(resourceName: "watch1"), imageLiteral(resourceName: "watch1"), imageLiteral(resourceName: "watch1"), imageLiteral(resourceName: "watch1"), imageLiteral(resourceName: "watch1"), imageLiteral(resourceName: "watch1"), imageLiteral(resourceName: "watch1"), imageLiteral(resourceName: "watch1"), imageLiteral(resourceName: "watch1"), imageLiteral(resourceName: "watch1")]
    }
    
}


extension ViewController:UICollectionViewDataSource{
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return lblArr.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! DemoCollectionViewCell
        cell.productImage.image = imgArr[indexPath.row]
        cell.productName.text = lblArr[indexPath.row]
        return cell
    }
    
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        let imageDetailVC = self.storyboard?.instantiateViewController(withIdentifier: "ImageDetailViewController") as! ImageDetailViewController
        
        imageDetailVC.img = imgArr[indexPath.row]
        imageDetailVC.name = lblArr[indexPath.row]
        self.navigationController?.pushViewController(imageDetailVC, animated: true)
    }
}


extension ViewController:UICollectionViewDelegate{
    
}

ImageDetailViewController

import UIKit


class ImageDetailViewController: UIViewController {
    
    @IBOutlet weak var productImage: UIImageView!
    
    @IBOutlet weak var productName: UILabel!
    
    var img:UIImage!
    var name:String!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Do any additional setup after loading the view.
        productName.text = name
        productImage.image = img
    }
}

DemoCollectionViewCell.swift

import UIKit

class DemoCollectionViewCell: UICollectionViewCell {
    
    @IBOutlet weak var productImage: UIImageView!
    
    @IBOutlet weak var productName: UILabel!
}

输出