Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to implement interactive cell swiping to trigger transitioning animation like WhatsApp

I'm looking for how to implement like WhatsApp cell swiping, I already have implemented the cell swiping animation using UIPanGestureRecognizer, the only left is performing the interactive animation -adding the new UIViewController to the window and showing it based on the gesture recognizer velocity and X-axis value-.

Some additional note to be accurate on what I want to achieve:

  • I have a UITableViewController, which has custom UITableViewCells in it. I want to be able to drag a cell from left to right to start the interactive animations. (Note: I already have implemented the cell swiping).

  • The new UIViewController will be pushed from left right.

  • While swiping the cell, the UITableViewController's view will be moving to the right, at that point, I want to show the pushing UIViewController beside it.

Here's a GIF for more details on what I need (The GIF is swiping the cell from right to left, I need the opposite):

enter image description here

like image 430
MEnnabah Avatar asked Jun 14 '17 20:06

MEnnabah


1 Answers

I suggest using SWRevealViewController. It is very easy to set up using their guide and it looks absolutely great. I have found that it even works better when you pre-load the UIViewController that you use to be what is shown underneath.

It adds a great user experience for the functionality you are looking for.

enter image description here

It can also be user interactive if you wish to opt-in to that functionality. I have not used the interactive feature but it is very easy to get up and running with just a few lines of code:

let storyboard = UIStoryboard(name: "Main", bundle: .main)
let mainVC = storyboard.instantiateInitialViewController()
let menuStoryboard = UIStoryboard(name: "Menu", bundle: sdkBundle)
let menuNav = menuStoryboard.instantiateInitialViewController() as! UINavigationController
let mainRevealVC = SWRevealViewController(rearViewController: menuNav, frontViewController: mainVC)
mainRevealVC?.modalTransitionStyle = .crossDissolve
present(mainRevealVC!, animated: true, completion: nil)

And to get the reveal UIViewController to get shown, you just call

// Every UIViewController will have a `self.revealViewController()` when you `import SWRevealViewController`
self.revealViewController().revealToggle(animated: true)
like image 6
Brandon A Avatar answered Nov 17 '22 12:11

Brandon A