如何用Swift 4实现类似Facebook图片上传的UICollectionView效果？

嘿，我来帮你搞定这个UICollectionView的布局问题！从你给出的代码来看，你已经找对了方向——用UICollectionViewFlowLayout实现3列正方形布局，但大概率是布局的间距参数和你计算item尺寸的逻辑不匹配，才导致效果和预期不一致。

问题分析 #

你的代码里计算item宽度用了(collectionView.bounds.width - 4) / 3.0，这里的4应该是预留的列间距总和，但如果FlowLayout的minimumInteritemSpacing（列间距）和minimumLineSpacing（行间距）没设置成对应的值，布局就会错位。

完整解决方案 #

1. 正确配置FlowLayout的间距参数

不管你是用代码创建布局，还是在Storyboard里配置，都要让间距和尺寸计算逻辑对应：

如果是代码初始化UICollectionView：

// 初始化FlowLayout并配置间距
let flowLayout = UICollectionViewFlowLayout()
let spacing: CGFloat = 2 // 单个间距值，3列的话有2个列间距，2*2=4，刚好匹配你代码里减的4
flowLayout.minimumInteritemSpacing = spacing
flowLayout.minimumLineSpacing = spacing // 行间距和列间距保持一致，让布局更整齐
flowLayout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0) // 如果需要左右/上下边距，这里可以调整

// 创建UICollectionView
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: flowLayout)
// 后续配置collectionView的代理、注册cell等...

如果是Storyboard里的UICollectionView：

• 选中CollectionView的FlowLayout
• 在Attributes Inspector里，把Min Spacing下的For Cells和For Lines都设置为2
• 调整Section Insets为你需要的值（默认是16，记得改成0或者和计算逻辑匹配的数值）

2. 优化item尺寸计算代码

把间距和列数抽成常量，代码更易维护，也避免计算错误：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let spacing: CGFloat = 2
    let itemsPerRow: CGFloat = 3
    // 总间距 = 间距值 * (列数 - 1)
    let totalSpacing = spacing * (itemsPerRow - 1)
    // 计算item宽度：(collectionView宽度 - 总间距) / 列数
    let itemWidth = (collectionView.bounds.width - totalSpacing) / itemsPerRow
    // 返回正方形尺寸
    return CGSize(width: itemWidth, height: itemWidth)
}

3. 确保布局在视图尺寸变化时刷新

有时候view刚加载时collectionView的bounds还没正确设置，导致尺寸计算错误，在viewDidLayoutSubviews里刷新布局：

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    // 让布局重新计算尺寸
    collectionView.collectionViewLayout.invalidateLayout()
}

额外检查点 #

• 确认你的UICollectionView的约束是正确的，比如宽度是否和父视图一致，有没有被其他视图挤压
• 如果你的布局需要设置section内边距，记得在计算item宽度时把内边距的左右总和也减去（比如sectionInset.left + sectionInset.right）

这样调整后，你的UICollectionView应该就能呈现出和预期完全一致的3列正方形布局啦！

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