Swift 3中UICollectionView如何设置Item间的最大间距？

嘿，这个场景我太熟悉了！默认的UICollectionViewFlowLayout确实只提供了最小间距的配置，当屏幕宽度变大时，系统会把多余的空间自动分给item之间的空隙，导致间距超出预期。要控制最大间距，我们得自己做些调整，这里有两个实用的方案：

方案一：自定义FlowLayout，强制限制最大间距 #

通过重写UICollectionViewFlowLayout的layoutAttributesForElements(in:)方法，我们可以手动调整每个item的位置，确保它们之间的间距不会超过设定的最大值。

代码示例 #

class MaxSpacingFlowLayout: UICollectionViewFlowLayout {
    // 可配置的最大item间距
    var maxInteritemSpacing: CGFloat = 12
    
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        guard let originalAttributes = super.layoutAttributesForElements(in: rect) else {
            return nil
        }
        
        var previousCellAttr: UICollectionViewLayoutAttributes?
        for attr in originalAttributes {
            // 只处理cell的布局属性
            guard attr.representedElementCategory == .cell else {
                continue
            }
            
            if let prevAttr = previousCellAttr {
                let currentSpacing = attr.frame.minX - prevAttr.frame.maxX
                // 如果当前间距超过最大值，调整当前item的位置
                if currentSpacing > maxInteritemSpacing {
                    var adjustedFrame = attr.frame
                    adjustedFrame.origin.x = prevAttr.frame.maxX + maxInteritemSpacing
                    attr.frame = adjustedFrame
                }
            }
            previousCellAttr = attr
        }
        
        return originalAttributes
    }
}

使用方式 #

把你的collectionView的布局替换成这个自定义类，然后设置maxInteritemSpacing即可：

let layout = MaxSpacingFlowLayout()
layout.maxInteritemSpacing = 12
layout.itemSize = CGSize(width: 100, height: 100)
collectionView.collectionViewLayout = layout

方案二：手动计算Item尺寸与Section内边距 #

如果你的item尺寸是固定的，可以通过计算每行能容纳的item数量，再分配剩余空间到section的左右内边距，让item之间的间距刚好等于最大间距，避免系统自动放大间距。

代码示例 #

func configureCollectionViewLayout() {
    let flowLayout = UICollectionViewFlowLayout()
    let targetMaxSpacing: CGFloat = 12
    let fixedItemWidth: CGFloat = 100
    let collectionViewWidth = collectionView.bounds.width
    
    // 这里的numberOfItemsPerRow需要根据屏幕尺寸动态计算
    let numberOfItemsPerRow: Int = UIScreen.main.bounds.width > 375 ? 4 : 3
    let totalSpacingPerRow = targetMaxSpacing * CGFloat(numberOfItemsPerRow - 1)
    let totalItemWidth = fixedItemWidth * CGFloat(numberOfItemsPerRow)
    let availableWidth = collectionViewWidth - flowLayout.sectionInset.left - flowLayout.sectionInset.right
    
    // 计算剩余空间，平均分配到左右内边距
    let extraSpace = availableWidth - totalItemWidth - totalSpacingPerRow
    let adjustedInset = extraSpace / 2
    
    flowLayout.sectionInset = UIEdgeInsets(
        top: flowLayout.sectionInset.top,
        left: adjustedInset,
        bottom: flowLayout.sectionInset.bottom,
        right: adjustedInset
    )
    flowLayout.itemSize = CGSize(width: fixedItemWidth, height: fixedItemWidth)
    flowLayout.minimumInteritemSpacing = targetMaxSpacing
    
    collectionView.collectionViewLayout = flowLayout
}

两种方案各有优劣：方案一更灵活，适合item尺寸动态变化的场景；方案二更简单直接，适合固定尺寸的item布局。你可以根据自己的需求选择~

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