• 10 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

J'ai tout compris !

Mis à jour le 04/02/2019

Create the launch screen

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Now that we have a nice spot secured on the home screen of our devices, the second thing we can quickly add to our accomplishments is a launch screen.

What’s the launch screen?

The launch screen is the very first thing that is displayed to the user while our application is being loaded by the operating system. It's then quickly replaced by the first view of our application.

How quickly is that?

Most of the time the launch screen gets a second or so to shine, and for some apps it's so quick that it's virtually impossible to take a screenshot. :waw:

The launch screen may not have any executable code. Rather, it's often a composition of static elements like images and text, or even a single image.

What should it look like?

There are a number of strategies for defining the content for the launch screen. A couple of  common ones are:

  • A basic branding screen. It may include a logo on a branded color background and maybe an app name and a tagline. Twitter is a good example of this approach.

  • A snapshot-like image that mimics the first view of the app. Once the app is loaded, the launch screen is replaced seamlessly by the interactive first view of the app, and, in some cases, without the user even noticing the difference. In other cases, it serves as a simplified snapshot of a view with dynamic content. Facebook is a good example of this approach. 

Twitter launch screen
Twitter iOS app launch screen
Facebook iOS app launch screen
Facebook iOS app launch screen

Let’s remind ourselves of our design for the launch screen:

FrameIT launch screen
FrameIT launch screen

Our design consists of the following:

  • The branded background: #07BEB8.

  • Logo/Icon (white on transparent background)

  • Name (white on transparent background)

Implementing the launch screen

Here we'll be working with a storyboard!

In your project you may see two files with the extension  .storyboard :

  • Main.storyboard - a storyboard to build the functionality of the app. More complex projects may have multiple storyboard files that implement the specific functionality of the app.

  • LaunchScreen.storyboard - a storyboard file dedicated to the launch screen implementation.

These are to visually construct the interfaces of our app using the visual components of the Interface Builder. To ensure that the app is going to a storyboard for the launch, let's make sure we have it selected in general app configuration:

Assigning LaunchStoryboard for launching
Assigning LaunchStoryboard for launching

Let's switch to the LaunchScreen.storyboard file:

Launch screen storyboard
Launch screen storyboard

There are 3 things we need to accomplish to implement our launch screen:

  1. Change the background color

  2. Add an image with the logo

  3. Add an image with the name

Managing colors

As per our app requirements, we have very specific colors to use in our application. We have the color codes handy and could always use them for color settings on a per need basis. To make it more efficient we can make it a part of visual aspects of the Interface Builder for our project.

Select the main view of the launch screen and click on the background color bar on the attribute panel:

Reveal Color Picker
Reveal Color Picker

It will reveal a color picker that incorporates different options to work with colors. Switch to the Color Palettes tab:

Xcode Color Palettes
Xcode Color Palettes

Here you can see a variety of preset colors grouped into palettes. Now we want to create one for FrameIT!

Click the settings wheel to the right of currently selected 'iPhone SDK' palette and select 'New' in the context menu:

Create new color palette
Create new color palette

That brings us to the new palette:

New color palette
New color palette

Now, all we need to do is name it and fill it with our custom colors!

To rename the 'Unnamed' palette, click the same settings wheel and choose 'Rename' option this time:

Renaming custom color palette
Renaming custom color palette

 And type 'FrameIT' as a new name:

Type new name
Type new name

And finally add all the custom colors we need for the project. Let's come up with the names for them - let's be fancy:

#07BEB8
#07BEB8
#EDF3F4
#EDF3F4
#5C6B73
#5C6B73
#B1B1B1
#B1B1B1

Tiffany

Clouds

Smoke

Dust

Now let's add them one by one to the new palette. Make sure the opacity is set to 100%, and have our colors handy in a different window beside your color picker window. Click the dropper icon and drag it over to one of the colors we need to add:

Drop the new color to the palette
Drop the new color to the palette

See? The white swatch in the bottom will take on the new color. Now click the  +  button by search input. The new color will be added to the palette. Repeat the procedure for all new colors:

New colors
New colors

Now select the default color that was added for us in the beginning - 'lightTextColor' and click  the -  button beside the search bar to remove it:

Complete color palette
Complete color palette

Before we move on, let's complete the final step! Select 'Tiffany' from the list you've just added to change the background color of our launch screen and close the color picker:

FrameIT background color
FrameIT background color

We are now prepared to reuse our custom colors throughout the project! And to get fully ready for the future, let's add the frame colors we are going to need within our app:

Frame color options
Frame color options

And here's how our palette should look like in the end:

FrameIT complete color palette
FrameIT color palette

Adding images

To implement our launch screen design we need to add 2 images: the logo and the name. We previously already added them to our assets and they are now available for us in the Media library.

Select both images and drag them onto the launch screen:

Add imaged to the launch screen
Add imaged to the launch screen

They now appear a bit oversized and misaligned. Let's resize and reposition them to satisfy the design. Before resizing the images, while both of them are still selected, adjust the 'Content mode' parameter in the Attributes inspector, setting it to 'Scale to fill'. Then resize each image by dragging the corners. Hold Shift button for proportional resizing. And finally adjust the positioning using the positioning guidelines that appear on the screen as you move the images around:

Launch screen with images
Launch screen with images

Time to test! Click Run and observe our launch screen appear in the simulator for a moment: :zorro:

FrameIT launch screen
FrameIT launch screen

Then it's quickly replaced by a boring empty screen - oh, well! We'll change that in the following chapters!

Let's Recap!

  • The launch screen is a static screen that appears when the app is launched on a device and stays on while the app is being loaded.

  • The launch screen is replaced by the first view of the app once the app has been loaded.

  • Creating a launch screen is done using LaunchScreen.storyboard.

  • Launch screen may contain static elements such as images and labels.

  • We can use the Color Palette tab of the interface builder to create a custom Color Palette for an app. 

Exemple de certificat de réussite
Exemple de certificat de réussite