Lecture Handout

What is UIKit?

UIKit is a framework which provides us as iOS developers the basic components that we need to use in order to create an iOS application. These components can be used to display content on the screen, to interact with that content, and to manage interactions throughout the app. To list just some of these components:

• UIButton, UILabel, UITextField, UIImageView, UITableView, UICollectionView, UIView

• UIColor, UIFont, UIGestureRecognizer

• UIViewController

The first row of items are just examples of subclasses of UIView. As you can probably guess from the name, these are all views that you can create and see when you run your application. The second row of items are classes that help you to work with and customize these views. For example, a UILabel has a textColor property which is of type UIColor and a font property which is of type UIFont. The last row is a UIViewController (we will discuss MVC in next lecture).

import UIKit

class ViewController: UIViewController { ... }

Now, how do we get access to these components and actually use them in our application? Well, you simply have to include the line import UIKit on the top of the file that you need to use it in. Later on in the course, we will be using other types of frameworks and to use them, we simply do the same thing and include the import [Name of Framework] line at the top of our file to use them.

How do you make views show up on the screen?

There are multiple ways to layout views to a screen in iOS development – some examples include frame-based, storyboards, and programmatic AutoLayout.

Frame based layout involves specifying an origin, width, and height for each of your views. However, as you can probably imagine, using frame based layout can be troublesome. Why? Well, iPhone devices come in all different sizes (some may be wider, some may be taller) and placing views using coordinates when your x-y coordinate system changes depending on the device can lead you to do a lot of unnecessary math.

Storyboard is a method of creating your views using an interface builder. The interface builder allows you create and layout your views simply by dragging the views onto it (and thus involves no code). While this may be useful for developing small, quick demo applications, developing a large scale application using Storyboards is extremely disastrous because there is no form of reusability and making changes to a complicated application can take a lot of time. Not to mention, Storyboards with version control systems are horrible so collaborating with other developers become much more difficult when using Storyboards.

The last method, and the method you will be learning in this course is programmatic AutoLayout.

What is AutoLayout?

AutoLayout is a way to layout views in relation to one another. AutoLayout works with all device sizes and orientations without worrying about the coordinates of where everything is on screen. Thus, it is a more reliable way of laying out our views and also involves less intensive thinking, helping us to avoid errors more often.

AutoLayout Terminology

Every subview of UIView has these four properties: topAnchor, leadingAnchor, bottomAnchor, and trailingAnchor. As the names imply, topAnchor refers to the view’s top edge, leadingAnchor refers to the view’s left edge, bottomAnchor refers to the view’s bottom edge, and trailingAnchor refers to the view’s right edge.

An IMPORTANT note to always remember is that in order for us to use these anchors to create constraints (layout our views), we must remember to set the view’s translatesAutoresizingMaskIntoConstraints property to be false before setting these anchors.

How do we use these anchors to layout our views? Well, lets take an example. Assume we have two labels, labelA and labelB, and we want to make it so that labelB is 20 pixels to the right of labelA. This is how we would do that:

var labelA = UILabel()
var labelB = UILabel()

override func viewDidLoad() {
    super.viewDidLoad()
    
    labelA.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(labelA)
    
    labelB.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(labelB)
    
    // We have to activate our constraints in order to
    NSLayoutConstraint.activate([
        // Here, we can insert all the constraints that we want activated
        labelB.leadingAnchor.constraint(equalTo: labelA.trailingAnchor, constant: 20)
    ])
}

What exactly is happening here? Let's break it down. Inside our UIViewController class, we declare our labels as variables of type UILabel. Then, inside our viewDidLoad function (the function that gets called after our ViewController is loaded into memory), we initialize our two labels (remembering to set translatesAutoresizingMaskIntoConstraints to false for both of our labels), and then add the labels as subviews to the ViewController’s view. `

Next, we have to create our constraints and activate them (a constraint is just some rule that we apply to one of the four anchors of a view). An easy way for us to use this is to call the NSLayoutConstraint.activate([NSLayoutConstraint]) method. This method takes in an array of constraints and then automatically activates them for us. In our example above, we are just going to activate one constraint. If we want labelB to be 20 pixels to the right of labelA, that just means we want labelB’s left edge to be 20 pixels to the right of labelA’s right edge. However, we know that this is equivalent to saying we want labelB’s leadingAnchor to be 20 pixels to the right of labelA’s trailingAnchor. The syntax for doing this is labelB.leadingAnchor.constraint(equalTo: labelA.trailingAnchor, constant: 20). Breaking this down, we take labelB’s leadingAnchor property and call the anchor’s constraint(equalTo: NSLayoutAnchor, constant: CGFloat) method to constrain it to be equal to labelA’s leadingAnchor, offset by 20 pixels. As a final exercise to see if you fully understand anchors, try thinking about what constraints you would create this screen below: