How to swipe a View controller over the top of another view controller?

Question

I have a table view controller and another view controller. Now my requirement is that i need to swipe the table view controller half over the another view controller when i swipe the view controller. The image i can show is like this:

Is it possible to achieve this by using the Swipegesture . If possible how can i do this in Swift3?

Answer 1

While there are libraries out there to do this for you, if you are going to do this yourself, the basic idea is that you can create a "swipe from edge" gesture recognizer to initiate a custom presentation of a view controller (that has your menu on it). It consists of:

• a custom transitioning delegate (conforming to UIViewControllerTransitioningDelegate protocol) that specifies the animation controller and interaction controller (both described below) to be used during the presentation of the next scene;

• an animation controller (conforming to UIViewControllerAnimatedTransitioning) that dictates the animation of the scene from the right edge;

• an interaction controller (a UIPercentDrivenInteractiveTransition) that you can use to optionally drive the transition via a gesture;

• a presentation controller (a UIPresentationController subclass) that dictates whether the presented view will be removed or not (in this case you do not want it removed), as well as any other chrome to be animated alongside the animated presentation of the new scene (e.g. you often dim or blur the presenting view); and

• gesture recognizers to drive the interaction controller.

For more information, see WWDC videos Custom Transitions Using View Controllers and A Look Inside Presentation Controllers.

See https://github.com/robertmryan/SwiftCustomTransitions/tree/rightside for a Swift 3 example that renders the following UX:

This is all admittedly complicated enough that you may well want to consider third party libraries for presenting slide-in menus. But if you wanted to "roll your own", these are the basic pieces involved.

Answer 2

What I would do is first create and hide a UIView that lets you select those UIViewController on the right side of the screen and animate it to show when the user swipes.

Then you implement this method that returns UIViewControllerAnimatedTransitioning, a class that you want to implement for custom transitioning.

- (id<UIViewControllerAnimatedTransitioning>) navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController*)fromVC toViewController:(UIViewController*)toVC

This could be a good tutorial for custom transitioning. https://www.raywenderlich.com/110536/custom-uiviewcontroller-transitions

Answer 3

I would look into SWRevealViewController. It gives you the behavior you are looking for in just a few lines of code. You can present an SWRevealViewController that will hold your top and bottom UIViewController and present that as your scene.

// Your Front View Controller
let frontStoryboard = UIStoryboard(name: "FrontStoryboard", bundle: .main)
let frontVC = frontStoryboard.instantiateInitialViewController()

// Your Rear View Controller
let rearStoryboard = UIStoryboard(name: "RearStoryboard", bundle: .main)
let rearVC = rearStoryboard.instantiateInitialViewController()

// Create Reveal View Controller From Both
if let revealVC = SWRevealViewController(rearViewController: rearVC, frontViewController: frontVC) {
    present(revealVC, animated: true) {

    }
}

Using SWRevealViewController you can set the UIViewController that you are trying to do the sliding in as the frontViewController and you can present the rearViewController simply using a single line of code.

// When you import SWRevealViewController every UIViewController
// has a method revealViewController() that returns the revealViewController
// that you can tell to toggle it's reveal state using the below
self.revealViewController().revealToggle(animated: true)

---

EDIT

I believe you are trying to build a sliding navigation menu. Here is a link to a Ray Wenderlich tutorial where he is creating exactly the navigation you are looking for.