Launch screens are the screens that show when an app is not running in the background and the user taps on the app's icon. They are meant to be an indicator of what the user will see when the app is done launching. In this movie, see how Apple encourages developers to develop launch screens, and how to make your own custom launch screens that follow those guidelines.
- [Voiceover] A launch image is the image that shows right when a user taps on an application. When you design a launch image, Apple has some very specific guidelines for you to follow. And here I am in iOS Human Interface Guidelines and I'm in the Icon and Image Design section under Launch Files. So, if you want to check this out you can find it here. So, here it says, "Design a launch image that is identical to the first screen of your app, except for text." And the reason why we don't wanna have text is because the launch image is static.
So, the text won't be localized. So, if you're going to develop and app for multiple languages then you're going to see only the language that you design the static image for. So, for that reason exclude any text. You also don't want any user interface elements that might change. So, as an example Apple has provided their Settings launch image and the Weather launch image. Now, when you look at this you might notice that they look kind of boring. And that is the point. If you read right here, "If you think following the guidelines will result in a plain, boring launch image, you're right.
Remember, the launch image doesn't provide you with an opportunity for artistic expression." So, this is just to make it feel like your app is launching quickly. So, you're just recreating your opening image of your application minus any text or any other user interface elements that will change. So, how do we actually create the launch image? Let's go over to Xcode and find out. You can create your launch image in the file called LaunchScreen.storyboard. And in my main .storyboard I have something really simple.
I've added a navigation controller to a view, and the view has a dark gray background, some text, and the navigation controller has a title in it. I've changed the color of the background for a particular reason. Notice that the launch screen is white. This is the default launch screen. And my main storyboard is gray. So, we can see that white changed to gray so we can see where the launch screen is working or where it's not working. So, I'm going to run the app. And I want you to pay attention when the phone first launches, we have that white screen and then it transitions into our dark gray background and the black title.
So, our goal here is to just create the launch screen, and just remove this title, and remove this text, so that the launch screen just looks like this without the text. So, I'm going to stop the app and head over to my launch screen storyboard. I'm going to select my view. So, I'm just clicking right in here. And then I'm going to set my settings in the Utility area. So, I'm going to hide the Document Outline and then change the background color in the Attributes Inspector to dark gray color. And before I add the label, I'm actually gonna wrap this in a Navigation Controller.
So, I'm going to select the View Controller right here, and then go to Editor, Embed In, Navigation Controller. And there's my Navigation Controller. And if I wanna change the settings of this, I need to make sure that I click on that Navigation Bar. And if it's not selecting the bar, then one thing I could do is just open up the Document Outline, and then click on the Navigation Bar right here so I can select the bar and adjust it's settings. Now, in the Attributes Inspector I'm going to change the style to Black. And I had this Translucent box checked.
And that is good enough. So, now let's go to the right. And here's this View Controller. And we have this black translucent bar. We don't wanna double-click and put anything in the title. We don't wanna add the label because this is the launch screen. So, what we should see when we launch the app is that it looks exactly the same minus the text. So, we'll run the app and see if that works. Here's our launch screen, and then it transitions with the text. And it looks good.
So, when you create your launch screens, all you wanna do is recreate the first screen of your application minus any text or any user interface elements that are going to change.
Interested in developing for Apple Watch or Apple TV? Get a sneak peek in Chapter 9. The course wraps up with a look at the submission process for the App Store.
- Installing Xcode and the iOS SDK
- Creating a simple iOS app
- Creating a basic interaction with a button
- Choosing an object as a first responder
- Creating a user interface with Interface Builder and Auto Layout
- Working with sliders and progress bars
- Creating views to show images and web pages
- Developing responsive layouts with size classes
- Understanding the iOS architecture
- Loading data in table views
- Transitioning between views
- Developing for the iPad, Apple Watch, and Apple TV
- Submitting apps to the App Store