如何创建 SnapChat TableView 效果

How to create SnapChat TableView effect

我设置了我的应用程序,以便用户可以向左或向右滑动以在视图控制器之间导航,类似于 SnapChat。我使用启用了分页的 UIScrollView 实现了这一点。

我还想实现的 SnapChat 的一个功能是让用户能够在表格视图中选择一个单元格,开始将其滑过,然后在某个点之后让单元格 "lock",允许用户能够将整个视图拉过屏幕。如果您从未使用过 SnapChat,这可能有点难以想象,所以我包含了我正在谈论的图像:

我应该如何使用 UIScrollView 实现此功能?

目前,我的 ScrollView 中的一个视图控制器有一个 UITableView,自定义 UITableViewCells 包含手势识别器,允许它们在检测到滑动时滑过。一旦手势识别器检测到一个大于一定量的平移,单元格就停止相对于视图控制器滑动,而整个滚动视图开始滑动。

这大致实现了与 SnapChat 相同的效果,但它看起来不太好,而且 bug 很多。例如,如果用户试图轻弹 tableview 单元格(就像人们在 SnapChat 中经常做的那样),s**t 击中了风扇。

SnapChat 的功能实现给人的印象是,在将单元格滑动一定量后,滚动视图的用户 "retains control"。这是一种非常优雅的用户体验,我不确定如何复制它。

如果我应该提供任何其他有用的信息(例如我目前的代码),请告诉我。

我实现此功能的方法是子类化 UITableViewCell 并向单元格添加 UIPanGestureRecognizer,并在单元格本身,其中包含按钮、背景图像或单元格上需要的任何其他内容。

使用 recognizer.translationInView(self),我能够准确地找出用户的触摸移动了多少,然后相应地调整覆盖视图的原点,这样所有的用户元素都会出现滑动。随着覆盖视图的翻译,它会显示我直接添加到单元格本身的视图。

手势识别器翻译超过某个阈值后,我将手动调整 UIScrollView 的内容偏移量,就像我对单元格所做的那样。