Swift4/Xcode9.2下如何为UICollectionView同分区设不同间距及自定义布局？

嘿，针对你在Swift 4和Xcode 9.2环境下的两个UICollectionView问题，我来给你详细解答：

一、同一分区内设置不同的 minimumInteritemSpacing #

默认情况下，UICollectionViewFlowLayout和代理方法collectionView(_:layout:minimumInteritemSpacingForSectionAt:)只能给整个分区设置统一的item间距。要实现同一分区内不同item间的间距差异，有两种靠谱的方法：

方法1：自定义 UICollectionViewFlowLayout 子类 #

通过重写layoutAttributesForElements(in:)方法，遍历每个item的布局属性，根据item的位置手动调整间距。这是最精准的方式。

示例代码：

class CustomSpacingFlowLayout: UICollectionViewFlowLayout {
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        guard let originalAttributes = super.layoutAttributesForElements(in: rect) else { return nil }
        
        // 复制一份属性数组，避免修改原数据
        let modifiedAttributes = originalAttributes.map { $0.copy() as! UICollectionViewLayoutAttributes }
        
        for index in 1..<modifiedAttributes.count {
            let currentAttr = modifiedAttributes[index]
            let previousAttr = modifiedAttributes[index - 1]
            
            // 这里可以根据item的index自定义间距规则
            // 比如：第2个item（index=1）和第1个的间距设为20，其他item间用默认的10
            let targetSpacing: CGFloat = (index == 1) ? 20 : self.minimumInteritemSpacing
            
            // 计算当前item应该的x坐标，确保间距符合要求
            let expectedX = previousAttr.frame.maxX + targetSpacing
            if currentAttr.frame.origin.x != expectedX {
                var adjustedFrame = currentAttr.frame
                adjustedFrame.origin.x = expectedX
                currentAttr.frame = adjustedFrame
            }
        }
        
        return modifiedAttributes
    }
}

使用时，直接用这个自定义布局初始化UICollectionView：

let layout = CustomSpacingFlowLayout()
layout.minimumInteritemSpacing = 10 // 设置基础间距
layout.minimumLineSpacing = 15
layout.sectionInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)

let collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: layout)
collectionView.delegate = self
collectionView.dataSource = self
// 注册cell等后续操作...

方法2：通过调整item宽度间接实现间距差异 #

如果你的item宽度可以灵活调整，也可以在sizeForItemAt代理方法中，通过缩小某些item的宽度，来间接放大相邻item的间距。这种方法适合不需要精确控制间距值的场景。

示例代码：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let totalAvailableWidth = collectionView.bounds.width - 20 // 减去左右内边距
    let defaultItemWidth = (totalAvailableWidth - 2*10)/3 // 3个item，默认间距10
    
    // 让第0和第1个item之间间距更大，所以缩小这两个item的宽度
    if indexPath.item == 0 || indexPath.item == 1 {
        return CGSize(width: defaultItemWidth - 5, height: 120)
    }
    return CGSize(width: defaultItemWidth, height: 120)
}

二、实现自定义UICollectionView布局 #

你提到要实现“如下布局”但没给出具体样式，我这里针对几种常见的特殊布局场景，给出对应的实现方案：

场景1：瀑布流布局（不等高item） #

瀑布流需要自定义布局，核心是动态计算每个item的位置，保持各列高度尽量平衡。

核心代码示例：

class WaterfallLayout: UICollectionViewLayout {
    var columnCount = 2 // 列数
    var cellPadding: CGFloat = 8 // item内边距
    
    private var layoutCache = [UICollectionViewLayoutAttributes]()
    private var contentHeight: CGFloat = 0
    private var contentWidth: CGFloat {
        guard let cv = collectionView else { return 0 }
        let insets = cv.contentInset
        return cv.bounds.width - (insets.left + insets.right)
    }
    
    override var collectionViewContentSize: CGSize {
        return CGSize(width: contentWidth, height: contentHeight)
    }
    
    override func prepare() {
        super.prepare()
        guard layoutCache.isEmpty, let cv = collectionView else { return }
        
        let columnWidth = (contentWidth - cellPadding * CGFloat(columnCount - 1)) / CGFloat(columnCount)
        var xOffsets = [CGFloat]()
        for column in 0..<columnCount {
            xOffsets.append(CGFloat(column) * (columnWidth + cellPadding))
        }
        var yOffsets = Array(repeating: 0, count: columnCount)
        
        for item in 0..<cv.numberOfItems(inSection: 0) {
            let indexPath = IndexPath(item: item, section: 0)
            
            // 这里建议从数据源获取真实的item高度，比如通过代理传递
            let itemHeight = CGFloat.random(in: 100...250) // 模拟随机高度
            let frame = CGRect(
                x: xOffsets[column],
                y: yOffsets[column],
                width: columnWidth,
                height: itemHeight
            )
            let insetFrame = frame.insetBy(dx: cellPadding/2, dy: cellPadding/2)
            
            let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)
            attributes.frame = insetFrame
            layoutCache.append(attributes)
            
            // 更新内容高度和列的y偏移
            contentHeight = max(contentHeight, frame.maxY)
            yOffsets[column] += itemHeight + cellPadding
            
            // 找到当前最矮的列，作为下一个item的列
            column = yOffsets.firstIndex(of: yOffsets.min()!)!
        }
    }
    
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        return layoutCache.filter { $0.frame.intersects(rect) }
    }
}

场景2：混合行列布局（比如首行2个item，后续每行3个） #

这种场景用UICollectionViewFlowLayout结合代理方法就能实现，不需要自定义布局。

示例代码：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let totalWidth = collectionView.bounds.width - 20 // 左右内边距各10
    if indexPath.item < 2 {
        // 首行2个item，间距10
        let itemWidth = (totalWidth - 10)/2
        return CGSize(width: itemWidth, height: 160)
    } else {
        // 后续每行3个item，间距10
        let itemWidth = (totalWidth - 2*10)/3
        return CGSize(width: itemWidth, height: 160)
    }
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return 15 // 行间距
}

场景3：特殊排列布局（比如环形、网格错位） #

这种需要完全自定义布局，在prepare()方法中计算每个item的位置。比如环形布局：

class CircularLayout: UICollectionViewLayout {
    private var layoutCache = [UICollectionViewLayoutAttributes]()
    private var centerPoint: CGPoint!
    private var circleRadius: CGFloat!
    
    override var collectionViewContentSize: CGSize {
        return collectionView!.bounds.size
    }
    
    override func prepare() {
        super.prepare()
        layoutCache.removeAll()
        
        guard let cv = collectionView else { return }
        centerPoint = CGPoint(x: cv.bounds.midX, y: cv.bounds.midY)
        circleRadius = min(cv.bounds.width, cv.bounds.height) / 3
        
        let itemCount = cv.numberOfItems(inSection: 0)
        for item in 0..<itemCount {
            let indexPath = IndexPath(item: item, section: 0)
            let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)
            
            // 计算每个item的角度
            let angle = 2 * CGFloat.pi * CGFloat(item) / CGFloat(itemCount)
            let x = centerPoint.x + circleRadius * cos(angle)
            let y = centerPoint.y + circleRadius * sin(angle)
            
            attributes.center = CGPoint(x: x, y: y)
            attributes.size = CGSize(width: 80, height: 80)
            layoutCache.append(attributes)
        }
    }
    
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        return layoutCache.filter { $0.frame.intersects(rect) }
    }
}

如果你的目标布局是其他样式，可以基于自定义布局的思路，在prepare()方法中计算每个item的frame即可。

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