UICollectionView分组环形滚动（无限循环）效果实现问题

你的当前实现通过手动修改cell的transform来实现滚动，但这种方式无法触发CollectionView的复用机制，也没法真正实现无限循环。下面是问题分析和修正方案：

原代码的核心问题 #

• 直接修改cell.transform绕过了CollectionView的滚动系统，超出视口的cell无法被正确复用，滚动到边界后无法自然衔接
• 使用整个CollectionView的contentSize.width作为偏移阈值错误，每个正交滚动section的内容宽度是独立的
• 数据源仅返回固定数量的item，没有支持循环复用的逻辑

修正后的实现方案 #

我们通过伪无限数据源+滚动偏移重置来实现无缝循环，同时利用CollectionView自身的滚动系统替代手动cell移动：

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var collectionView: UICollectionView!
    
    private var timer: Timer?
    private var sections: Int = 5
    private let cellSizes: [CGSize] = [
        CGSize(width: 150, height: 200),
        CGSize(width: 200, height: 150),
        CGSize(width: 180, height: 180),
        CGSize(width: 150, height: 200),
        CGSize(width: 200, height: 150),
        CGSize(width: 180, height: 180)
    ]
    private var scrollDirections: [CGFloat] = []
    // 保存每个section的真实item数量
    private let originalItemsCount = 3
    // 预计算每个section的单轮滚动宽度（item总宽度+间距）
    private var sectionSingleLoopWidths: [CGFloat] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupCollectionView()
        setupScrollDirections()
        precomputeSectionLoopWidths()
        startAutoScrolling()
        // 初始化时让每个section滚动到中间位置，避免一开始就需要跳转
        DispatchQueue.main.async {
            self.resetSectionOffsetsToMiddle()
        }
    }
    
    private func setupCollectionView() {
        collectionView.dataSource = self
        collectionView.collectionViewLayout = createLayout()
        collectionView.isPagingEnabled = false
        collectionView.showsHorizontalScrollIndicator = false
        collectionView.showsVerticalScrollIndicator = false
        collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "Cell")
        // 禁止用户手动滚动（如果需要支持手动滚动，需额外处理偏移重置）
        collectionView.isScrollEnabled = false
    }
    
    private func setupScrollDirections() {
        for index in 0..<sections {
            scrollDirections.append(index % 2 == 0 ? 1.0 : -1.0)
        }
    }
    
    private func precomputeSectionLoopWidths() {
        for section in 0..<sections {
            let cellSize = cellSizes[section % cellSizes.count]
            // 单轮宽度 = item宽度*数量 + 间距*(数量+1) + 内边距*2
            let width = cellSize.width * CGFloat(originalItemsCount) + 10 * CGFloat(originalItemsCount + 1) + 10 * 2
            sectionSingleLoopWidths.append(width)
        }
    }
    
    private func createLayout() -> UICollectionViewLayout {
        let layout = UICollectionViewCompositionalLayout { sectionIndex, _ in
            let cellSize = self.cellSizes[sectionIndex % self.cellSizes.count]
            let itemSize = NSCollectionLayoutSize(
                widthDimension: .absolute(cellSize.width),
                heightDimension: .absolute(cellSize.height)
            )
            let item = NSCollectionLayoutItem(layoutSize: itemSize)
            item.contentInsets = NSDirectionalEdgeInsets(top: 5, leading: 5, bottom: 5, trailing: 5)
            
            let groupSize = NSCollectionLayoutSize(
                widthDimension: .absolute(cellSize.width),
                heightDimension: .absolute(cellSize.height + 10)
            )
            // 每个group只放一个item，让正交滚动时item逐个排列
            let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
            
            let section = NSCollectionLayoutSection(group: group)
            section.orthogonalScrollingBehavior = .continuous
            section.interGroupSpacing = 10
            // 设置左右内边距，给滚动跳转预留缓冲空间
            section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10)
            return section
        }
        return layout
    }

    private func startAutoScrolling() {
        timer = Timer.scheduledTimer(timeInterval: 0.02, target: self, selector: #selector(performAutoScroll), userInfo: nil, repeats: true)
    }
    
    @objc private func performAutoScroll() {
        guard let layout = collectionView.collectionViewLayout as? UICollectionViewCompositionalLayout else { return }
        
        for section in 0..<sections {
            let direction = scrollDirections[section]
            let loopWidth = sectionSingleLoopWidths[section]
            
            // 获取当前section的滚动偏移
            let sectionOffset = collectionView.contentOffset(forSectionAt: section)
            var newOffset = sectionOffset.x + 1.0 * direction
            
            // 检测是否需要重置偏移，实现循环
            if direction > 0 {
                // 向右滚动，超过单轮宽度时重置到初始位置的偏移
                if newOffset >= loopWidth {
                    newOffset -= loopWidth
                }
            } else {
                // 向左滚动，小于0时重置到单轮宽度的位置
                if newOffset <= 0 {
                    newOffset += loopWidth
                }
            }
            
            // 更新section的滚动偏移
            collectionView.setContentOffset(CGPoint(x: newOffset, y: sectionOffset.y), forSectionAt: section, animated: false)
        }
    }
    
    private func resetSectionOffsetsToMiddle() {
        for section in 0..<sections {
            let loopWidth = sectionSingleLoopWidths[section]
            // 设置到中间位置（比如10倍单轮宽度，避免一开始就触发边界）
            let middleOffset = loopWidth * 10
            collectionView.setContentOffset(CGPoint(x: middleOffset, y: 0), forSectionAt: section, animated: false)
        }
    }
    
    deinit {
        timer?.invalidate()
    }
}

extension ViewController: UICollectionViewDataSource {
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return sections
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        // 返回极大值实现伪无限滚动，实际通过取模获取真实数据
        return Int.max
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath)
        // 取模获取真实数据的索引，实现循环复用
        let realIndex = indexPath.item % originalItemsCount
        // 这里可以根据realIndex设置对应的内容，保持循环一致性
        cell.backgroundColor = colorForIndex(realIndex)
        cell.layer.cornerRadius = 8
        return cell
    }
    
    // 固定索引对应固定颜色，保证循环时内容一致
    private func colorForIndex(_ index: Int) -> UIColor {
        switch index {
        case 0:
            return .systemBlue
        case 1:
            return .systemGreen
        case 2:
            return .systemOrange
        default:
            return .systemPurple
        }
    }
}

关键修改点说明 #

1. 伪无限数据源：numberOfItemsInSection返回Int.max，通过indexPath.item % originalItemsCount获取真实数据索引，保证cell内容循环一致
2. 滚动偏移管理：使用CollectionView的contentOffset(forSectionAt:)和setContentOffset(_:forSectionAt:animated:)来控制每个section的滚动，替代手动修改cell transform
3. 边界重置逻辑：预计算每个section的单轮滚动宽度，当滚动到边界时，将偏移重置为循环后的位置，实现无缝衔接
4. 布局调整：每个group只包含一个item，确保正交滚动时item排列正确，同时设置contentInsets预留缓冲空间

内容的提问来源于stack exchange，提问作者Gabriel Isaac González Arroyo