A Simple Swift iOS App from Start to Finish - Creating the Main View

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 implement the main view of my app by customizing the View provided The Single View Application template. At this stage all my main view will contain is a single 3 line label. The app will set both the label contents and the background color of the view. I will eventually extend this view with a graphical representation of the number of days but I will leave that for a later article.

Creating a View in Xcode 6's Interface Builder

In Xcode 6 the project template option to create a Universal app create a single storyboard file which include a single square view.

Adding the Label

I am going to add is one Label control and set it to fill the whole view.

I can add the label by dragging it from the Object Library to the view. If I just click on label in the object library and leave the mouse pinter over it after a couple of seconds a popup description of the label control appears.

Once I have dragged the label onto the view I'm going to use the attributes inspector to change its background color so that I can see the boundary of the label clearly.

To make the label fill the view I am going to use the Pin option to set the label's offsets to all four sides of the view to zero. As I set the offsets in the 'Spacing to nearest neighbor' section the title of the button at the bottom of the popup changes to reflect how many constraints I have set. Constraints are only counted as set after I move the focus to another field so once I have set all four I have to click on another field in the window to make sure it is going to add all four constraints.

I am going to uncheck 'Constrain to margins' checked that the label fills the whole view. When I click 'Add 4 constraints. I see a bunch of alarming orange lines and icons and a warning message saying "Frame for "Label" will be different at run time."

I can fix this by clicking the orange circle next to Main Display View Controller in the storyboard's object navigator.

This displays the detail of the warning with an orange triangle next to it.

Clicking the orange triangle opens a popup that gives me the option to either change the frame to match the constraints or change the constraints to match the frame. I'm going to take the first option so that the frame is matched to the constraints I just set.

My label now fills the whole view, excluding the margins, and all the warnings have gone.

Configuring the Label

I want the text of my label to be centered in the view and split over three lines so that it looks like:

0 days

without

some thing

To achieve this in Interface Builder I just need to change a few of the labels properties in the Attribute Editor.

Firstly I change the alignment to centered.

Secondly I change the number of lines to three and change the default text to three lines using Control+Return to add line breaks to the text I type.

Finally I'm going to make the font larger so that my label text fills up more of the view. I want the font to be as large as possible regardless of the device it the app is running on. To achieve this I'm going to set the font size to a huge default of 200 points and set the AutoShrink attribute to shrink the font to fit the screen. Setting the value to 'Minimum Font Size' seems to work best.

The view now looks like this:

Adding Margins

This looks ok except the text is very close to the edge of the screen. To fix this I am going change the horizontal constraint to be relative to the margins and then set the background color of the view to match the label.

Wrapping up

The initial UI for my main view is now complete. Before moving on I am going to run my app in the Simulator with a few different device profiles to check that the text scales properly and to make sure it still compiles and then commit it to source control.

In my next article  I will  create the UI for the List View.

Next:       A Simple Swift iOS App from Start to Finish - Creating the List View

Previous: A Simple Swift iOS App from Start to Finish - Creating the Collection Class