如何计算UICollectionView单元格尺寸实现多设备行列数量一致？代码排查

问题描述 #

希望让UICollectionView在不同设备的行列中显示相同数量的单元格，且单元格高度适配屏幕尺寸，但以下代码运行结果不符合预期：

override func viewDidLoad() {
    super.viewDidLoad()
    
    let homeFlowLayout = UICollectionViewFlowLayout()
    let itemsPerRow: CGFloat = 2
    let itemsPerColumn: CGFloat = 2
    let window =  UIApplication.shared.connectedScenes.first as? UIWindowScene
    let tabBarHeight = window?.windows.first?.safeAreaInsets.bottom ?? 0

    let availableWidth = UIScreen.main.bounds.width
    let width = availableWidth / itemsPerRow
    
    let availableHeight = UIScreen.main.bounds.height  - tabBarHeight
    let height = availableHeight / itemsPerColumn
    
    homeFlowLayout.itemSize = CGSize(width: width, height: height)
    homeFlowLayout.minimumLineSpacing = 10
    homeFlowLayout.scrollDirection = .vertical
    collectionView.setCollectionViewLayout(homeFlowLayout, animated: false)
}

错误原因分析 #

1. 未考虑间距与内边距：计算单元格宽度时，没有减去minimumLineSpacing和collectionView的sectionInset，导致单元格总宽度超出屏幕或间距挤压单元格。
2. 错误使用屏幕高度计算：直接用屏幕高度减tabBar高度作为可用高度，忽略了顶部状态栏、导航栏的高度，以及collectionView自身的内边距和布局偏移，导致高度计算偏差。
3. 固定itemSize时机不对：viewDidLoad时collectionView的最终frame尚未确定（自动布局未完成），此时设置的itemSize无法适配实际的collectionView尺寸。

修正方案 #

推荐实现UICollectionViewDelegateFlowLayout协议的sizeForItemAt方法，动态计算单元格尺寸，同时覆盖所有布局因素：

步骤1：配置基础布局并设置代理 #

在viewDidLoad中只配置布局的基础属性，不固定itemSize，同时将collectionView的delegate绑定到当前控制器：

override func viewDidLoad() {
    super.viewDidLoad()
    
    let homeFlowLayout = UICollectionViewFlowLayout()
    homeFlowLayout.minimumLineSpacing = 10
    homeFlowLayout.minimumInteritemSpacing = 10 // 列间距，可按需调整
    homeFlowLayout.sectionInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10) // 内边距，可按需调整
    homeFlowLayout.scrollDirection = .vertical
    collectionView.setCollectionViewLayout(homeFlowLayout, animated: false)
    collectionView.delegate = self
}

步骤2：实现动态尺寸计算方法 #

扩展当前控制器，实现UICollectionViewDelegateFlowLayout协议：

extension YourViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let itemsPerRow: CGFloat = 2
        let itemsPerColumn: CGFloat = 2
        
        guard let flowLayout = collectionViewLayout as? UICollectionViewFlowLayout else {
            return CGSize.zero
        }
        
        // 计算可用宽度：collectionView宽度 - 左右内边距 - 列间距总和
        let totalInteritemSpacing = flowLayout.minimumInteritemSpacing * (itemsPerRow - 1)
        let totalHorizontalInsets = flowLayout.sectionInset.left + flowLayout.sectionInset.right
        let availableWidth = collectionView.bounds.width - totalHorizontalInsets - totalInteritemSpacing
        let itemWidth = availableWidth / itemsPerRow
        
        // 计算可用高度：collectionView高度 - 上下内边距 - 行间距总和
        let totalLineSpacing = flowLayout.minimumLineSpacing * (itemsPerColumn - 1)
        let totalVerticalInsets = flowLayout.sectionInset.top + flowLayout.sectionInset.bottom
        let availableHeight = collectionView.bounds.height - totalVerticalInsets - totalLineSpacing
        let itemHeight = availableHeight / itemsPerColumn
        
        return CGSize(width: itemWidth, height: itemHeight)
    }
}

额外优化：支持屏幕旋转 #

如果需要适配屏幕旋转，在viewWillLayoutSubviews中触发布局重计算：

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()
    collectionView.collectionViewLayout.invalidateLayout()
}

内容的提问来源于stack exchange，提问作者Novice