如何基于UICollectionViewCompositionalLayout实现滚动同步背景图？

核心逻辑 #

背景图的移动距离与CollectionView的滚动进度成正比，比例系数为背景图总宽度 / 单元格总数。每滚动1个单元格宽度的距离，背景图就移动「背景图宽度/单元格数量」的距离，以此实现同步联动。

具体实现步骤 #

1. 配置背景视图 #

在CollectionView的父视图中添加背景图控件，确保其层级在CollectionView下方，且不被缩放裁剪：

// 在ViewController的viewDidLoad或初始化方法中
let backgroundImageView = UIImageView(image: UIImage(named: "your_background_image"))
backgroundImageView.contentMode = .left // 保持图片原始尺寸，左对齐
backgroundImageView.clipsToBounds = false // 允许图片超出屏幕范围
backgroundImageView.frame = CGRect(x: 0, y: 0, width: 1864, height: view.bounds.height) // 按背景图实际宽度设置
view.insertSubview(backgroundImageView, at: 0)
// 保存为类属性，方便后续更新
self.backgroundImageView = backgroundImageView

2. 监听滚动并计算偏移 #

通过UIScrollViewDelegate的scrollViewDidScroll方法，实时计算背景图的偏移量并更新：

extension YourViewController: UIScrollViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        guard let collectionView = scrollView as? UICollectionView else { return }
        
        // 关键参数（可根据实际场景动态获取）
        let totalCellCount = 10 // 从数据源或JSON中取实际单元格数量
        let backgroundTotalWidth: CGFloat = 1864
        let singleCellWidth = collectionView.bounds.width // 全屏轮播时单元格宽度等于屏幕宽度
        
        // 计算单个单元格滚动对应的背景移动距离
        let perCellBackgroundShift = backgroundTotalWidth / CGFloat(totalCellCount)
        // 计算当前滚动进度（已滚动的单元格比例）
        let scrollProgress = scrollView.contentOffset.x / singleCellWidth
        // 计算背景图需要偏移的X值（取负是因为背景要反向移动）
        let backgroundOffsetX = scrollProgress * perCellBackgroundShift
        
        // 用transform更新偏移（GPU层面处理，性能更优）
        backgroundImageView.transform = CGAffineTransform(translationX: -backgroundOffsetX, y: 0)
    }
}

3. 适配CompositionalLayout的缩放效果 #

如果你的CollectionView单元格有缩放、间距或非全屏宽度，需要调整singleCellWidth的计算逻辑：

// 示例：单元格宽度为屏幕80%，左右间距各10pt
let singleCellWidth = collectionView.bounds.width * 0.8 + 20

4. 动态数据源适配 #

如果单元格数量从JSON动态加载，在数据源更新后同步更新参数：

func updateDataSource(with jsonData: [YourDataModel]) {
    self.dataSource = jsonData
    collectionView.reloadData()
    // 更新总单元格数量
    self.totalCellCount = jsonData.count
}

注意事项 #

• 背景图的contentMode必须设置为.left或.topLeft，避免图片被缩放导致偏移比例错误；
• 若背景图宽度大于屏幕宽度，需确保父视图clipsToBounds为false，否则超出部分会被裁剪；
• 使用transform修改偏移比直接修改frame性能更优，不会触发视图重绘。

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