The launch screen is a screen that shows while your app is loading—usually for a second or two. This training video shows why launch screens are important, and how to customize yours to match Apple's standards.
- View Offline
- [Instructor] In iOS 10, the launch screen is the screen that you see while your app is loading up. I'm here in Apple's Human Interface Guidelines, looking in the launch screen section. And here they have as an example, the launch screen and the first screen of an app. And if you look at the two, the launch screen is basically a static version of the first screen. There's no content in it. It doesn't have any text or images.
It just has the same user interface elements. So that enables the user the open up the app and have a smooth transition between the launching image and the actual application while it's running. A launch screen can be static images or can be created from a storyboard. The advantage of using a storyboard is that you can use pins, other features of storyboards, so that your app more easily matches what it looks like when it launches in every device, resolution, aspect ratio, et cetera.
Here in the human resource guides, Apple gives you some tips. The bold parts are the most important. It should look like the first screen of your application. It shouldn't have text, because we can't localize a launch screen. So you want to make sure that it doesn't have any text. They don't want you to make a flashy launch screen and they don't want you to advertise on the launch screen. So make sure you're following these rules if you want to get your app accepted when you submit it to the App Store. Though I can say I have seen apps on occasion that don't follow these rules and still make it in.
Even with that in mind, it's still best to follow Apple's guidelines just in case, because an app rejection is going to add a lot of time to the releasing of your application, usually a week or two. So keep that in mind. If you choose to go with a static image, here are the image sizes that you can use. I'm not going to cover that in this course, because I don't consider that the standard method for creating a launch screen, but you can find instructions here for doing that. So let's go back into Xcode, and let's set a launch screen.
So I've created a empty project from the master detail application template. And if we look at the storyboard, we have a Table View. Let's go to our Table View in the storyboard. And let's say we customize it just a little bit, just to give us a little bit of a challenge to overcome when creating the storyboard. So let's say we've selected our Prototype Cell, and I can see that it's selected in the document outline over here on the left. And let's say I stretch it out using the handle to be 80 points high.
Now, I can see that little W and H pop up above my cursor, but you can also see in the size inspector that the row height is set to 80. Now let's test the app and see what we get. I'm gonna make sure that I'm testing in an iPhone SE and then run the application. The default launch screen is just a blank white screen, so what we should see is that we had that blank white screen on for just a second, and then the Table View should fade in on top of that.
And there it is for about a second, and then the Table View fades in. Now, this would be, of course, more dramatic if we went to our launch screen and we changed the color of the background view. So we could select that view, change the background to a gray color, for example, and then test the app again. And then you can kinda see where the launch screen is very obviously and how jarring it is to switch from the launch screen to the actual app.
So let's make the launch screen match our application. Back in my launch screen storyboard, I'm gonna press Command + Z to just undo that change. So I want that white background there just like I had it before. Then I'm going to filter for a Table View. Now, a launch screen, keep in mind, is to create a mock-up of a layout. It is not to connect anything to code, so that's not going to work, so don't do that here. Drag out a Table View onto the screen, and then we'll just use the handles to stretch it out.
Fill this whole launch screen view right here. And then I'm going to add the pins by using the shortcut to reset to suggested constraints. That's Shift + Option + Command + Equals. That's going to add all those constraints. And then I wanna put this inside of a Navigation Controller, 'cause, remember, in the master detail application template, it's a Table View inside of a Navigation Controller. We can embed this in a Navigation Controller by going to Editor, Embed In, Navigation Controller.
So there's our Navigation Controller, and we have the Table View on the right. Now, if we were to test this right now, we would see that the size of the cells of the Table View switch after the launch screen. So we have the default cell sizes in the launch screen, and then the bigger sizes in the master. Now, if that changed between the launch screen and the main view of the app was too short for you, you can stop your app, tab over to the simulator, and actually delete the application just like you would any app on your phone.
So you hold your mouse button on it, click the X, confirm the deletion, and then press Shift + Command + H to simulate a home button press. And then you can actually test the app again from Xcode, and that's going to make the launch screen last a little bit longer, so you can see that the lines aren't exactly lined up. So we need to change them just like we did in the main storyboard file. So we'll stop the app, and I'm going to select my Table View, and in the attributes inspector, I'm going to have Dynamic Prototypes set up for Content and then click the up arrow to add a Prototype Cell.
Then I can select the Prototype Cell and adjust the size, either by dragging it or by going to the size inspector and setting the row height to 80 and then pressing Return on my keyboard to commit the change. At this point I should be able to test the app in the simulator. And the transition from launch screen to the actual application should be completely smooth. The only thing that should be different is that these words are added at the top of the screen. So remember, you want to create a custom launch screen for your application. It is not meant to be flashy.
It's not meant to be a commercial. It's meant to be a smooth transition from the user tapping to open your application to your application actually running. Apple advises you to just simply create what the user is going to see on their first screen as your launch screen, and you can do that through the file launchscreen.storyboard.
- Creating app icons and launch screens
- Distributing via iTunes Connect
- Testing with TestFlight
- Submitting an app to Apple