I have recently started to play around with Swift programming as I always wanted to code something for iOS, but always ended up either lacking the time to do it, or developing for Android, a platform with which I am more experienced since my university days.
One of the most confusing things for me, coming from Android development and its interfaces in plain XML, was getting used to Interface Builder in Xcode, finding the elements I need, ultimately, getting the storyboard files to do what I want them to do. Also, navigating the Xcode project settings is no easy task for a beginner, so I am still finding roadblocks every time I try to do the most simple tasks.
One of these tasks was adding a launch screen to the iOS app. Apple describes launch screens this way:
A launch screen appears instantly when your app starts up. The launch screen is quickly replaced with the first screen of your app, giving the impression that your app is fast and responsive. The launch screen isn’t an opportunity for artistic expression. It’s solely intended to enhance the perception of your app as quick to launch and immediately ready for use. Every app must supply a launch screen.
Initially, I thought that a launch screen had to be a launch image, but then I realized that you can also use a storyboard file as a launch screen, which is a way more convenient option. Using a storyboard file is also the recommended option:
Using an Xcode storyboard is the recommended approach, as storyboards are flexible and adaptable.
So how do you add a launch screen to your iOS app?
1. Opening the launch screen storyboard
- Open your project in Xcode
- Expand <your project> in the file menu on the left
- Expand the <your project> folder
You will now see a list of all the files included in your project, including a file named LaunchScreen.storyboard:
For this tutorial, we are going to simply add a single image to this storyboard file just to see how things work, but you are obviously free to customize your launch screen the way you prefer.
2. Adding an image to LaunchScreen.storyboard
Click on the LaunchScreen.storyboard file to open it. Then, on the bottom right menu, look for the Image View element:
Now drag the Image View element inside your storyboard:
In this tutorial, I am going to use a free launch screen template offered by elistone on GitHub.
First of all, let’s add the image to the project files:
- Select the Assets.xcassets folder in your project
- Drag your image inside this folder:
Go back to LaunchScreen.storyboard and select the Image View element inside the View Controller. Select the object properties from the menu on the right and select your image from the Image dropdown menu:
Now we only need to resize this Image View element so it covers the whole screen. Click on the Image View Element and drag its corners so it covers the whole View Controller. You should end up with a storyboard that looks like this:
3. Telling Xcode to use this storyboard as the launch screen
The only thing left to do is to tell Xcode that it should use this storyboard file as the launch screen. You can do it in the project settings:
- Click on your project name
- In the window that appears, select the General tab
- Scroll down to the section App Icon and Launch Images
- Select LaunchScreen.storyboard from the Launch Screen File dropdown menu
You can now run the app in the simulator and you should see your launch screen right before your main storyboard file (which is still empty if you are using an empty project like I am doing) is loaded.
Here is a video that shows the first run of the app with the launch screen:
In this tutorial I covered how to add a launch screen to your iOS app. Apple recommends using storyboard files rather than image files for this, so this tutorial focused on this method, even though using separate image files is also a supported option.
You can add a launch screen to your iOS without writing a single line of code: everything can be done inside Interface Builder. This means that it doesn’t matter whether you are using Objective-C or Swift, this tutorial will show you how to implement this feature in both case. Once you know where to look for things, this becomes a very simple and quick thing to do.