• 10 hours
  • Easy

Free online content available in this course.



Got it!

Last updated on 9/2/19

Compose the interface

Log in or subscribe for free to enjoy all this course has to offer!

We are now naturally progressing into exploring Xcode design capabilities. In this chapter, we will create the entire interface of our application.

Let's visualize our app!

Introducing the Attribute Inspector

Remember the Utilities panel in Xcode: the one on the right? We are going to refer to it a lot. Especially the Attributes Inspector.

Let's start by selecting our main view on storyboard.

What is 'View' exactly? 

A view is an elementary visual component of user interface (UI). The most primitive view is a rectangle. It can be used as a complete element on its own or serve as a container for other views.

All UI elements are views, they just extend the appearance and functionality of a basic view or another view. 

Here're a few examples of views:

Examples of views: Elementary, Button, Image, Container.

The view we've just selected on our storyboard is elementary view. It will serve us as a container for the rest of the visual elements we are intending to include. 

 In our 'Hello World!' app, let's change the color of our main view. To do this, on Utilities panel switch to the Attributes Inspector by clicking on this icon: 

It looks like this:


As you can see, it presents various attributes of a view. Some are related to the appearance, like background (the color of the rectangle) or alpha (its opacity between 0 and 1). Others are related to the behaviour of a view.

Click 'Background' and change the background color of your application.

You are welcome to use my color:Red 250 / Green 254 / Blue 226.

Configuring the Label

We've already prepared for this by adding a label to display our famous 'Hello World!'. We can reuse it, just need to adjust its appearance.  

Since the text it needs to present will be variable each time, let's take up the most space to increase our chances of fitting the text:

1. Drag it to the top left until blue lines appear:

2. Grab the bottom right corner of the label and move it further down and to the right until you see a blue line on the right and leaving reasonable space for the remainder of our interface (I've got the the height to 560px for the moment).

Resizing in Storyboard

Next, we will use Attribute inspector again. Now, that we have a Label selected (not a view, when we first used it), there's a different set of attributes available to us:

Label attributes

You can change the text of a label, color, font, etc.

Let's change the color, font and font size, as well as label text to reflect the context of our app. Here're my adjustments:

Custom label attributes
Custom label attributes

Click this icon  to reveal custom font settings.

My configuration: 

  • Text: "You are happy riding a horse!" 

  • Font: Custom, Family: Helvetica Neue, Size: 80 

  • Color:Red 192 / Green 42 / Blue 49

Seems like that's all that's needed. Except the text is no longer fitting:

We've created a monster!
We've created a monster!

This is because the Lines attribute is still set to 1.

What number should it be instead? We don't know for certain as each time our app will generate a composition of text of different length :waw:.

As our text is dynamic, and it's unreasonable to try to predict its length, the ideal case would be to let the interface figure it out for us. We can do it by setting the number of lines to 0 (zero!).

What if our text is VERY long?

It's still possible that the length of our text will need more lines than the label size can fit given the font size we specified. Let's perform one more trick to accommodate this scenario. On the label attribute inspector check off 'Automatically Adjust Font'. 

This may not be what we intended by our original design, however, an excellent safety-net in case of emergency.

Here's how our final table configuration looks like:

Final label configuration
Final label configuration

Almost done, one more element to add!

Adding a Button

Only one component is missing on our interface: a button that will trigger a new acting challenge generation. To add one, we need to refer back to already known Object Library at the bottom of Utilities panel. Spot a Button object on the grid and drag it to our view in the Editor right below the label we just resized:

Objects Library - button selection.
Object Library - button selection.

Once you positioned your button on the view, it will appear in default size: 

Default button
Default button

 We already know how to reposition and resize elements directly in the Editor. This time, let's explore a different method. We are going to use the Size Inspector to manually set the exact parameters.

Keep the button selected on the view and switch to Size Inspector by clicking on this icon (next to Attributes Inspector): 

In the second section of this panel, titled View, we can set the exact size and position attributes. Here are mine:

Button size & position attributes
Button size & position attributes

 Let's review them in order:

  • X: Defines the position of an element in points (pt) from the left edge of a parent view (hosting container). 

  • Y: Defines the position of an element in points (pt) from the top edge of a parent view.

  • Width: Width in pt.

  • Height: Height in pt.

Now let's go back to the Attributes Inspector and configure the appearance of our button: Title, Font, Font size, Text color and Background color.

You may experiment with your preferences or follow mine:

  • Title: ACT NeXT (Guess where 'NeXT' comes from?)

  • Font: Helvetica

  • Font size: 45

  • Text color:Red 255 / Green 255 / Blue 255

  • Background Color:Red 85 / Green 85 / Blue 85

Done! Now click Run (cmd + r) to verify that our interface appears as intended!

Congrats on completing the interface design!
Congrats on completing the interface design!

Feel free to play around with other attributes of your button or label to familiarize yourself with the Storyboard and the Attributes Inspector!

Let's Recap!

The main interface building techniques:

  • Add UI elements to your interface by dragging them from the Object Library on the Utilities panel.

  • Position or resize:

    • Directly in the Editor by dragging the object or corners and edges using the blue guiding lines for the alignment assistance.

    • Using Size Inspector and set the values manually in points.

  • Change appearance:

    • Directly in the Editor (only the text) by double clicking on the label (as we learned, the button's title is also a Label) and typing on the spot.

    • Using Attributes Inspector and set the values manually.

Now that your interface is ready, it's time to start coding!

Example of certificate of achievement
Example of certificate of achievement