Immerse yourself in the iOS environment

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.

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:

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.

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).

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:

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:

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:

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

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!).

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:

Almost done, one more element to add!

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:

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

 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:

 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!

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

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!