实现UITableView在滚动前移动的效果

Question

说明

如果您在 iOS 或 Android 上使用 Spotify 应用程序（我正在 iOS 上开发），您会注意到，如果您选择播放列表，然后将带有歌曲的 UITableView 向上拖动，则如下发生：

表格不会滚动，它只是以与滚动相同的速度向上移动，并且其上方的图像移动速度比表格慢，从而产生视差滚动效果。 然而，一旦 tableview 到达视图的顶部，它的行为就像一个普通的滚动 tableview。

我尝试了几种不同的方法来实现这种效果，但对我来说不起作用。

这是一个关于这种效果的视频：https://www.dropbox.com/s/n7npk4lrzmag0sn/IMG_9331.MOV

我尝试了什么

我希望 UITableView 和它上面的 UIScrollView 在用户滚动其中一个时向上移动，所以我使用了

- (void)scrollViewDidScroll:(UIScrollView *)scrollView

并且根据滚动的方向，我改变了tableview和它上面的UIScrollView的frame位置。

这个方法的问题是tableview弹跳，破坏了效果。

为了摆脱弹跳，我尝试了以下方法：

_userTableView.bounces = NO;

但是，现在因为 tableview 不会滚动，所以永远不会调用 scrollViewDidScroll。

我尝试的另一件事是继承 UITableView，并覆盖

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event

在tableview上检测滚动手势的hitTest方法，问题是：

• 仅传递了 1 个 CGPoint - 无法知道 UITableView 是否被触摸或滚动。
• 由于滚动被禁用，我不能使用 self.decelerating 来检查 tableview 是否刚刚滚动 -- tableview 永远不会减速
• 让表格在视图向上移动时减速，并在到达顶部后以相同的动量继续滚动将非常具有挑战性；在 Spotify 应用中，用户可以以足够高的速度拖动表格，以使表格视图移动到视图顶部并继续滚动，这一切都在一个动作中完成。

随着视图向上移动，tableview 应该增大以容纳添加到视图中的更多单元格（不滚动），或者它应该以与视图相同的大小开始。到达顶部后，它应该开始像普通的 tableview 一样滚动——与向上移动后的动量相同。

关于如何解决这个问题的任何建议？

非常感谢。

Answer 1

对于您展示的效果，我认为将视差内容作为子视图的tableHeaderView就足够了。

在-scrollViewDidScroll:（或contentOffset 的KVO）中，您将视差子视图的center 设置为tableHeaderView 可见边界的中心。您还可以通过乘以一个因子来调整内容“粘”到中心的程度。

CGRect tableViewHeaderVisibleBounds = tableViewHeader.bounds;
tableViewHeaderVisibleBounds.origin.y = MAX(0, MIN(CGRectGetHeight(tableViewHeader.bounds), tableView.contentOffset.y));
tableViewHeaderVisibleBounds.size.height -= tableViewHeaderVisibleBounds.origin.y;

CGFloat factor = 1.8f; // less than 0.5:stick to top // greater than 0.5:stick to bottom 
parallaxContentView.center = (CGPoint){
    .x = parallaxContentView.center.x,
    .y = (CGRectGetMinY(tableViewHeaderVisibleBounds)
         + (CGRectGetHeight(tableViewHeaderVisibleBounds) * factor))
};

我在脑海中对此进行了编码，因此只需进行必要的调整，但我希望你能明白基本的想法。