How to Understand Our Designers and Create a Beautiful Hello World App on iOS

A guide to implementing what the design team gives us

Starting the Project Without Storyboard

You can see the initial configuration we need to start a project without Storyboard in this article.

Installing the Constraints Manager

First, we install a constraint manager which translates all those hieroglyphs that help the objects to position themselves within a view (if you want to know what the constraints are, you can see it on this website). In this case, let’s use PureLayout.

You can see how to install the library here: PureLayout.

Once installed, we go to the next step.

Understanding Our Beautiful Hello World Design

The first step before programming any view is to understand it, assimilate its behavior and its elements so as not to have to rewrite code unnecessarily.

So, first, we are going to understand our design and then create that beautiful screen that fits the requirements of our designer (in my case, me).

First, Which Elements Are in Our View?

• The title: “This is a Hello World with PureLayout.”
• The description: “This is planet earth, there is only one. Take care of him!”
• The image: A beautiful image of our world.
• The brand name: “Medium”.

Then we already know that we have to create four elements in our views… but is it enough?

Let’s assume that the designer gave us these guidelines.

The title, description, and the image must be vertically centered in our view, and the brand name must always go down the view.

So, to center the title, we need an additional fifth element, which would be a view that contains our elements, and which is centered vertically. Let’s call it centeredView.

Creating the Elements of Our Beautiful Hello World

Now we are going to programmatically generate each of the elements we need for this view. (Remember that there are five elements including our centeredView, so let’s start with that.)

The CenteredView

The container view of most of the elements is a simple UIView without additional configuration.

The title

Now, for the title, we have certain specifications from our beloved designer: the title is a bold text with a size of 28pts and with the text “This is a Hello World with PureLayout” with a line break after the word “World” and a centered alignment.

This is how the designer sees it:

This is how we see it:

“Why lazy var?

The closure associated with the lazy property is executed only if you read that property. So, if for some reason that property is not used (maybe because of a decision by the user) you avoid unnecessary allocation and computation.

You can populate a lazy property with the value of a stored property. You can use self inside the closure of a lazy property.” — Thanks to Lucas Angeletti for the explanation.

The description

Like the title, it also has its specifications: a regular typeface with a size of 14pts, with the text: “This is planet earth, there is only one. Take care of him!” with a line break after the “there is only ..” paragraph and a centered alignment.

This is how the designer sees it:

This is how we see it:

The image

The image is simple, the designer provides us with the height of the image, but for now, we are not going to use it, we’ll establish the height when we configure its constraints.

This is how the designer sees it:

This is how we see it:

The brand name

The brand name specifications are very similar to the title specifications, bold with a size of 28pts and with the text “Medium” with a centered alignment.

This is how the designer sees it:

This is how we see it:

Adding the Elements to the Main View

First of all, we’ll add our elements to each view as appropriate:

• The Main view contains the centeredView and the brand name.
• The CenteredView contains the title, the description, and the image.

Oops, we almost forgot to set the background color of our view, let’s do it now.

This is how the designer sees it:

This is how we see it:

To convert hexadecimal codes to UIColor you can use this tool: UIColor.xyz.

Last Step, Setting the Constraints

The centeredView

We need to center this view within its main container (as we saw earlier, this centeredView is within the main ViewController view).

The title

Our designer tells us that it has a lateral margin (left and right) of 16px and we also pinned it to the upper edge of the centeredView, so that the centered view knows where it begins to contain objects.

The description

Our designer tells us that it goes under the title with a separation of 28px and that it has a lateral margin (left and right) of 16px.

The image

According to the designer, the image has a height of 255px. It is pinned to lateral edges, and it goes below the description with a separation of 43px.

We also know that it is attached to the bottom edge of our centered view, so that the view knows where it ends up containing objects.

The brand name

According to the designer, the brand name is pinned to the bottom of our view with a lateral margin of 16px.

The End

Click the Run button in Xcode.

Now we see our beautiful Hello World view running on our device or simulator.

I know it was a long read, but the main idea is to clarify the use of constraints depending on what our designer gives us, and have a clear picture of what we need when we are going to create a view programmatically.

You can download the source code here.