自定义 Collection View 布局：一个简单的模板

引言

UICollectionView 是 iOS 开发的利器，可用于构建复杂的 UI，提供无与伦比的滚动、交互和布局支持，同时保持卓越的性能。实际上，应用程序中几乎每个页面都应或可以基于 UICollectionView，而不仅仅是 UITable…

理解 Collection View 布局

UICollectionView 布局是幕后功臣，负责安排集合视图中项目的位置和大小。苹果提供了多种内置布局，包括网格、列表和流布局，但你也可以创建自定义布局以满足特定需求。

创建自定义布局

创建自定义布局涉及三个步骤：

1. 创建 UICollectionViewLayout 子类 ：定义布局行为的逻辑。
2. 实现必要的方法 ：包括计算内容大小、准备布局、布局属性等。
3. 使用布局 ：通过将布局分配给集合视图来激活它。

一个简单的模板

以下是一个简单的自定义布局模板，可以作为一个起点：

import UIKit

class MyCustomLayout: UICollectionViewLayout {
    
    // 布局参数
    private var cellPadding: CGFloat = 10
    private var numberOfColumns: Int = 2
    
    // 覆盖方法
    override var collectionViewContentSize: CGSize {
        // 计算内容大小
        guard let collectionView = collectionView else { return .zero }
        let width = collectionView.bounds.width
        let height = CGFloat(collectionView.numberOfItems(inSection: 0)) / CGFloat(numberOfColumns) * (cellPadding + 100)
        return CGSize(width: width, height: height)
    }
    
    override func prepare() {
        // 预处理布局
        guard let collectionView = collectionView else { return }
        let itemWidth = (collectionView.bounds.width - cellPadding * CGFloat(numberOfColumns - 1)) / CGFloat(numberOfColumns)
        let itemHeight: CGFloat = 100
        
        var x: CGFloat = 0
        var y: CGFloat = 0
        var index = 0
        
        for item in collectionView.visibleItems() {
            let indexPath = item.indexPath
            
            // 计算项目的位置和大小
            x = CGFloat(index % numberOfColumns) * (itemWidth + cellPadding)
            y = CGFloat(index / numberOfColumns) * (itemHeight + cellPadding)
            
            let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)
            attributes.frame = CGRect(x: x, y: y, width: itemWidth, height: itemHeight)
            
            // 存储布局属性
            layoutAttributes[indexPath] = attributes
            
            index += 1
        }
    }
    
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        // 返回布局属性
        return layoutAttributes.values.filter { $0.frame.intersects(rect) }
    }
    
    // 其他方法...
}

使用自定义布局

要使用自定义布局，只需将其分配给集合视图：

let layout = MyCustomLayout()
collectionView.collectionViewLayout = layout

结论

自定义 Collection View 布局提供了灵活性和定制选项，使其能够创建独特而高效的 UI。通过理解布局的原理并使用简单的模板作为起点，你可以轻松扩展应用程序中的布局功能。