Master the building blocks of an app: code architecture, UI elements, animations and interactions

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.

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.

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. 

Let’s remind ourselves of our design for the 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:

Let's switch to the LaunchScreen.storyboard file:

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:

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

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:

That brings us to the new 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:

 And type 'FrameIT' as a 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:

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:

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:

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:

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:

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:

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

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:

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:

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

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.