> For the complete documentation index, see [llms.txt](https://ios-course.cornellappdev.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ios-course.cornellappdev.com/resources/archived-past-semesters/sp23/chapters/2.-uikit-and-autolayout/lecture-handout.md).

# 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).

```swift
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:

```swift
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:

![](https://1509678725-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lwk7443W4ukbAF9S07e%2F-M044qhCGJ4iFe5-7ZCC%2F-M09yaCnqVCaFh7u3xBQ%2FScreen%20Shot%202020-02-15%20at%205.31.22%20PM.png?alt=media\&token=db8654c3-784b-4320-b24c-f94159a4b68a)