Search code examples
iosswiftswift3uiviewanimationtransition

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


Solution

  • 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)