Master the building blocks of an app: code architecture, UI elements, animations and interactions

So, we laid out the general code pattern we’ll use for our application. Now let’s start implementing each of the components, starting with the view:

Foundation of UI components

The View as a component of MVC architecture is a collection of UI components. Each of them has a base component that is also called View. 

In code it's represented by the UIView class provided by the UIKit framework.

A view is a rectangular area on the screen. It's ALWAYS rectangular even if we see circles or other shapes.

Let's refer to our main storyboard for practical examples. An app screen is represented by the main view, which is a rectangle that covers a device screen with the contents of our application:

That main view may nest other views. And those views, in turn, can nest more views:

Those nested views are called subviews. And the containing view of each subview is called superview. Each view may have any number of subviews:

Think of it as a tree with a single stem as a base view and branches as subviews.

Views allow us to present visuals to the user and, in return, recognize user interactions and provide feedback in response.

Manipulating views in code

Even though we can build the interface using storyboards, we can manipulate those views in code.

Properties

The essential properties are:

• superview  - refers to the containing view of a view

• subviews  - refers to a collection of all immediate views that a view contains.

Let's review our recent example we built in the storyboard:

As highlighted on the diagram:

• the main view has 4 (immediate) subviews - 1, 2, 3, 4.

• View-1 has no subviews.

• View-2 has one subview: 2-1.

• View-3 has 2 subviews: 2-1, 3-2.

• View-4 has 1 (immediate) subview: 4-1.

• View-4-1 has 1 subview: 4-1-1.

Methods

The essential methods are:

• addSubview(_ view: UIView)  - allows us to add a new subview to a view. It adds the new subview at the end of the current sequence of superviews of the view, the method is called on. In pseudo code for this command would looks like this:  someView.addSubview(anotherView) . As a result, anotherView becomes a subview of someView. 

• removeFromSuperview()  - removes a view from its containing view. In pseudo code this command would look like this:  someView.removeFromSuperview() . As a result, someView gets removed from its containing view. As a consequence, it becomes excluded from the visual tree of an app.

The views can overlap each other while being subviews of the same containing view. The latest view in the hierarchy takes display priority. The following methods are helpful for managing this sequence:

• insertSubview(_view: UIView, belowSubview siblingSubview: UIView)  - inserts a view below a specified view.

• insertSubview(_view: UIView, aboveSubview siblingSubview: UIView)  - inserts a view above a specified view.

• bringSubview(toFront view: UIView)  - brings a subview to the front of a specified view.

• sendSubview(toBack view: UIView)  - sends a subview to the back of a specified view.

Remember, we are talking about hierarchy, but this is not to be confused with inheritance! 

Let's Recap!

• UIView is a foundation of all UI elements of an app.

• A view is a rectangular area, within which other shapes can been used.

• Views allow us to present visuals to the user and, in return, recognize user interactions and provide feedback in response.

• In order to make a view visible to an app screen, it must become the subview of another view, with the exception of the main view for each screen.

• Property  subviews  provides access to a view's immediate subviews.

• Property  superview  provides access to a view's containing view.