UIModalTransitionStylePartialCurl with UITabBarCon

Question

This question has been asked a lot e.g. here but as far as I can see is yet to be answered in full.

I have a UITabBarController with a UINavigationController as the root vc for one of the tabs, which itself has a MKMapView as its root vc. The behaviour I want is for the map to partially curl upwards, while leaving the tab bar in place (similar to the Maps app).

So far all I have managed to get working is for the whole view to curl, which isn't as nice.

Solutions I have seen are to set the hidesBottomBarWhenPushed property to NO, which would make sense however this doesn't seem to work, (unless I am doing something wrong).

For clarity, my code is as follows:

MyVC *aView = [MyVC init];
aView.modalTransitionStyle = UIModalTransitionStylePartialCurl;
aView.hidesBottomBarWhenPushed = NO;

For the presenting part, I have tried the two alternatives below, neither of which seem to work:

[self presentModalViewController:updateStatus animated:YES];
[[self navigationController] presentModalViewController:updateStatus animated:YES];

Any help much appreciated.

Answer 1

Tim Arnold's response worked great for me, thanks!

One trap to watch out for: your modal page-curl transition will take over the whole screen if your content view controller is added as a child of the container view controller. You could just not add it as a child, but then none of the view lifecycle methods will get called on your content controller (e.g. viewDidLoad, viewWillAppear), which could be a problem.

Fortunately, there is a way around this. In your container controller:

• Add your content controller as a child in viewDidLoad
• Remove it as a child in viewDidAppear
• Re-add it as a child in viewWillDisappear.

That way, your content controller gets its lifecycle methods called, while still being able to do a modal page-curl transition without taking up the whole screen.

Here is the entire code of a bare-bones solution:

@interface XXContainerController : UIViewController
@property (strong, nonatomic) UIViewController *contentController;
@property (nonatomic) BOOL curled;
@end

@implementation XXContainerController

@synthesize contentController = _contentController;
@synthesize curled = _curled;

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.contentController = [self.storyboard
        instantiateViewControllerWithIdentifier:@"SomeControllerInStoryboard"];

    // Add content controller as child view controller.
    // This way, it will receive all the view lifecycle events
    [self addChildViewController:self.contentController];
    self.contentController.view.frame = self.view.bounds;
    [self.view addSubview:self.contentController.view];
    [self.contentController didMoveToParentViewController:self];    
}

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];

    // Remove the content controller as child view controller.
    // This way, the modal page curl transition will
    // not take over the whole screen.
    // NOTE: need to wait until content controller has appeared
    // (which will happen later).
    // Achieve this by running the code at the end of the animation loop
    [UIView animateWithDuration:0 animations:nil completion:^(BOOL finished) {
        [self.contentController removeFromParentViewController];
    }];
}

- (void)viewWillDisappear:(BOOL)animated
{
    [super viewWillDisappear:animated];

    // Add the content controller as child view controller again
    // so it receives the view lifecycle events
    [self addChildViewController:self.contentController];
}

- (void)setCurled:(BOOL)curled
{
    if (curled == _curled) return;

    _curled = curled;

    // Curl up the content view and show underneath controller's view
    if (curled) {
        // Note you can specify any modal transition in storyboard
        // E.g. page curl, flip horizontal
        [self.contentController
            performSegueWithIdentifier:@"SomeModalSegueDefinedInStoryboard"
            sender:self];

    // Uncurl and show the content controller's view again
    } else {
        [self.contentController dismissModalViewControllerAnimated:YES];

        // Have to do this, otherwise the content controller's view
        // gets messed up for some reason 
        self.contentController.view.frame = self.view.bounds;
    }
}

@end

Answer 2

I've scoured StackOverflow (and the Internet) for a solution to this problem. The question has been asked many times, but as you note, never sufficiently answered. Many solutions give an acceptable solution if it is unimportant whether, e.g., a lower toolbar curls up as well.

Others have provided a solution using UIView animations / CoreAnimation rather than UIModalTransitionStylePartialCurl as a modal transition style; this is at worst a solution not allowed in the App Store, and at best is not quite the same effect as one gets from UIModalTransitionStylePartialCurl (e.g. the shape of the curl is different).

None of these solutions have provided an answer that mimics Apple's solution in the Maps app (i.e., using UIModalTransitionStylePartialCurl but leaving an un-curled UIToolbar at the bottom of the screen).

I will continue in this tradition of incomplete answers, since you ask about a UITabBarController and my solution doesn't specifically address that case. It does, however, solve the problem I had, which was to get a half page curl with an un-curled toolbar at the bottom.

There must be a more elegant way to do this, but this is how I managed.

The rootViewController of my AppDelegate is a subclass of UIViewController, which I'll call TAContainerViewController. TAContainerViewController manages a) the actual contents of the screen (the "stuff to be curled"), TAContentViewController, and b) the contents "behind" the TAContentViewController (e.g. settings), which I'll call TAUnderCurlViewController.

My instance of TAContainerViewController had properties for a TAContentViewController and a TAUnderCurlViewController. The UIView that was my content was a subview of TAContentViewController's view property; likewise what the user sees under the curl is the view property of the TAUnderCurlViewController.

In the init method of TAContainerViewController I make sure to do the following:

    _underCurlVC.modalTransitionStyle = UIModalTransitionStylePartialCurl;

And to curl the contents to reveal under the page, I set up an action that calls this code:

    [self.contentVC presentModalViewController:self.underCurlVC animated:YES];`

where self is the TAContainerViewController, contentVC is an instance of TAContentViewController, and underCurlVC is an instance of TAUnderCurlViewController.

To dismiss the view, simply [self.contentVC dismissModalViewControllerAnimated:YES];.

Some strangeness seems to occur with the frame of contentVC when the modal view is dismissed, so I manually reset the frame when the modal view is dismissed.

I've posted a sample project with more details on Github. Hopefully someone can take this and turn it into a slightly more elegant solution, or expand it to work with a UINavigationController or UITabBarController. I think the trick is to pull the View Controllers out of the well-defined relationships in the Cocoa subclasses, so maybe subclassing those specialty View Controllers would do it.