How to present a view controller on top of a UISplitView Controller – Part 1
Since its introduction in iOS 5, our good friend the UISplitView Controller has always had a really annoying habit: it has to be the root view controller in our apps. This means that it cannot be presented from any other view controller, nor can the split view controller present other view controllers.
This sucks because 99% of all apps probably need to present a user choice overlay at some point during the lifetime of an app. While some apps may get away with showing a Popover on iPad, many apps would be better off if we could present something like a proper form sheet as pictured in the image above. However, by Apple’s definition, that’s just not possible with the split view controller.
Or is it…?
In this screencast I’ll show you how to make it appear as if we could present another view controller over a UISplitView Controller. We’ll employ a bit of magic to create a great user experience, and it’s not really difficult either. The whole thing works on both iPhone and iPad with no extra work, and it works with apps in Slideover Mode too.
At the bottom of the article I’ll show you the code snippets to make this magic happen, together with a fully working demo project.
Enjoy!
Code Snippets
The app is based on the Xcode Master/Detail template. Aside from hooking up two buttons to present and dismiss the overlay, all methods are conveniently called in AppDelegate. We need three methods in total.
The first one will create a screenshot of whatever is currently on screen and return it as a UIImage:- (UIImage *)grabScreenshot {
// create graphics context with screen size
CGRect screenRect = [[UIScreen mainScreen] bounds];
UIGraphicsBeginImageContext(screenRect.size);
CGContextRef ctx = UIGraphicsGetCurrentContext();
[[UIColor blackColor] set];
CGContextFillRect(ctx, screenRect);
// grab reference to our window
UIWindow *window = [UIApplication sharedApplication].keyWindow;
// transfer content into our context
[window.layer renderInContext:ctx];
UIImage *screengrab = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return screengrab;
}I’m explaining how this method works and what it does in this article.
The next two methods need to be public, so let’s make sure their signature appears in our AppDelegate.h file, anywhere before the @end:- (void)showOverlay;
- (void)dismissOverlay;Back in our AppDelegate.m file, here’s the first method:- (void)showOverlay {
// grab a screenshot
UIImage *screenshot = [self grabScreenshot];
// create a new view controller with it
UIViewController *underlay = [[UIViewController alloc]init];
UIImageView *background = [[UIImageView alloc]initWithImage:screenshot];
underlay.view = background;
// grab the overlay controller
UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"Main" bundle:nil];
UINavigationController *overlay = (UINavigationController *)[storyboard instantiateViewControllerWithIdentifier:@"Overlay"];
overlay.modalPresentationStyle = UIModalPresentationFormSheet;
// swap the split view
self.splitView = (UISplitViewController *)self.window.rootViewController;
self.window.rootViewController = underlay;
// present the overlay
[underlay presentViewController:overlay animated:YES completion:nil];
}Here we grab a screenshot using our previous method and create a brand new view controller with it, using the screenshot as a background. Because this is a standard UIViewController, we can present another view controller over it.
While the screenshot is one ingredient to our magic, switching root view controllers is the other: we switch out the split view for our standard view controller (the “fake split view”) using self.window.rootViewController. This is only possible from the AppDelegate because it has access to the main window of our app. Switching is instantaneous and – as long as the content is the same – invisible to the human eye. Before we do this, we’ll grab a reference to the split view so we can bring it back in our next method.
Our third method will dismiss the overlay again:- (void)dismissOverlay {
// dismiss the overlay
[self.window.rootViewController dismissViewControllerAnimated:YES completion:^{
// bring back the split view
self.window.rootViewController = self.splitView;
}];
}Here we dismiss the overlay and swap back to the split view controller we’ve grabbed a reference to earlier. We’ll do that in the completion block to make sure the animation has finished so nobody will notice what we’re doing.
To finish off the magic presentation, we’ll call the showOverlay method from our master view controller with a 0.2 second delay. This will allow the button animation to finish before we take the screenshot, otherwise our app will take a capture with the “depressed” button. That’ll look unhandsome when we switch back to the real split view.
Here’s how we do this “delayed firing”, via two methods in our MasterViewController.m file:# pragma mark - Split View Methods
- (void)showOverlay {
// wait a moment before taking the screenshot
[NSTimer scheduledTimerWithTimeInterval:0.2 target:self selector:@selector(showOverlayDelayed) userInfo:nil repeats:NO];
}
- (void)showOverlayDelayed {
AppDelegate *appDelegate = [UIApplication sharedApplication].delegate;
[appDelegate showOverlay];
}The first method is called when the user presses the actual button. All it does is wait for 0.2 seconds using an NSTimer. When the wait is over, it’ll call the second method, which in turn asks the AppDelegate to perform our showOverlay method.
The end result is a seamless user experience, and it appears we’re presenting the overlay right over our split view. Is this cool or what?
Demo Project
Here’s the full project I’ve built in the screencast:
https://github.com/versluis/Screw-The-Split-View
Watch the full course in one convenient playlist:Catch this episode on my iOS Dev Diary Podcast:
