如何在Swift4中为所有设备实现CollectionView的三列布局

嘿，我来帮你搞定这个让所有设备的CollectionView都显示三列的需求！其实核心就是通过动态计算cell的尺寸来适配不同屏幕宽度，下面我来拆解实现思路和优化后的代码：

核心思路 #

我们需要借助UICollectionViewDelegateFlowLayout协议里的sizeForItemAt方法，根据当前设备的屏幕宽度（准确说是CollectionView的可用宽度）来计算每个cell的尺寸，确保一行刚好放下3个cell。

优化后的实现代码 #

原代码直接把CollectionView宽度除以3的思路是对的，但如果你的CollectionView设置了sectionInset或者minimumInteritemSpacing，直接除以3可能会导致cell换行或者间距异常。所以我们可以调整代码，把这些间距因素考虑进去：

// 记得先让你的ViewController遵循UICollectionViewDelegateFlowLayout协议
class YourViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
    
    @IBOutlet weak var collectionViewVideo: UICollectionView!
    
    // 这里可以定义你想要的间距，按需调整
    let interItemSpacing: CGFloat = 8
    let sectionInsets = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8)
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        if collectionView == collectionViewVideo {
            // 计算可用宽度：CollectionView宽度 - 左右内边距 - 列之间的间距（3列有2个间距）
            let availableWidth = collectionView.bounds.width - sectionInsets.left - sectionInsets.right - (interItemSpacing * 2)
            let cellWidth = availableWidth / 3
            // 这里可以根据需要设置cell高度，比如和宽度等比做成正方形，或者固定值
            let cellHeight = cellWidth 
            return CGSize(width: cellWidth, height: cellHeight)
        } else {
            return CGSize(width: 60, height: 60)
        }
    }
    
    // 配套设置间距的代理方法（按需启用）
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        if collectionView == collectionViewVideo {
            return interItemSpacing
        }
        return 0
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        if collectionView == collectionViewVideo {
            return sectionInsets
        }
        return .zero
    }
}

关键注意点 #

• 确保你的ViewController已经遵循了UICollectionViewDelegateFlowLayout协议，并且把CollectionView的delegate和dataSource都设置给当前控制器（可以在storyboard里拖线，或者在viewDidLoad里手动设置）。
• 如果不需要额外的间距，原代码的思路也可行，但要处理屏幕旋转场景：当设备旋转时，调用collectionViewVideo.collectionViewLayout.invalidateLayout()重新计算cell尺寸，保证布局适配新的屏幕宽度。

这样调整后，不管是小屏iPhone还是大屏iPad，你的CollectionView都能完美显示三列布局啦！

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