UICollectionView插入全屏大单元格的实现与布局问题咨询

这个需求其实不难，核心是处理好数据源映射和布局差异化这两个关键点，我给你拆解成具体可落地的步骤：

1. 先给Cell做类型标记 #

首先得明确区分两种Cell的类型，建议用枚举来统一管理，这样后续逻辑更清晰：

enum CollectionViewItem {
    case small(data: YourSmallCellModel) // 替换成你自己的小Cell数据模型
    case largeImage(imageURL: URL?) // 大Cell需要的图片参数，按需调整
}

接着把你的原始小Cell数据，和需要插入的大Cell数据合并成一个混合数据源，每60个小Cell后插入一个大Cell：

var mixedDataSource: [CollectionViewItem] = []

func setupMixedDataSource() {
    let originalSmallData: [YourSmallCellModel] = ... // 你的原始小Cell数据
    for (index, data) in originalSmallData.enumerated() {
        mixedDataSource.append(.small(data: data))
        // 每60个小Cell后插入大Cell（注意索引从0开始，第59个小Cell后插入，也就是(index+1) % 60 == 0）
        if (index + 1) % 60 == 0 {
            mixedDataSource.append(.largeImage(imageURL: yourTargetImageURL)) // 替换成你的图片地址
        }
    }
}

2. 注册两种不同的Cell #

在viewDidLoad里注册小Cell和自定义的大Cell（大Cell要提前做好，内部包含ImageView并铺满整个Cell）：

collectionView.register(YourSmallCell.self, forCellWithReuseIdentifier: "SmallCellID")
collectionView.register(LargeImageCell.self, forCellWithReuseIdentifier: "LargeImageCellID")

3. 用FlowLayout实现差异化布局 #

这是让大Cell占满全屏的核心，实现UICollectionViewDelegateFlowLayout的方法，根据Item类型返回不同的尺寸：

extension YourViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let item = mixedDataSource[indexPath.item]
        switch item {
        case .small:
            // 保持你原来的3列计算逻辑
            let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout
            let spacing = flowLayout.minimumInteritemSpacing
            let insets = collectionView.contentInset
            let availableWidth = collectionView.bounds.width - insets.left - insets.right - 2 * spacing
            let cellWidth = availableWidth / 3
            return CGSize(width: cellWidth, height: cellWidth) // 小Cell高度按需调整
        case .largeImage:
            // 大Cell占满全屏宽度
            let insets = collectionView.contentInset
            let cellWidth = collectionView.bounds.width - insets.left - insets.right
            return CGSize(width: cellWidth, height: 220) // 大Cell高度自定义
        }
    }

    // 可选：统一上下间距，让布局更协调
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 12 // 替换成你原来的间距值
    }
}

4. 复用并配置对应的Cell #

在cellForItemAt里根据Item类型，取出对应的Cell并配置数据：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let item = mixedDataSource[indexPath.item]
    switch item {
    case .small(let data):
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "SmallCellID", for: indexPath) as! YourSmallCell
        cell.configure(with: data) // 调用你原来的小Cell配置方法
        return cell
    case .largeImage(let imageURL):
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "LargeImageCellID", for: indexPath) as! LargeImageCell
        // 配置大Cell的ImageView，这里用Kingfisher举例，你可以换成自己的图片加载逻辑
        cell.mainImageView.kf.setImage(with: imageURL)
        return cell
    }
}

5. 最后处理数据源数量 #

直接返回混合数据源的总数即可：

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return mixedDataSource.count
}

额外提醒 #

• 如果是动态加载数据（比如分页），每次新增小Cell数据后，记得重新调用setupMixedDataSource或者检查是否需要插入大Cell，再刷新CollectionView。
• 大Cell的高度如果需要自适应图片比例，可以在拿到图片后计算高度，再通过reloadItems(at:)刷新对应位置。

这样就能完美实现你要的效果啦！

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