Lahav Lahav - 1 year ago 129
iOS Question

How to create SnapChat TableView effect

I have my application set up such that the user can swipe left or right to navigate between view controllers, similar to SnapChat. I implemented this using a

with paging enabled.

One feature from SnapChat I would also like to implement is the ability for the user to pick a cell in a tableview, begin to slide it over, and then have the cell "lock" after a certain point, allowing the user to be able to pull the entire view across the screen. This may be somewhat difficult to picture if you haven't ever used SnapChat, so I've included images of what I'm talking about:

enter image description here
enter image description here

How should I implement this feature using a UIScrollView?

Currently, one of the view controllers in my ScrollView has a
, with custom
that contain gesture recognizers that allow them to slide over as they detect a swipe. Once the gesture recognizer detects a translation greater than a certain amount, the cell stops sliding relative to the view controller, and the entire scroll view starts to slide instead.

This roughly achieves the same effect as SnapChat, but it doesn't seem as nice and is very buggy. For example, if the user tries to flick the tableview cell (like people often do in SnapChat), s**t hits the fan.

SnapChat's implementation of the feature gives the impression that after sliding the cell a certain amount, the user "retains control" of the scroll view. It's a very elegant user experience, and I'm not sure how to go about replicating it.

If there is any additional helpful information I should provide (such as my code so far), let me know.

Answer Source

The way I implemented this feature was by subclassing UITableViewCell and adding a UIPanGestureRecognizer to the cell, as well as an "overlay view" on top of the cell itself, which contained the buttons, background images, or whatever else needed to be on the cell.

Using recognizer.translationInView(self), I was able to find out exactly how much the user's touch had translated, and then adjust the origin of the overlay view accordingly, so all the user elements would appear to slide. As the overlay view translated, it would reveal a view that I had added directly to the cell itself.

After the gesture recognizer had translated beyond a certain threshold, I would manually adjust the content offset of the UIScrollView, just like I had with the cell.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download