Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 886
StuartM Avatar asked Oct 12 '13 13:10

StuartM


People also ask

How do I move the view controller?

in interface builder control click on your button and drag the blue line that appears to the second view controller. The second view controller will highlight blue. You can release and the button is connected.

What are the responsibilities of view controller?

Each view controller manages a portion of your app's user interface as well as the interactions between that interface and the underlying data. View controllers also facilitate transitions between different parts of your user interface.

What is the difference between view controller and view?

A view controller is not drawable to the screen directly, it manages a group of view objects. View controllers usually have a single view with many subviews. The view controller manages the state of these views. A view controller is smart, and it knows how to interact with your application.


2 Answers

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!

like image 111
TomSwift Avatar answered Oct 25 '22 08:10

TomSwift


for iOS6+:

I'd be inclined to use https://github.com/pkluz/PKRevealController and just set both left and right viewControllers to be pointers to a single viewController.


for iOS7+:

I think you should be looking into custom UIViewController transitions.

https://github.com/ColinEberhardt/VCTransitionsLibrary

http://www.teehanlax.com/blog/custom-uiviewcontroller-transitions/

There is a good WWDC 2013 video on this subject entitled "Custom transitions using view controllers", it's session 218.

like image 42
ader Avatar answered Oct 25 '22 08:10

ader