How to Add Splash Screen in iOS Application

The Splash Screen is the thing that you will see for a few seconds when you open a mobile app. The Splash Screen is useful in many ways that could improve user experience as well as strengthen the mobile app brand. It shows users that they opened the right app, and is a good excuse to show off the app logo.
According to Apple, a Splash Screen could also give an impression to users that the app is fast and responsive. So if you have an iOS app, you can consider adding a Splash Screen too.

In this tutorial in our Cordova series, we are going to show you how to create a Splash Screen. Make sure that you have followed our previous posts on this where we:

Set a project for mobile development with Cordova,
Built a basic UI with jQuery Mobile, and
Adding the app icon.

Recommended Reading: Two Ways To Change Your Android Boot Animation

Getting Started

First, we will see the sizes required to create the Splash Screen. Similar with adding the app icon, the Splash Screen image sizes will vary in accordance to the iOS version that the app will support. As an example herein, we will need three image sizes; see this table below for the detail.

Size/Platforms	iOS 6.x	iOS 7.x
320×480	✔
640×960	✔	✔
640×1136	✔	✔

This table is simplified by calssifiying the image size within the iOS version supported. Since, in this table, we assumed that iOS 7 is only installed in the iPhone with Retina display. So, there we can see iOS 7 requires only the highest image size: 640×960 and 640×1136, which will be used in iPhone 5 and 5c that has screen size of 4 inches.
Once we have figured out the sizes, we can start creating the Spalsh Screen images. You can freely use whichever application that you have familiar with to create the images. Save the images as PNG, and name them in the following convention.
These are the standard filenames that Cordova as well as Xcode use to pick-up the Splash Screen image. Following this convention will avoid us from extraneous setup in Xcode, in order for it to find out the customized file names.

Here is my Splash Image that I’ve created with Photoshop.

Adding the Splash Screen

Now, it is time to add the Splash Screen image to our app. To do so, move your images to this folder: {TheProjectDirectory}/platforms/ios/{TheAppName}/Resources/splash. In Xcode, compile the app by clicking the Play button; the app will be launched in iPhone Simulator and you should see the Splash Screen is shown for a few seconds before we fully enter to the app.

Final Thought

To sum all up, we now have the app content (albeit it’s a dummy content), two menu navigation at the right with a sliding panel ala Facebook, we also have added icon, and lastly here we’ve just added the Splash Screen. Our app is nearly complete and we are now very close to finish and launch our app.

Sumber dan gambar di hongkiat.com