UICollectionView流式布局：单元格顶部对齐及首行单元格数量问题

我来帮你搞定这两个UICollectionView Flow Layout的常见问题，都是我之前踩过的坑，给你详细说下解决方案：

默认的UICollectionViewFlowLayout会让每行的单元格垂直居中对齐，要实现顶部对齐，我们需要自定义一个Flow Layout子类，通过重写布局属性调整单元格的位置：

class TopAlignedFlowLayout: UICollectionViewFlowLayout {
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        guard let originalAttributes = super.layoutAttributesForElements(in: rect) else { return nil }
        
        // 按行分组单元格，记录每行的起始Y坐标
        var rowGroups: [[UICollectionViewLayoutAttributes]] = []
        var currentRowY: CGFloat = -1
        
        for attribute in originalAttributes {
            // 只处理单元格元素，忽略header/footer等
            guard attribute.representedElementCategory == .cell else { continue }
            
            if attribute.frame.origin.y != currentRowY {
                currentRowY = attribute.frame.origin.y
                rowGroups.append([])
            }
            rowGroups.last?.append(attribute)
        }
        
        // 调整每行单元格的Y坐标，让它们顶部对齐
        for row in rowGroups {
            // 获取当前行的最大单元格高度
            guard let maxRowHeight = row.max(by: { $0.frame.height < $1.frame.height })?.frame.height else { continue }
            
            for cellAttribute in row {
                // 计算需要向上偏移的距离，把单元格顶到行的顶部
                let offsetY = maxRowHeight - cellAttribute.frame.height
                cellAttribute.frame = CGRect(
                    x: cellAttribute.frame.origin.x,
                    y: cellAttribute.frame.origin.y + offsetY,
                    width: cellAttribute.frame.width,
                    height: cellAttribute.frame.height
                )
                // 同步更新center属性，避免布局异常
                cellAttribute.center = CGPoint(
                    x: cellAttribute.center.x,
                    y: cellAttribute.frame.origin.y + cellAttribute.frame.height / 2
                )
            }
        }
        
        return originalAttributes
    }
}

使用的时候，直接把CollectionView的布局替换成这个子类即可：

let topAlignedLayout = TopAlignedFlowLayout()
topAlignedLayout.minimumInteritemSpacing = 12
topAlignedLayout.minimumLineSpacing = 12
collectionView.collectionViewLayout = topAlignedLayout

这个问题大概率是首个单元格的宽度计算错误，或者布局参数冲突导致首行放不下第二个单元格，给你几个排查和解决的步骤：

• 精准计算首个单元格的宽度
  要在首行放下2个单元格，首个单元格的宽度必须满足：单元格宽度 + 第二个单元格宽度 + 间距 + 内边距 ≤ CollectionView宽度。推荐用动态计算的方式确保宽度正确：

  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
      let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout
      let totalWidth = collectionView.bounds.width
      // 计算可用宽度：总宽度 - 左右内边距 - 单元格间距
      let availableWidth = totalWidth - flowLayout.sectionInset.left - flowLayout.sectionInset.right - flowLayout.minimumInteritemSpacing
      // 每个单元格占一半宽度
      let itemWidth = availableWidth / 2
      
      if indexPath.item == 0 {
          // 首个单元格宽度和其他一致，仅修改高度
          return CGSize(width: itemWidth, height: 160)
      } else {
          return CGSize(width: itemWidth, height: 120)
      }
  }
  

• 关闭自动估算尺寸（如果开启了）
  如果你设置了flowLayout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize，可能会导致布局计算偏差，尤其是首个单元格尺寸特殊的场景，建议关闭：

  flowLayout.estimatedItemSize = .zero
  

• 检查布局参数冲突
  确认sectionInset和minimumInteritemSpacing的取值没有占用过多宽度，比如如果左右内边距加起来超过了CollectionView宽度的一半，那肯定放不下两个单元格。

如果以上方法都没用，可以检查下CollectionView的自动布局约束，确保它的宽度是固定的，没有因为约束问题导致实际宽度变小。

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