如何让UICollectionView在所有设备上保持一致的2列布局

问题根源 #

• 未定义核心变量itemsPerRow：你在计算cell宽度的sizeForItemAt方法中使用了itemsPerRow，但从未声明并赋值为2，导致计算逻辑失效，最终只能显示单列。
• insetForSectionAt方法缺少返回语句：该方法仅引用了sectionInsets但未通过return返回，会导致布局边距不生效，进一步干扰列数计算逻辑。

修复后的完整代码 #

class DemoViewController: UIViewController {
    @IBOutlet weak var collectionView: UICollectionView!
    private let sectionInsets = UIEdgeInsets(top: 50.0, left: 20.0, bottom: 50.0, right: 20.0)
    // 新增：明确声明每行显示2列
    private let itemsPerRow: CGFloat = 2
    
    override func viewDidLoad() {
        super.viewDidLoad()
        collectionView.dataSource = self
        collectionView.delegate = self
    }
}

extension DemoViewController: UICollectionViewDataSource, UICollectionViewDelegateFlowLayout, UICollectionViewDelegate {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        if let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "DemoCollectionViewCell", for: indexPath) as? DemoCollectionViewCell {
            cell.backgroundColor = .cyan
            return cell
        } else {
            return UICollectionViewCell()
        }
    }
  
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let paddingSpace = sectionInsets.left * (itemsPerRow + 1)
        let availableWidth = collectionView.frame.width - paddingSpace
        let widthPerItem = availableWidth / itemsPerRow
        
        return CGSize(width: widthPerItem, height: widthPerItem)
    }
  
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        // 修复：添加return语句返回边距配置
        return sectionInsets
    }
  
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return sectionInsets.left
    }
}

额外注意事项 #

• 检查DemoCollectionViewCell的约束：不要给cell或内部的ImageView设置固定宽度（比如100），否则会覆盖通过sizeForItemAt计算的自适应宽度，导致布局不符合预期。
• 适配视图尺寸变化：如果collectionView用Auto Layout约束添加到父视图，建议添加以下代码，确保设备旋转或视图尺寸变化时布局自动更新：

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

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