8.1 实现自定义Header和Footer视图

在 UICollectionView 中，Header 和 Footer 视图是增强用户体验的重要组成部分。它们可以用来展示分区的标题、总结信息或者提供额外的操作入口。让我们一起探索如何创建和使用自定义的 Header 和 Footer 视图吧！🎉

注册 Header 和 Footer 视图

首先，你需要注册你的自定义 Header 或 Footer 视图。这可以通过 UICollectionView 的 register(_:forSupplementaryViewOfKind:withReuseIdentifier:) 方法来实现。你需要指定视图的类型（UICollectionReusableView 的子类）、视图的种类（UICollectionView.elementKindSectionHeader 或 UICollectionView.elementKindSectionFooter）以及重用标识符。

collectionView.register(MyHeaderView.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: "MyHeader")
collectionView.register(MyFooterView.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionFooter, withReuseIdentifier: "MyFooter")

实现 UICollectionViewDataSource 协议

接下来，在你的 UICollectionViewDataSource 协议实现中，你需要提供 Header 和 Footer 视图。这需要在 collectionView(_:viewForSupplementaryElementOfKind:at:) 方法中完成。

func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
    switch kind {
    case UICollectionView.elementKindSectionHeader:
        guard let headerView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "MyHeader", for: indexPath) as? MyHeaderView else {
            fatalError("Invalid view type")
        }
        headerView.titleLabel.text = "Section \(indexPath.section) Header"
        return headerView
    case UICollectionView.elementKindSectionFooter:
        guard let footerView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "MyFooter", for: indexPath) as? MyFooterView else {
            fatalError("Invalid view type")
        }
        footerView.summaryLabel.text = "Section \(indexPath.section) Footer"
        return footerView
    default:
        fatalError("Unexpected element kind")
    }
}

自定义 Header 和 Footer 视图类

创建一个继承自 UICollectionReusableView 的类，用于自定义 Header 和 Footer 视图。你可以在这个类中添加任何你需要的 UI 元素，例如 UILabel、UIImageView 等。

class MyHeaderView: UICollectionReusableView {
    let titleLabel: UILabel = {
        let label = UILabel()
        label.textColor = .black
        label.font = .boldSystemFont(ofSize: 18)
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .lightGray
        addSubview(titleLabel)

        NSLayoutConstraint.activate([
            titleLabel.centerXAnchor.constraint(equalTo: centerXAnchor),
            titleLabel.centerYAnchor.constraint(equalTo: centerYAnchor)
        ])
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

class MyFooterView: UICollectionReusableView {
    let summaryLabel: UILabel = {
        let label = UILabel()
        label.textColor = .darkGray
        label.font = .systemFont(ofSize: 14)
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .white
        addSubview(summaryLabel)

        NSLayoutConstraint.activate([
            summaryLabel.centerXAnchor.constraint(equalTo: centerXAnchor),
            summaryLabel.centerYAnchor.constraint(equalTo: centerYAnchor)
        ])
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

配置 Header 和 Footer 的大小

你需要通过 UICollectionViewDelegateFlowLayout 协议来配置 Header 和 Footer 的大小。实现 collectionView(_:layout:referenceSizeForHeaderInSection:) 和 collectionView(_:layout:referenceSizeForFooterInSection:) 方法。

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: 30)
}

通过以上步骤，你就可以在 UICollectionView 中成功实现自定义的 Header 和 Footer 视图啦！🎉 记住，灵活运用这些视图可以极大地提升你的应用的用户体验。