Swift 3：实现Collection View中指定集合元素强制换行

这个需求我之前做项目时也碰到过，用UICollectionViewCompositionalLayout来实现是最优雅的——它的分组布局特性天生适合这种分段控制的场景，能完美让arr2的元素不管前一行有没有剩余空间，都从新行开始排列。

最优方案：使用UICollectionViewCompositionalLayout（iOS 13+） #

核心思路是把每个Section拆成两个横向组：第一个组承载arr1的所有元素，第二个组承载arr2的所有元素，并且让第二个组强制占满Section的完整宽度，这样它就会自动换行到下一行。

步骤1：保持你的Section结构不变 #

struct Section {
    let id: String // Section头部标题
    let arr1: [YourItemModel]
    let arr2: [YourItemModel]
}

// 替换成你实际的数据模型
struct YourItemModel {
    // 你的元素属性，比如标题、图片等
}

步骤2：构建自定义Compositional Layout #

func createCollectionViewLayout() -> UICollectionViewLayout {
    let layout = UICollectionViewCompositionalLayout { sectionIndex, layoutEnv in
        let currentSection = self.dataSource[sectionIndex]
        
        // 1. 定义单个Cell的尺寸（这里用自适应宽度+固定高度，你可以按需调整）
        let itemSize = NSCollectionLayoutSize(
            widthDimension: .estimated(120),
            heightDimension: .absolute(60)
        )
        let item = NSCollectionLayoutItem(layoutSize: itemSize)
        item.contentInsets = NSDirectionalEdgeInsets(top: 6, leading: 6, bottom: 6, trailing: 6)
        
        // 2. 创建arr1的横向组：自动填充整行空间
        let arr1GroupSize = NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1.0),
            heightDimension: .absolute(60)
        )
        let arr1Group = NSCollectionLayoutGroup.horizontal(
            layoutSize: arr1GroupSize,
            subitems: [item]
        )
        arr1Group.interItemSpacing = .fixed(8)
        
        // 3. 创建arr2的横向组：同样的尺寸，但强制占满整行，触发换行
        let arr2Group = NSCollectionLayoutGroup.horizontal(
            layoutSize: arr1GroupSize,
            subitems: [item]
        )
        arr2Group.interItemSpacing = .fixed(8)
        
        // 4. 创建Section的垂直容器组：把两个横向组叠起来
        let containerGroupSize = NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1.0),
            heightDimension: .estimated(140) // 自适应高度，可根据内容调整
        )
        let containerGroup = NSCollectionLayoutGroup.vertical(
            layoutSize: containerGroupSize,
            subitems: [arr1Group, arr2Group]
        )
        containerGroup.interItemSpacing = .fixed(12) // 两个组之间的间距
        
        // 5. 配置Section的头部和内边距
        let sectionLayout = NSCollectionLayoutSection(group: containerGroup)
        let headerSize = NSCollectionLayoutSize(
            widthDimension: .fractionalWidth(1.0),
            heightDimension: .absolute(48)
        )
        let header = NSCollectionLayoutBoundarySupplementaryItem(
            layoutSize: headerSize,
            elementKind: UICollectionView.elementKindSectionHeader,
            alignment: .top
        )
        sectionLayout.boundarySupplementaryItems = [header]
        sectionLayout.contentInsets = NSDirectionalEdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 16)
        
        return sectionLayout
    }
    return layout
}

步骤3：调整数据源方法适配分组布局 #

因为我们把一个Section拆成了两个组，需要在数据源方法里区分arr1和arr2的元素：

extension YourViewController: UICollectionViewDataSource {
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return dataSource.count
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        let sectionData = dataSource[section]
        return sectionData.arr1.count + sectionData.arr2.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "YourCellID", for: indexPath) as! YourCustomCell
        let sectionData = dataSource[indexPath.section]
        
        if indexPath.item < sectionData.arr1.count {
            // 渲染arr1的元素
            let item = sectionData.arr1[indexPath.item]
            cell.configure(with: item)
        } else {
            // 渲染arr2的元素，需要减去arr1的元素数量
            let arr2Index = indexPath.item - sectionData.arr1.count
            let item = sectionData.arr2[arr2Index]
            cell.configure(with: item)
        }
        return cell
    }
    
    // 实现Section头部的渲染
    func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
        guard kind == UICollectionView.elementKindSectionHeader else {
            return UICollectionReusableView()
        }
        let header = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "HeaderID", for: indexPath) as! YourHeaderView
        header.titleLabel.text = dataSource[indexPath.section].id
        return header
    }
}

兼容旧版本的备选方案：使用UICollectionViewFlowLayout（iOS <13） #

如果需要兼容iOS 12及以下，可以用一个临时占位Cell的hack方法：

1. 在每个Section的arr1和arr2之间插入一个透明的占位Cell，宽度设置为当前行的剩余空间，强制触发换行。
2. 在sizeForItemAt方法中计算占位Cell的宽度：用CollectionView的宽度减去arr1所有元素的总宽度（含间距），得到剩余空间（不能小于0）。
3. 在cellForItemAt中隐藏占位Cell的所有内容。

不过这个方法需要处理屏幕旋转、动态宽度变化等细节，稳定性不如Compositional Layout，所以优先推荐前者。

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