iOS Tutorial – Creating a Splash Screen

The first thing you see with a lot of iPhone apps, when they launch, is a splash screen.  So creating our own splash screen will be a great place to start off this series of tutorials.

Splash screens are the “title page” of your app. While, at times, it will display the name of the app, more often than not, it displays the company that created the app. Or it’ll do both. You may have also noticed that several splash screens will allow you to tap to skip ahead to the next screen. Unless, of course, the developer wants you to see their logo for a certain period of time, or the screen is being displayed as a “curtain” while the app gets loaded in the background.

In this first of many tutorials, we’re going to demonstrate how to create a simple splash screen that appears for a certain length of time.

(Note: In future tutorials, we will be adding more functionality to our apps.)

Let’s get started, shall we? (Note: If you’ve already started an app and you want to add a splash screen at any time, start with step 7)

1. With your favorite image editor, create a 320×480 pixel image and draw anything you like on it.

2. Save it as Default.png. (The name must be Default.png with a CAPITAL D. The iPhone Simulator doesn’t care about the capital, but the actual device does.)

3. Open Xcode.

4. Create a new View-based Project. (This can be done with any type of project.)

5. Name it SplashScreen. (You’ll notice in this tutorial, and in all others following it, we will be naming our projects so that we can easily reference them later on if need be.)

6. (After naming your file, you will be asked where you would like to save your project.) Chose a location and click Create.

7. (On the left side, you should see all the files in your project, as well as some folders [these are called groups].) Click to highlight Supporting Files.

8. Click on the File menu and select Add Files to “SplashScreen”.

9. Browse to the default.png file you just created.

10. Make sure Copy items into destination group’s folder (if needed) is checked.

11. Click Add.

12. Click the Run button at the top of the window.

13. Click the Stop button to end the simulation.

Congratulations! You now have a splash screen that appears for approximately 5 seconds then goes right into your app. I know! I was surprised about how easy it was as well! And we didn’t have to write on piece of code. The next time you open the app, it may disappear quicker. The duration depends on how quickly you app loads.