Thursday, May 28, 2015

A Simple Swift iOS App from Start to Finish - Customizing the Launch Screen

Introduction

This is part of a series of articles describing the creation of a simple iOS app. A complete list of the articles is included in the first part A Simple Swift iOS App from Start to Finish - Introduction.

I have set up a web site for the finished app at http://DaysWithoutThings.com and you can download it free directly from the app store:




In this article I am going to customize the launch screen. In previous versions of iOS the launch screen was just an image that would be imported into Xcode in much the same way as the App Icons. A different version of the image was required for every resolution and orientation of every supported device. In Xcode 6 and iOS8 this has been simplified by replacing the image files with a Interface Builder XIB file containing a view definition.


The Default Launch Screen

The default launch screen created by the Single View Application template is just a white view with two text labels. One label contains the  name of the app and the other contains a copyright messages.



Following Apple's guide lines I want my launch screen to look similar to my main view.
To do this I just need to make three changes:

  • I want to set the background color to light blue.
  • I want to split the App's title over three lines. 
  • I want to center the title vertically.


Before I make any of those changes I want to temporarily modify the way my app loads so the the launch screen stays visible for a few seconds so that I can check my changes work as intended. It will also make it easier to take screenshots of the Launch Screen in the iOS Simulator.


Keeping the Launch Screen Visible Longer

When an iOS app loads the launch screen is displayed until the AppDelegate's didFinishLaunchingWithOptions method returns. This method is already defined by the AppDelegate code provided by the project template. All I need to do is add a call to the sleep function to pause my app in this method.

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
    // Override point for customization after application launch.
    sleep(10)
    return true
}

Changing the Background Color

To change the background color I open the Launch Screen xib file in Interface Builder and select the view component. I can then change the Background in the Attributes inspector.






Splitting the Title over Three Lines

To split the title over three lines  select the title's label in Interface Builder and then change its Label attributes in the Attributes inspector. Firstly I change the 'Lines' Attribute to 3 and then I insert line breaks into the label text using Control-Return.




This does not look right yet and a warning circle has appeared next to the view in the Component navigator. When I click in the yellow circle I see a warning that I have a misplaced view.

This has a yellow warning triangle next to it. When I click that it gives me some options to fix the problem.




I am going to use the default option to 'Update Frame'. When I click on 'Fix Misplacement' the title is displayed properly and the warning disappear.





Centering the Title Vertically

To Center the title label I need to modify its 'Center Y Alignment' constraint. Specifically I need to select that constraint and then change its 'Multiplier' in the Attributes inspector from 1/3 to 1/2. This should then move the center of the title label from a third of the way down the view to half way.




Wrapping up

When I run my app now I see the finished launch screen.




Before moving on I am going to comment out the call to sleep in the didFinishLaunchingWithOptions method and test my app in a few different simulated devices. I will run it twice in each simulated device as the iOS Simulator has a delay when switching from one simulation to another and this often hides the launch screen. 
Once I am sure it is all working I will commit the changes I have made to the Source Control repository.

In my next article  I will move on to creating the Data Source with Core Data.

Next:       A Simple Swift iOS App from Start to Finish - Creating the Data Model

No comments:

Post a Comment