• 10 hours
  • Medium

Free online content available in this course.

Videos available in this course

Certificate of achievement available at the end this course

Got it!

Start with foundation - UIView

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

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:

MVC - View
MVC - 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.

View shapes represented by rectangular area
View shapes represented by rectangular area

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:

Main app view
Main app view

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

Nested views
Nested 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:

View hierarchy
View hierarchy

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.

What is immediate in this context exactly? o_O 

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

Superview & subviews
Superviews & subviews

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.

Example of certificate of achievement
Example of certificate of achievement