深入探索 UICollectionView 中的 SupplementaryView 和 DecorationView

2023-12-05 04:21:48

探索 UICollectionView 中的 SupplementaryView 和 DecorationView

大家早上好，又到了每周和大家分享开发心得的时间啦！上周我分享了一篇关于 UICollectionView 自定义布局实现 Cover Flow 的文章（文章直通车），这也是我分享的关于 UICollectionView 系列的第四篇文章了，那今天我还是继续给大家带来 UICollectionView 的干货，希望对大家有所帮助。

在之前的文章中，我们主要讲解了 UICollectionView 的一些基础知识和自定义布局，今天我们来聊聊 UICollectionView 中的 SupplementaryView 和 DecorationView。

SupplementaryView

SupplementaryView 是 UICollectionView 中的一种特殊视图，它可以用来为集合视图添加一些额外的信息或装饰。SupplementaryView 可以放在集合视图的头部、尾部或组的头部、尾部。

创建 SupplementaryView 的方法和创建普通 cell 的方法类似，只需实现以下方法即可：

func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView

其中，kind 参数表示 SupplementaryView 的类型，可以是 UICollectionView.elementKindSectionHeader、UICollectionView.elementKindSectionFooter、UICollectionView.elementKindSectionHeader 或 UICollectionView.elementKindSectionFooter。

DecorationView

DecorationView 也是 UICollectionView 中的一种特殊视图，它可以用来为集合视图添加一些额外的装饰。DecorationView 与 SupplementaryView 的区别在于，DecorationView 是绘制在集合视图上的，而 SupplementaryView 是添加到集合视图中的。

创建 DecorationView 的方法是实现以下方法：

func collectionView(_ collectionView: UICollectionView, willDisplaySupplementaryView view: UICollectionReusableView, forElementKind elementKind: String, at indexPath: IndexPath)

实例

下面是一个使用 SupplementaryView 和 DecorationView 的示例：

import UIKit

class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {

    private let collectionView: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .vertical
        let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
        collectionView.backgroundColor = .white
        collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "cell")
        collectionView.register(UICollectionReusableView.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: "header")
        collectionView.register(UICollectionReusableView.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionFooter, withReuseIdentifier: "footer")
        return collectionView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(collectionView)
        collectionView.frame = view.bounds
        collectionView.dataSource = self
        collectionView.delegate = self
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10
    }

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

    func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
        if kind == UICollectionView.elementKindSectionHeader {
            let header = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "header", for: indexPath)
            header.backgroundColor = .blue
            return header
        } else {
            let footer = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "footer", for: indexPath)
            footer.backgroundColor = .green
            return footer
        }
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: 100, height: 100)
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
        return CGSize(width: collectionView.frame.width, height: 50)
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize {
        return CGSize(width: collectionView.frame.width, height: 50)
    }
}