Search code examples
iosios6uiviewuiviewcontroller

Handling a view controller that slides in with either way swipe


I am building an application that is for iOS6+. The application will have a main View Controller at one point in the application.

I would like this main view controller to handle a swipe left and swipe right on screen to then show another view controller.

Is there an easy way to accomplish this in core iOS6+, or should I look for another library etc.

I already use a slide in menu style else where in the application. I also understand and can find a million alternatives to these.

What I am looking for is to have one View Controller (which acts in the 'middle'). Then when they swipe left/right another view controller is shown. They can then swipe back the opposite direction or click a back button to return to the main controller.

EDIT-
Specifically I am looking for the functionality to do the following: Pre-load the controller that will slide in. When the swipe occurs (is happening)... the controller to drag/slide in with the touch. The same drag/swipe to occur either way the controller is swiped (lefT/right).

EDIT 2 -
I am looking for the functionality of dragging the view controller in with the finger. Dependant on which way the drag is occurring, it would be pulling the same view controller in.

I.e the layout would be: [VC for Drag] [Main controller] [VC for Drag].
If the user swipes from left to right, or right to left the other controller is dragged over the top and they can return to the Main controller using the opposite entry swipe.


Solution

  • My favorite side-drawer controller: https://github.com/mutualmobile/MMDrawerController

    MMDrawerController is highly configurable and does all the things you mention:

    • support for left and right controllers
    • preloads side controllers
    • "dragging" open with a gesture

    If you're using a storyboard you can use this extension to have storyboard support: https://github.com/TomSwift/MMDrawerController-Storyboard

    EDIT:

    Another option might be to use a UIPageViewController with a transition style of UIPageViewControllerTransitionStyleScroll: https://developer.apple.com/library/ios/documentation/uikit/reference/UIPageViewControllerClassReferenceClassRef/UIPageViewControllerClassReference.html

    This will have the behavior of "pulling" in the side view controllers vs. "uncovering" them.

    EDIT 2: example per request

    The only real complicating requirement you have is that the same view controller is used for both left and right. That means we have to track where the view controller is being presented so that we can correctly manage our data source. Without this requirement we could just back our data source with an array and derive next/prev from that.

    First, the storyboard. The storyboard has three view controllers: 1) the UIPageViewController, which I've subclassed as TSPageViewController. Don't forget to set the page controller transition-style property to 'scroll'. 2) the "center" view controller, and 3) the "side" view controller. For center and side I've set the storyboard ID of each to "center" and "side", respectively. For this sample, both the center and side controllers are plain vanilla UIViewControllers, and I've set their view backgroundColor's to tell them apart.

    enter image description here

    Second, the page view controller:

    .h

    @interface TSPageViewController : UIPageViewController
    @end
    

    .m

    @interface TSPageViewController () <UIPageViewControllerDataSource>
    @end
    
    @implementation TSPageViewController
    {
        UIViewController* _side;
    
        UIViewController* _center;
    }
    
    - (void) viewDidLoad
    {
        [super viewDidLoad];
    
        self.dataSource = self;
    
        _side = [self.storyboard instantiateViewControllerWithIdentifier: @"side"];
        _center = [self.storyboard instantiateViewControllerWithIdentifier: @"center"];
    
        [self setViewControllers: @[_center]
                       direction: UIPageViewControllerNavigationDirectionForward
                        animated: NO
                      completion: nil];
    }
    
    - (UIViewController*) pageViewController:(UIPageViewController *)pageViewController viewControllerAfterViewController:(UIViewController *)viewController
    {
        if ( viewController == _center )
        {
            _side.title = @"right";
            return _side;
        }
    
        if ( viewController == _side && [_side.title isEqualToString: @"left"] )
        {
            return _center;
        }
    
        return nil;
    }
    
    - (UIViewController*) pageViewController:(UIPageViewController *)pageViewController viewControllerBeforeViewController:(UIViewController *)viewController
    {
        if ( viewController == _center )
        {
            _side.title = @"left";
            return _side;
        }
    
        if ( viewController == _side && [_side.title isEqualToString: @"right"] )
        {
            return _center;
        }
    
        return nil;
    }
    
    @end
    

    Again, the only thing here that's special is the tracking of the whether the side controller is currently "left" or "right". This implementation has an issue in that it relies on the behavior of the UIPageViewController to not "page ahead" and cache view controllers (if it did, our logic would get confused). So you might want to consider a more robust mechanism to track which side the view controller is currently on. For that you'd likely have to introduce your own swipe gesture recognizer and use the data from that to drive tracking left/right.

    If you can toss your requirement of using the same view controller for left and right, then you can have separate left/right/center controllers, stored in an array, and return next/prev controllers based on what you see in the array. Much easier and more robust!