4

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 UIScrollView 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 UITableView, with custom UITableViewCells 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.

Lahav
  • 781
  • 10
  • 22

1 Answers1

2

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.

Lahav
  • 781
  • 10
  • 22
  • Could you explain more? I'm trying to implement this but i don't understand how to stop moving the view on the cell and start scrolling the page without discontinuing the same touch. – Jacolack Apr 02 '17 at 04:03
  • use an if-statement to check if the cell has translated a certain distance, if it hasn't then keep moving the cell along with the touch. If it has, then move the main scrollview instead. – Lahav Apr 03 '17 at 00:35
  • Was that logic in your custom cell? Because I don't know how to move the scroll view from within the cell class. – Jacolack Apr 03 '17 at 00:38
  • Keep a reference to it. When you initialize the tableview cell, just set a property in it equal to the tableview. Then you can have methods inside the tableview that can call methods on that instance – Lahav Apr 03 '17 at 00:51