UICollectionView弹性滚动布局异常：单元格偏移且无法静止问题

你的问题核心在于水平轴缺乏刚性约束导致累积偏移，以及滚动动画的误差未及时校准让单元格无法稳定静止。下面是针对性的修复方案，附带修改后的完整代码：

核心问题拆解 #

1. 水平偏移原因：在shouldInvalidateLayout中修改单元格位置时，没有锁定x坐标；加上手势的水平距离参与了滚动阻力计算，长期滚动后会触发动态动画的微小水平偏差，最终累积成明显偏移。
2. 持续弹跳原因：滚动过程中动态动画的位置没有和原生布局的正确位置对齐，加上弹簧参数设置偏“活跃”，导致单元格无法快速收敛；同时缺少滚动停止后的位置校准逻辑。

修复步骤与代码实现 #

1. 锁定水平轴位置 #

每次更新单元格center时，强制保留原生布局的x坐标，彻底禁止水平方向的任何移动。

2. 移除水平距离对滚动阻力的影响 #

只基于垂直距离计算滚动阻力，避免水平位置间接干扰滚动动画。

3. 滚动停止时校准所有单元格 #

监听滚动结束事件，将所有单元格重置到原生布局的正确位置，并更新弹簧锚点，确保静止。

4. 微调弹簧参数优化稳定性 #

调整阻尼和频率，让弹簧动画更快收敛，减少弹跳次数。

class SpringyColumnLayout: UICollectionViewFlowLayout {
    private lazy var dynamicAnimator = UIDynamicAnimator(collectionViewLayout: self)
    private var scrollStoppedObserver: NSObjectProtocol?

    override func prepare() {
        super.prepare()
        guard let cv = collectionView else { return }
        let availableWidth = cv.bounds.inset(by: cv.layoutMargins).width
        let minColumnWidth: CGFloat = 300
        let maxNumberOfColumns = Int(availableWidth / minColumnWidth)
        let cellWidth = (availableWidth / CGFloat(maxNumberOfColumns)) .rounded(.down)

        self.itemSize = CGSize(width: cellWidth, height: 70)
        self.sectionInset = UIEdgeInsets(
            top: minimumInteritemSpacing,
            left: 0,
            bottom: 0,
            right: 0
        )
        self.sectionInsetReference = .fromSafeArea

        if dynamicAnimator.behaviors.isEmpty {
            let contentSize = collectionViewContentSize
            let contentBounds = CGRect(origin: .zero, size: contentSize)
            guard let items = super.layoutAttributesForElements(in: contentBounds) else { return }

            for item in items {
                let spring = UIAttachmentBehavior(
                    item: item,
                    attachedToAnchor: item.center
                )
                spring.length = 0
                // 调整参数让动画更快稳定
                spring.damping = 0.9
                spring.frequency = 0.8
                self.dynamicAnimator.addBehavior(spring)
            }
        }

        // 监听滚动停止事件，用于校准位置
        if scrollStoppedObserver == nil {
            scrollStoppedObserver = NotificationCenter.default.addObserver(
                forName: UICollectionView.scrollViewDidEndDeceleratingNotification,
                object: cv,
                queue: .main
            ) { [weak self] _ in
                self?.calibrateAllItemsPosition()
            }
            // 处理拖拽直接停止的情况
            NotificationCenter.default.addObserver(
                forName: UICollectionView.scrollViewDidEndDraggingNotification,
                object: cv,
                queue: .main
            ) { [weak self] notification in
                let decelerate = notification.userInfo?[UICollectionView.scrollViewDecelerateUserInfoKey] as? Bool ?? false
                if !decelerate {
                    self?.calibrateAllItemsPosition()
                }
            }
        }
    }

    override func layoutAttributesForElements(
        in rect: CGRect
    ) -> [UICollectionViewLayoutAttributes]? {
        return dynamicAnimator.items(in: rect) as? [UICollectionViewLayoutAttributes]
    }

    override func layoutAttributesForItem(
        at indexPath: IndexPath
    ) -> UICollectionViewLayoutAttributes? {
        return dynamicAnimator.layoutAttributesForCell(at: indexPath)
    }

    override func shouldInvalidateLayout(
        forBoundsChange newBounds: CGRect
    ) -> Bool {
        guard let scrollView = collectionView else { return false }
        let scrollDelta = newBounds.origin.y - scrollView.bounds.origin.y
        let touchLocation = scrollView.panGestureRecognizer.location(in: scrollView)

        for case let spring as UIAttachmentBehavior in dynamicAnimator.behaviors {
            guard let item = spring.items.first, let indexPath = item.indexPath else { continue }
            // 获取原生布局的正确位置，锁定x坐标
            guard let correctAttrs = super.layoutAttributesForItem(at: indexPath) else { continue }
            
            let anchorPoint = spring.anchorPoint
            // 只使用垂直距离计算滚动阻力
            let yDistanceFromTouch = abs(touchLocation.y - anchorPoint.y)
            let scrollResistance = yDistanceFromTouch / 1500

            var center = item.center
            // 强制保留原生布局的x坐标，禁止水平移动
            center.x = correctAttrs.center.x
            if scrollDelta < 0 {
                center.y += max(scrollDelta, scrollDelta * scrollResistance)
            } else {
                center.y += min(scrollDelta, scrollDelta * scrollResistance)
            }
            item.center = center
            dynamicAnimator.updateItem(usingCurrentState: item)
        }
        return false
    }

    // 校准所有单元格到原生布局的正确位置
    private func calibrateAllItemsPosition() {
        guard let cv = collectionView else { return }
        let contentBounds = CGRect(origin: .zero, size: collectionViewContentSize)
        guard let correctItems = super.layoutAttributesForElements(in: contentBounds) else { return }

        for correctAttr in correctItems {
            guard let behavior = dynamicAnimator.behavior(for: correctAttr) as? UIAttachmentBehavior else { continue }
            // 更新单元格位置到正确坐标
            correctAttr.center = correctAttr.center
            dynamicAnimator.updateItem(usingCurrentState: correctAttr)
            // 重置弹簧锚点到正确位置
            behavior.anchorPoint = correctAttr.center
        }
    }

    deinit {
        // 移除监听避免内存泄漏
        if let observer = scrollStoppedObserver {
            NotificationCenter.default.removeObserver(observer)
        }
    }
}

关键修改说明 #

• 刚性锁定水平轴：在滚动动画更新时，强制单元格x坐标与原生布局保持一致，从根源上避免水平偏移。
• 优化滚动逻辑：移除水平距离对滚动阻力的影响，让动画逻辑更聚焦于垂直滚动。
• 滚动后校准：通过监听滚动结束事件，将所有单元格拉回正确位置并重置弹簧锚点，确保最终静止。
• 调整弹簧参数：提高阻尼、降低频率，让弹簧动画更快收敛，减少不必要的弹跳。

这样修改后，你的布局就不会再出现水平偏移，滚动结束后单元格也会快速稳定到正确位置。

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