Swift4下CollectionView两列布局全iOS设备适配问题求助

嘿，我来帮你解决这个布局适配的问题！你之前的代码只在iPhone 5s正常，核心原因是直接依赖collectionView.frame.size一次性计算item尺寸——这个值在viewDidLoad时可能还没拿到最终屏幕尺寸，而且设备旋转、换不同型号iPhone时也不会自动更新，硬编码的间距计算也不够严谨。下面给你两种靠谱的解决方案：

方案一：用UICollectionViewDelegateFlowLayout动态计算尺寸 #

这是兼容性最好的方式，通过代理方法实时返回item尺寸，能自动适配所有设备和布局变化：

1. 先让你的视图控制器遵守UICollectionViewDelegateFlowLayout协议：

class YourViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    // ... 你的其他代码
}

2. 实现sizeForItemAt方法，精准计算item尺寸：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let interitemSpacing: CGFloat = 4
    let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout
    // 计算可用宽度：collectionView宽度 - 左右内边距 - 列间间距（两列仅1个间距）
    let availableWidth = collectionView.bounds.width - flowLayout.sectionInset.left - flowLayout.sectionInset.right - interitemSpacing
    let itemWidth = availableWidth / 2
    // 高度保持你需求的比例：collectionView高度的1/3
    let itemHeight = collectionView.bounds.height / 3
    return CGSize(width: itemWidth, height: itemHeight)
}

3. 在viewDidLoad里设置基础布局参数（不用再手动设置itemSize）：

override func viewDidLoad() {
    super.viewDidLoad()
    let layout = collectionView.collectionViewLayout as! UICollectionViewFlowLayout
    layout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    layout.minimumInteritemSpacing = 4
    // 记得绑定代理
    collectionView.delegate = self
    collectionView.dataSource = self
}

4. 如果需要支持屏幕旋转，在旋转后刷新布局：

override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
    super.viewWillTransition(to: size, with: coordinator)
    coordinator.animate(alongsideTransition: { _ in
        self.collectionView.collectionViewLayout.invalidateLayout()
    })
}

方案二：用UICollectionViewCompositionalLayout（iOS13+） #

如果你只需要适配iOS13及以上系统，Compositional Layout是更现代、灵活的选择，代码逻辑更清晰：

override func viewDidLoad() {
    super.viewDidLoad()
    // 创建单item布局（占组宽度的1/2）
    let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.5), heightDimension: .fractionalHeight(1))
    let item = NSCollectionLayoutItem(layoutSize: itemSize)
    // 设置item右侧间距
    item.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 4)
    
    // 创建横向组（占collectionView宽度的100%，高度为其1/3）
    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .fractionalHeight(1/3))
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
    // 抵消最后一个item的右侧间距，避免整体布局偏左
    group.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 0, trailing: -4)
    
    let section = NSCollectionLayoutSection(group: group)
    section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0)
    
    let layout = UICollectionViewCompositionalLayout(section: section)
    collectionView.collectionViewLayout = layout
}

为什么原来的代码会失效？ #

• collectionView.frame在viewDidLoad阶段可能还没有拿到最终的屏幕尺寸（尤其是存在导航栏、TabBar的场景），导致计算出的item尺寸错误。
• 当设备旋转或在不同尺寸的iPhone上运行时，你初始化时设置的itemSize不会自动更新，自然就会布局错乱。

用上面的方案，不管是哪种iPhone型号，还是屏幕旋转，都能稳定保持两列的正确布局啦！

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