如何在CompositionalLayout的CollectionView中实现指定section水平自动滚动且不影响垂直滚动？

我的UICollectionView包含多个Section，其中「메인배너」（mainBanner）Section是水平轮播视图，布局代码如下：

let itemSize = NSCollectionLayoutSize(
    widthDimension: .fractionalWidth(1.0),
    heightDimension: .fractionalHeight(1.0)
)

let item = NSCollectionLayoutItem(
    layoutSize: itemSize
)

let groupSize = NSCollectionLayoutSize(
    widthDimension: .fractionalWidth(1.0),
    heightDimension: .fractionalHeight(0.6)
)

let group = NSCollectionLayoutGroup.horizontal(
    layoutSize: groupSize,
    subitems: [item]
)

let section = NSCollectionLayoutSection(group: group)
section.orthogonalScrollingBehavior = .groupPagingCentered

我通过bannerTimer()方法实现每3秒自动滚动轮播，但调用scrollToItem(at:at:animated:)时，若主CollectionView处于垂直滚动状态，整个视图会跳转到轮播Section的位置，破坏了垂直滚动的状态。定时器及滚动代码如下：

// Presenter
func bannerTimer() {
    Timer.scheduledTimer(
        withTimeInterval: 3,
        repeats: true
    ) { [weak self] _ in
        guard let page = self?.currentBannerPage,
              let mainBannerCount = self?.model.goodsList[.메인배너]?.count else {return}

        let section = HomeCollectionViewSectionKind.메인배너.rawValue
        let indexPath = IndexPath(item: page, section: section)

        if page == mainBannerCount - 1 {
            self?.currentBannerPage = 0
             self?.viewController?.bannerMove(
                 indexPath,
                 position: .right
             )
        }

        self?.currentBannerPage += 1
        self?.viewController?.bannerMove(
            indexPath,
            position: .right
        )
    }
}

// ViewController
func bannerMove(
    _ indexPath: IndexPath,
    position: UICollectionView.ScrollPosition
) {
    collectionView.scrollToItem(
        at: indexPath,
        at: position,
        animated: true
    )
}

解决方案 #

方案1：直接修改Content Offset，保持垂直位置不变 #

弃用scrollToItem，改为直接计算轮播Section的水平偏移量，仅修改CollectionView的水平contentOffset，保留当前垂直偏移值，避免影响垂直滚动状态。

修改ViewController的bannerMove方法，同时调整Presenter的调用逻辑：

// ViewController
func bannerMove(to targetPage: Int, section: Int) {
    guard let mainBannerCount = presenter?.model.goodsList[.메인배너]?.count, mainBannerCount > 0 else { return }
    let adjustedPage = targetPage % mainBannerCount // 处理循环滚动
    
    // 计算单个轮播项的宽度（与Section的group宽度一致）
    let itemWidth = collectionView.bounds.width
    // 目标水平偏移量
    let targetOffsetX = CGFloat(adjustedPage) * itemWidth
    
    // 保留当前垂直偏移，仅更新水平偏移
    var newOffset = collectionView.contentOffset
    newOffset.x = targetOffsetX
    collectionView.setContentOffset(newOffset, animated: true)
}

// Presenter 调整timer逻辑
func bannerTimer() {
    Timer.scheduledTimer(withTimeInterval: 3, repeats: true) { [weak self] _ in
        guard let self = self,
              let mainBannerCount = self.model.goodsList[.메인배너]?.count,
              mainBannerCount > 0 else { return }
        
        let targetPage = self.currentBannerPage
        let section = HomeCollectionViewSectionKind.메인배너.rawValue
        
        self.viewController?.bannerMove(to: targetPage, section: section)
        
        // 更新页码，处理循环
        self.currentBannerPage = (targetPage + 1) % mainBannerCount
    }
}

方案2：嵌套独立的UICollectionView作为轮播Cell #

把「메인배너」Section的Cell替换成一个独立的UICollectionView，专门负责轮播逻辑。主CollectionView的垂直滚动与子CollectionView的水平滚动完全分离，自动滚动不会影响主视图的垂直位置。

步骤：

• 创建BannerCollectionViewCell，内部包含UICollectionView实现轮播
• 在主CollectionView的cellForItemAt方法中，为该Cell设置轮播数据和自动滚动逻辑
• 主、子CollectionView的滚动状态互不干扰

这种方案逻辑划分更清晰，适合复杂轮播需求，彻底避免主CollectionView的布局冲突。

内容的提问来源于stack exchange，提问作者서승우