使两个 UIScrollView 跟随彼此滚动

Question

我如何使两个滚动视图跟随彼此滚动？

例如，我在屏幕左侧有一个滚动视图（A），其内容可以上下滚动，但不能左右滚动。滚动视图 B 与 A 的上下滚动一致，但也可以左右滚动。滚动视图 A 始终在屏幕上。

-----------------------------------------------------------
|             |                                           |
|             |                                           |
|             |                                           |
|     A       |                    B                      |
|             |                                           |
|    scrolls  |                                           |
|   up & down |              scrolls all directions       |
|             |                                           |
-----------------------------------------------------------

我该如何做到这一点，以便（任一视图的）上下滚动也使另一个视图以相同的上下方向滚动？或者还有其他方法可以做到这一点吗？

Answer 1

将滚动视图 A 的委托设置为您的视图控制器...然后...

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
  CGPoint offset = scrollViewB.contentOffset;
  offset.y = scrollViewA.contentOffset.y;
  [scrollViewB setContentOffset:offset];
}

如果您希望两者相互跟随，则为它们两个设置委托并使用...

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
  if([scrollView isEqual:scrollViewA]) {
    CGPoint offset = scrollViewB.contentOffset;
    offset.y = scrollViewA.contentOffset.y;
    [scrollViewB setContentOffset:offset];
  } else {
    CGPoint offset = scrollViewA.contentOffset;
    offset.y = scrollViewB.contentOffset.y;
    [scrollViewA setContentOffset:offset];
  }
}

上面可以重构为有一个方法它接受两个滚动视图并将其中一个与另一个相匹配。

- (void)matchScrollView:(UIScrollView *)first toScrollView:(UIScrollView *)second {
  CGPoint offset = first.contentOffset;
  offset.y = second.contentOffset.y;
  [first setContentOffset:offset];
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
  if([scrollView isEqual:scrollViewA]) {
    [self matchScrollView:scrollViewB toScrollView:scrollViewA];  
  } else {
    [self matchScrollView:scrollViewA toScrollView:scrollViewB];  
  }
}

Swift 3 版本：

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        if scrollView == scrollViewA {
            self.synchronizeScrollView(scrollViewB, toScrollView: scrollViewA)
        }
        else if scrollView == scrollViewB {
            self.synchronizeScrollView(scrollViewA, toScrollView: scrollViewB)
        }
    }

    func synchronizeScrollView(_ scrollViewToScroll: UIScrollView, toScrollView scrolledView: UIScrollView) {
        var offset = scrollViewToScroll.contentOffset
        offset.y = scrolledView.contentOffset.y

        scrollViewToScroll.setContentOffset(offset, animated: false)
    }

Answer 2

我在 iOS 11 上尝试了 Simon Lee 的答案。它有效，但不是很好。两个滚动视图是同步的，但是使用他的方法，滚动视图会失去惯性效果（松开手指后继续滚动）和弹跳效果。我认为这是因为通过 setContentOffset(offset,animated: false) 方法设置 contentOffset 会导致 scrollViewDidScroll(_scrollView: UIScrollView) 的循环调用) 委托方法（参见 这个问题）

这是在 iOS 11 上对我有用的解决方案：

 // implement UIScrollViewDelegate method
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        if scrollView == self.scrollViewA {
            self.syncScrollView(self.scrollViewB, toScrollView: self.scrollViewA)
        }
        else if scrollView == self.scrollViewB {
            self.syncScrollView(self.scrollViewA, toScrollView: scrollViewB)
        }
    }

    func syncScrollView(_ scrollViewToScroll: UIScrollView, toScrollView scrolledView: UIScrollView) {
        var scrollBounds = scrollViewToScroll.bounds
        scrollBounds.origin.y = scrolledView.contentOffset.y
        scrollViewToScroll.bounds = scrollBounds
    }

所以不要设置 < code>contentOffset 我们使用 bounds 属性将另一个滚动视图与用户滚动的滚动视图同步。这样，委托方法 scrollViewDidScroll(_scrollView: UIScrollView) 就不会被循环调用，并且滚动会非常平滑地进行，并且与单个滚动视图一样具有惯性和弹跳效果。

Answer 3

Swift 5.4 // Xcode 13.1

对我来说完美的工作如下：

1. 创建 UIScrollView 的自定义子类
2. 符合 UIGestureRecognizer 委托
3. 覆盖 gestureRecognizer(_:shouldRecognizeSimultaneouslyWith :) GestureRecognizerDelegate 方法

public func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
        return true
    }

4. 两个集合视图需要具有相同的超级视图。将两个手势识别器添加到您的超级视图中

yourSuperview.addGestureRecognizer(scrollView1.panGestureRecognizer)
yourSuperview.addGestureRecognizer(scrollView2.panGestureRecognizer)

希望这有帮助！

Answer 4

伙计们，我知道问题已经得到解答，但决定在这里与大家分享我解决类似问题的方法，因为我相信这是一个非常干净的解决方案。基本上我必须让三个集合视图一起滚动，我所做的是我做了一个 自定义 UICollectionView 子类名为 SharedOffsetCollectionView，当您将此类设置为故事板中的集合视图，或者直接从代码实例化它，您可以让所有实例以相同的方式滚动。

因此，使用 SharedOffsetCollectionView 时，应用程序中此类的所有集合视图实例将始终以相同的方式滚动。在我看来，这是一个干净的解决方案，因为它需要在视图控制器中添加零逻辑，它全部包含在这个外部类中，您只需将集合视图的类设置为 SharedOffsetCollectionView 并你完成了。

相同的方法可以轻松地转移到 UITableView 和 UIScrollViews

希望这对您有所帮助。 :)

我的解决方案是用以下语言编写的：

Swift 5.2，XCode 11.4.1

Answer 5

最重要的答案对我来说不太有效，因为我遇到了 scrollViewDidScroll 的循环调用。发生这种情况是因为设置滚动视图的内容偏移量也会调用scrollViewDidScoll。我通过在它之间放置一个锁来解决这个问题，该锁是根据用户是否拖动滚动视图来设置的，因此通过设置内容偏移量不会发生同步：

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    self.synchronizeScrollView(offSet: scrollView.contentOffset.y,
                               scrollViewAIsScrolling: scrollView == scrollViewA,
                               isScroller: scrollView.isDragging)
}

private enum Scroller {
    case page, time
}

private var scroller: Scroller? = nil

func synchronizeScrollView(offSet: CGFloat, scrollViewAIsScrolling: Bool,
                           isScroller: scrollView.isDragging) {
    
    let scrollViewToScroll = scrollViewAIsScrolling ? scrollViewB : scrollViewA
    var offset = scrollViewToScroll.contentOffset
    offset.y = offSet
    scrollViewToScroll.setContentOffset(offset, animated: false)
}

可以根据有多少个内容来重构此代码滚动视图的使用取决于它们的所有者。我不建议让一个控制器作为许多滚动视图的代表。我宁愿通过委托来解决它。