How can I make an iPhone launch image easily?

Question

According to Apple's guide line, an iPhone app's launch image/splash screen should be a prerendered static image that looks similar to the application's first screen.

Here are some links to Apple's documentations about this:

1) Launch images, iOS human interface guideline:

https://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW5

2) App Launch (Default) Images, iOS app programming guide:

https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/App-RelatedResources/App-RelatedResources.html#//apple_ref/doc/uid/TP40007072-CH6-SW12

I just wonder how can I create such launch image easily. In most cases, it seems the launch image should be a combination of empty status bar + navigation bar + empty table/view + tab bar, and each of them should be rendered with iOS's predefined color scheme.

But I cannot find any documentation about how I should do this and cannot find any entry in Xcode which seems related with this. Is there any Apple's official tool to render the launch image easily? Or do all the app developers simply use some mockup iPhone controls + Photoshop to do this?

Any help is appreciated. Thanks.

Answer 1

It would not be much of a problem, do compose a static XIB file of your main screen (empty tab bar, empty navigation bar) or whatsoever. Just the backgrounds without any elements or labels placed on them.

You can launch this "empty" application in the iPhone Simulator which has a built-in screenshot function. With additional software like the iPhone Simulator Cropper you can crop the image to the preferred size.

That would be my approach to do this.

Answer 2

Since I find it cumbersome to remove content in the nib file I use a code approach.

The code is different for each project. But you'll get the idea.

// uncomment to take a screenshot for the launch image
//#define SCREENSHOTMODE 

- (void)viewDidLoad {
    [super viewDidLoad];
    /* regular stuff */
#ifdef SCREENSHOTMODE
        self.navigationItem.leftBarButtonItem = nil;
        self.navigationItem.rightBarButtonItem = nil;
        self.title = nil;
        [self deactivateContentForSubviewsInView:self.view];
#endif
}


#ifdef SCREENSHOTMODE
- (void)deactivateContentForSubviewsInView:(UIView *)contentView {
    for (UIView *aView in contentView.subviews) {
        if ([aView isKindOfClass:[UILabel class]]) {
            [(UILabel *)aView setText:nil];
        }
        else if ([aView isKindOfClass:[UITableView class]]) {
            [(UITableView *)aView setDataSource:nil];
        }
        else if ([aView isKindOfClass:[UIToolbar class]]) {
            [(UIToolbar *)aView setItems:nil];
        }
        else if ([aView isKindOfClass:[UIImageView class]]) {
            [(UIImageView *)aView setImage:nil];
        }
        else if ([aView isKindOfClass:[UIView class]]) {
            // i often put views in UIViews to group them
            [self deactivateContentForSubviewsInView:aView];
        }
    }
}
#endif

If you only have a handful of objects you can just remove the content of your UI-elements directly. Without loops.

Answer 3

It seems there is no such tool built in Xcode for this. I ended up with a method just like Sebastian Wramba said above with a little difference. I used Xcode 4.2 storyboarding for UI design of my app, here is my steps to do this in Xcode 4.2 storyboard:

1. Drag an empty view controller from the "Object library" to the storyboard

2. Add empty navigation bar/table view/tab bar/other components to the new scene above according to your initial screen layout

3. Click the view controller in the storyboard, in the "Attributes Inspector" of the view controller, there is a checkbox called "Initial Scene: Is Initial View Controller". Check that.

4. Launch the app in Xcode, your app's initial screen will be set to the one you just created. Take a screenshot and use that as the launch image.

5. Set the initial scene back to your real initial scene by checking its "Initial Scene" checkbox.

I will still mark Sebastian Wramba's solution as the answer to my question since the general idea is the same, just create a dedicated UI in Xcode for it.

Answer 4

The easiest solution for your needs - launch your application, take a screenshot of the initial state (home+power button on the device), and voila! You have yourself a nice png file containing your initial app state with Apple's color scheme as needed.

Answer 5

I ifdef out my data source in a debug build so the app starts up empty, then build and run it, and take a screenshot of the empty app. To suggest that the user wait a bit, I might use photoshop to overlay my trademark image or some splash logos partially blocking the most obvious control. If it's an entertaining app, I might also animate a copy of those logo icons away when the app starts running.

Answer 6

Easier even than that. Pull up the image you want to put as your splash screen on your phone. Save the image to your camera roll. Open the image in your camera roll. Tap on the image to get a full screen view. Take a screen shot. Send that image, via email to your computer. Change the ending of the file from PNG to png, it sucks I know :) Add the image to your Launch Image area. Walla! ;)

Answer 7

You can use iOS 8 launch screen XIBs to generate static launch images using the simulator, which you may have to do if you're supporting iOS 7 or earlier.

1. Create a launch screen XIB.
2. Select the project itself in Xcode's project navigator and then under General > Deployment Info change the Main Interface field to your launch screen XIB. This step will leave the launch screen XIB in the Simulator so you have time to take a screen shot in step 4.
3. Start your application in the Simulator.
4. Once your launch screen appears in the Simulator, select File > Save Screen Shot.

Repeat this process for each device you need to support. You may have to use an image editor to remove the status bar from the screen shot.

Answer 8

If you need a simple launch screen with a navigation bar and a tab bar for example, my suggestion is to use launch files. In iOS 8 and later, you can create a XIB or storyboard file instead of a static launch image.

You can read more about that in the next link: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/LaunchImages.html

Answer 9

I Set all the above. however it didn't work when debugging again. I remove the app from the simulator and iPhone and worked straight away