iOS Recipes - Matt Drance [6]
Figure 4. Multiple orientations on iPad
* * *
The solution so far performs a portrait-only transition, which is usually fine for most iPhone apps. iPad apps, on the other hand, are often expected to work in both portrait and landscape modes. Because UIViewController provides autorotation behavior for free and PRPSplashScreen inherits from UIViewController, supporting multiple orientations is fairly simple. We’ll start by creating an iPad-specific subclass of PRPSplashScreen that adds support for all orientations.
BasicSplashScreen/iPad/PRPSplashScreen_iPad.m
- (BOOL)shouldAutorotateToInterfaceOrientation:
(UIInterfaceOrientation)toInterfaceOrientation {
return YES;
}
This is the only addition this subclass makes; all the other behavior from PRPSplashScreen is unchanged.
The only thing left is to supply a new splash image. When supporting multiple launch orientations, you supply both portrait and landscape variants of your default image, and UIKit chooses the right one for you. However, your code has no way of knowing which image was used and therefore can’t choose the right one for your splash screen view. We could detect the device orientation from UIDevice or the status bar orientation from UIApplication, but there’s an even easier way. Since our goal is to keep the logo centered, we simply make a new splash image resized to 1024x1024 pixels. This size meets the maximum screen size in both orientations and will remain centered while also filling the screen, no matter how the device is rotated. It will even stay centered if a live rotation occurs before the transition. We include this image in the app and set it as the splash screen’s designated splash image, using the splashImage property defined by PRPSplashScreen.
BasicSplashScreen/iPad/AppDelegate_iPad.m
- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
[self.window addSubview:self.splitViewController.view];
UIImage *splash = [UIImage imageNamed:@"splash_background_ipad.png"];
self.splashScreen.splashImage = splash;
self.splashScreen.showsStatusBarOnDismissal = YES;
self.splashScreen.modalTransitionStyle =
UIModalTransitionStyleCrossDissolve;
[self.splitViewController presentModalViewController:splashScreen
animated:NO];
[self.window makeKeyAndVisible];
return YES;
}
The rest of the initialization code is identical to the iPhone variant. Run BasicSplashScreen for the iPad, and observe the seamless transition in both portrait and landscape modes, as you can see in Figure 4, Multiple orientations on iPad . We’ve now produced an easily reusable basic transition from our stylized default image to our app’s initial UI, on both the iPhone and iPad.
Recipe 2 Stylize Your Splash Screen Transition
Problem
It’s one thing to create a clean splash screen transition, but sometimes it would be nice to go beyond a basic fade and give the transition more finesse.
Solution
In Recipe 1, Add a Basic Splash Screen Transition we discussed the importance of a splash screen transition and how it makes a world of difference in the user experience. In that first recipe we were primarily concerned with establishing a clean structure to implement the transition, but the fade transition, though elegant, was the simplest we could use. Although we still want this introduction to be smooth, we can produce some attractive alternatives by exploring some masking techniques combined with Core Animation.
As in the previous example, in order to transition the default image offscreen, first we need to present a view that displays the default image, and then we need to gradually remove that view, revealing the primary