1 of 19

Week 3

Autolayout Constraints

2 of 19

Announcements

Lab 2 Released

Lab 2 has been released and will be due Monday, September 28 at 11:59 pm

iOS Decal Fall 2021

3 of 19

Closures

lazy

Autolayout Constraints

Demo

iOS Decal Fall 2021

4 of 19

Closures

lazy

Autolayout Constraints

Demo

iOS Decal Fall 2021

5 of 19

Closures

A closure is a self-contained block of code that can be passed around
Similar to lambda functions in Python, closures can be used just like normal objects
We will use closures primarily to control the moment a block of code runs

iOS Decal Fall 2021

6 of 19

Closures

lazy

Autolayout Constraints

Demo

iOS Decal Fall 2021

7 of 19

lazy

lazy variables are initialized only when they are referenced for the first time

This allows us to break UI element initialization outside of view lifecycle functions

If a lazy variable is never referenced, space will not be allocated in memory!
We will use the lazy keyword to create UI elements in a fast, readable, and memory-conscious manner

iOS Decal Fall 2021

8 of 19

lazy Initialization

iOS Decal Fall 2021

class ViewController: UIViewController {

lazy var testLabel: UILabel = {

let closureLabel = UILabel()

closureLabel.text = "Hello"

return closureLabel

}()

override func viewDidLoad() {

view.addSubview(testLabel)

}

9 of 19

lazy Initialization

iOS Decal Fall 2021

class ViewController: UIViewController {

lazy var testLabel: UILabel = {

let closureLabel = UILabel()

closureLabel.text = "Hello"

return closureLabel

}()

override func viewDidLoad() {

view.addSubview(testLabel)

}

This is a closure

closureLabel only exists inside the scope of the {}

When testLabel is referenced for the first time, the closure will run and the value of closureLabel will be assigned to testLabel

10 of 19

Closures

lazy

Autolayout Constraints

Demo

iOS Decal Fall 2021

11 of 19

Autolayout Constraints

Autolayout constraints allow us to position UI elements relative to the screen’s bounds and/or other elements
We need to provide the system with enough information to determine the absolute position of all UI elements

iOS Decal Fall 2021

12 of 19

Autolayout Anchor System

iOS Decal Fall 2021

centerYAnchor

bottomAnchor

topAnchor

leadingAnchor

trailingAnchor

centerXAnchor

* Constants need to be negative

13 of 19

Constraint Examples

iOS Decal Fall 2021

label.translatesAutoresizingMaskIntoConstraints = false

label.topAnchor.constraint(equalTo: view.topAnchor).isActive = true

label.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 8).isActive = true

label.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -8).isActive = true

label.heightAnchor.constraint(equalTo: 50).isActive = true

label

8pts

50pts

14 of 19

Constraint Breakdown

iOS Decal Fall 2021

label.topAnchor.constraint(equalTo: view.topAnchor).isActive = true

“Align the top edge of label with the top edge of the screen”

15 of 19

Constraint Breakdown

iOS Decal Fall 2021

label.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 8).isActive = true

“Align the leading edge of label 8 pts inside the leading edge of the screen”

16 of 19

Constraint Breakdown

iOS Decal Fall 2021

label.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -8).isActive = true

“Align the trailing edge of label 8 pts inside the trailing edge of the screen”

17 of 19

Constraint Breakdown

iOS Decal Fall 2021

label.heightAnchor.constraint(equalToConstant: 50).isActive = true

“Set the height of label to 50 pts”

18 of 19

.translatesAutoresizingMaskIntoConstraints = false

Remember to set .translatesAutoresizingMaskIntoConstraints to false for every UI element you initialize
The default value for this property is true, and the system will set (often unsatisfiable) constraints for you

iOS Decal Fall 2021

19 of 19

Closures

lazy

Autolayout Constraints

Demo

iOS Decal Fall 2021