Member preview

View Hierarchy with Swift IOS

Hello everyone my name is Felipe I’m from Chile and today I’m going to talk a little bit about view hierarchy in swift for IOS developers.

I’m just starting in the IOS world, I have 3 years programming experience with Ruby on Rails and leading different projects, but now I have a new personal goal and I want to be focus 100% in swift and IOS, so if you notice that I’m doing something wrong or if you think is a better way teach this content please let me know.

ok so lets start.

View Basics Concepts

  • can handle events, like touches
  • exists within a hierarchy of views whose root is the application`s window
  • views are objects that are visible to the user
  • is an instance of UIView or one of its subclasses

So this are some basics concepts about the views that everyone needs to know before start this tutorial.

The View Hierarchy

Every app has a single instance of UIWindow that serve as a content for all the views in our application. The windows is created when the application launches and an UIWindow is a subclass of a UIView so we can say that UIWindow is itself a view.

So we can demonstrate that in the next image:

Example of a view hierarchy

So how you can see this is a little example of a view hierarchy in IOS and Swift, you can notice this hierarchy in the next practice excercise for that we are going to create a new project (This is beginner tutorial but I’m going to asume that you now how to create a new single view project).

Views and Frames

Once your project is created you are going to see a view like this:

Screen example

so we are going to start explaining what happen when you initialize a project in xcode or IOS in general. Every view in IOS have a frame and this frame specifies the view’s size and its a position relative to its superview, a view is always a rectangle.

The frame method take one argument and is called GCRect, a GCRect contains the members origin and size. The origin is a structure of type CGPoint and contains two CGFloat properties: X and Y. The size structure of type CGSize and has two CGFloat properties: width and height.

So all of this can sounds a little weird in the beggining but you can understand everything with a visual example so for that you need to go inside the file called ViewController.swift and delete everything inside and you need to have a result like this:

import UIKit

class ViewController: UIViewController {


So in the ViewController.swift we are going to override viewDidLoad(). Create a CGRect that will be the frame of a UIView. Next create and instanse of UIView and set its a backgroundColor property to red. Finally, add the UIView as a subview of the view controller’s view to make it part of the hierarchy.

so now our code is something like this:

first view and frame

now you can build your application (Command-R) and you will see a red rectangle that is the instanse of UIView. Why our rectangle is in the right size of our screen? because we defined our frame size with the values 160 and 240 and thats move our rectangle throw the view you can change thats values and play a little bit with the app so you can see how its work the frame and the first view.

here is how your app looks like now:

App running

Now if we draw our current hierarchy its going to be something like this:

I hope with this draw examples you can understand better the hierarchy in the views.

Now we are going to continue the example creating another instanse of UIView with a different frame and background color so our code is going to be something like this:

second view and frame

Now run and build the application again (Command-R). In addition of our red rectangle you will see a green square near the top lefthand corner of the window.

app running

so now if we update our draw you can see a hierarchy like this:

draw for our new UIView

so with this example we are going to finish this short tutorial I hope you have more clear how view hierarchy work in IOS and if I you want you can continues playing with the UIView project change the structure make new squares and change the position, take your time for understand everything.

thanks for reading my post and next week I’m going to write a new one.

Greetings !