滚动到顶部时，UIScrollView 出现故障和抖动答案

【问题标题】：UIScrollView is glitchy and shaky when scrolls to the top滚动到顶部时，UIScrollView 出现故障和抖动
【发布时间】：2023-03-21 23:51:01
【问题描述】：

我有一个 UIViewController，其中包含一个 UICollectionView 和一个充当视图标题的 UIView。

我想在视图滚动时折叠标题。我目前正在通过在变量中捕获标题的顶部锚点并使用scrollViewDidScroll 为该值设置constant 来执行此操作。

  func scrollViewDidScroll(_ scrollView: UIScrollView) {
    headerTopAnchor.constant = max(-headerView.frame.height, -scrollView.contentOffset.y)
  }

这很有效，因为集合视图向上滚动，标题滚动离开屏幕，反之亦然。

但是，如果集合视图中的内容不完全适合 - 如果只有半个左右的单元格滚动到屏幕外，则会出现奇怪的颤抖行为。 p>

如果我向scrollViewDidScroll 添加打印语句，我可以看到集合视图过度滚动了少量，这导致顶部锚点多次少量更改

  func scrollViewDidScroll(_ scrollView: UIScrollView) {
    print(max(-headerView.frame.height, -scrollView.contentOffset.y))
    headerTopAnchor.constant = max(-headerView.frame.height, -scrollView.contentOffset.y)
  }

如何防止这种行为？

我已经包含了一个应该演示问题的视图控制器 -

final class TestViewController: UIViewController {

  private let headerView: UIView = {
    let view = UIView(frame: .zero)
    view.translatesAutoresizingMaskIntoConstraints = false
    view.backgroundColor = .systemTeal
    return view
  }()

  private(set) lazy var collectionView: UICollectionView = {
    let collectionView = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewFlowLayout())
    collectionView.translatesAutoresizingMaskIntoConstraints = false
    collectionView.backgroundColor = .clear
    collectionView.dataSource = self
    collectionView.delegate = self
    collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "UICollectionViewCell")
    return collectionView
  }()

  private lazy var headerTopAnchor = NSLayoutConstraint()

  override func viewDidLoad() {
    super.viewDidLoad()
    view.backgroundColor = .systemGray
    [headerView, collectionView].forEach(view.addSubview(_:))
    NSLayoutConstraint.activate([
      headerView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
      headerView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
      headerView.heightAnchor.constraint(equalToConstant: 180),

      collectionView.topAnchor.constraint(equalTo: headerView.bottomAnchor),
      collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
      collectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
      collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor)
    ])

    headerTopAnchor = headerView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor)
    headerTopAnchor.isActive = true
  }
}

extension TestViewController: UICollectionViewDataSource {
  func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    // return 300 // no problem
    return 10 // problem :(
  }

  func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "UICollectionViewCell", for: indexPath)
    cell.backgroundColor = indexPath.item % 2 == 0 ? .darkGray : .lightGray
    return cell
  }
}

extension TestViewController: UICollectionViewDelegateFlowLayout {
  func scrollViewDidScroll(_ scrollView: UIScrollView) {
    print(max(-headerView.frame.height, -scrollView.contentOffset.y))
    headerTopAnchor.constant = max(-headerView.frame.height, -scrollView.contentOffset.y)
  }

  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    return .init(width: collectionView.frame.width, height: 60)
  }
}

【问题讨论】：

您是否考虑过使用节标题？它将像所有其他单元格一样运行，但与正常的 cellForItem 和 sizeForItem 函数分离，因此您可以专门控制它。它也将出现在集合视图的顶部。我认为这可能是您的预期操作，如果是这样，可能是推荐的方法。否则，我相信错误来自headerTopAnchor.constant = max(-headerView.frame.height, -scrollView.contentOffset.y)
希望我的回答能解决您面临的问题:)

标签： swift uicollectionview uiscrollview autolayout

【解决方案1】：

好像UIScrollView 有一个bounces 属性，默认设置为true。

来自文档：

如果该属性的值为true，则滚动视图会在滚动时反弹遇到内容的边界。在视觉上弹跳表明滚动已到达内容的边缘。如果值为假，滚动在内容边界处立即停止而不弹跳。默认值为 true。

这解释了在应用动画的同时在到达边界时被顶部约束纠正时的颤抖行为。

我在viewDidLoad 中设置了collectionView.bounces = false，它现在可以正常工作了。

【讨论】：