如何像UITableView的tableHeaderView一样在UICollectionView中添加tableHeaderView

在UICollectionView中添加类似UITableView的tableHeaderView，可以通过自定义UICollectionViewLayout来实现。以下是实现这一功能的基础概念、优势、类型、应用场景以及解决方案。

基础概念

UICollectionViewLayout是UICollectionView的布局对象，负责定义UICollectionView中每个cell的位置和大小。通过自定义UICollectionViewLayout，可以实现复杂的布局效果，包括添加header和footer。

优势

灵活性：自定义布局提供了更高的灵活性，可以实现复杂的UI设计。
复用性：自定义布局可以在多个UICollectionView中复用。
性能优化：通过自定义布局，可以更好地控制布局计算，优化性能。

类型

自定义UICollectionViewLayout：通过继承UICollectionViewLayout并重写相关方法来实现自定义布局。
使用第三方库：如Masonry、PureLayout等，可以简化布局代码。

应用场景

复杂UI设计：当UICollectionView需要展示复杂的布局时，如添加header和footer。
动态布局：当布局需要根据数据动态变化时。

解决方案

以下是一个简单的示例代码，展示如何在UICollectionView中添加类似UITableView的tableHeaderView。

自定义UICollectionViewLayout

import UIKit

class CustomCollectionViewLayout: UICollectionViewLayout {
    var headerSize: CGSize = CGSize(width: 0, height: 50)
    var itemSize: CGSize = CGSize(width: 100, height: 100)
    
    override func prepare() {
        super.prepare()
        // 初始化布局属性
    }
    
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        var layoutAttributes = [UICollectionViewLayoutAttributes]()
        
        let numberOfItems = collectionView?.numberOfItems(inSection: 0) ?? 0
        
        for item in 0..<numberOfItems {
            let indexPath = IndexPath(item: item, section: 0)
            if let attributes = layoutAttributesForItem(at: indexPath) {
                if attributes.frame.intersects(rect) {
                    layoutAttributes.append(attributes)
                }
            }
        }
        
        if rect.intersects(CGRect(x: 0, y: 0, width: collectionView!.bounds.width, height: headerSize.height)) {
            let headerIndexPath = IndexPath(item: 0, section: -1)
            if let headerAttributes = layoutAttributesForSupplementaryView(ofKind: UICollectionView.elementKindSectionHeader, at: headerIndexPath) {
                layoutAttributes.append(headerAttributes)
            }
        }
        
        return layoutAttributes
    }
    
    override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
        let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)
        attributes.frame = CGRect(x: (indexPath.item % 3) * itemSize.width, y: (indexPath.item / 3) * itemSize.height, width: itemSize.width, height: itemSize.height)
        return attributes
    }
    
    override func layoutAttributesForSupplementaryView(ofKind elementKind: String, at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
        if elementKind == UICollectionView.elementKindSectionHeader {
            let attributes = UICollectionViewLayoutAttributes(forSupplementaryViewOfKind: elementKind, with: indexPath)
            attributes.frame = CGRect(x: 0, y: 0, width: collectionView!.bounds.width, height: headerSize.height)
            return attributes
        }
        return nil
    }
    
    override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
        return !newBounds.size.equalTo(collectionView?.bounds.size ?? CGSize.zero)
    }
}

使用自定义布局

import UIKit

class ViewController: UIViewController, UICollectionViewDataSource {
    var collectionView: UICollectionView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let layout = CustomCollectionViewLayout()
        layout.headerSize = CGSize(width: view.bounds.width, height: 50)
        layout.itemSize = CGSize(width: 100, height: 100)
        
        collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: layout)
        collectionView.dataSource = self
        collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "cell")
        collectionView.register(UICollectionReusableView.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: "header")
        view.addSubview(collectionView)
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 9
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
        cell.backgroundColor = .blue
        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 = .red
            return header
        }
        return UICollectionReusableView()
    }
}