3️⃣AutoLayout

Fall 2023 | Richie Sun

Now that we know how to define class and utilize UIKit views, how do we position and organize these views in our apps? There are multiple ways to layout views to a screen in iOS development – some examples include frame-based, storyboards, and programmatic AutoLayout. However, the method we will be learning in this course is programmatic AutoLayout.

What is AutoLayout?

AutoLayout is a constraint-based organization system used for UI development in iOS applications. This constraint layout system allows for adaptive UI which adapts to screens of different sizes and orientations, using a relational layout structure to organize views with respect to one another. Thus, this method tends to be less error-prone and does not require us to worry about the coordinates of individual elements on the screen.

Important Terminology

When dealing with AutoLayout and constraints, there are a few terms that are important to understand before jumping in:

Superview:	The superview is the immediate ancestor of the current view. In other words, it is the view that the current view is contained within.
Subview:	Subviews are the children of the current view. In other words, they are the views which are contained within by the current view.
Constraint:	In general, constraints must define both the size and the position of a view, in order for that view to display properly within its superview. Think of them as the support beams that keep a view in place.
Anchors:	Every UIView has a set of anchors that define its layouts rules. The most important ones are: widthAnchor, heightAnchor, leadingAnchor, trailingAnchor, topAnchor, bottomAnchor, centerXAnchor and centerYAnchor (Examples in image below)

NSLayout and Setting Constraints

Before we begin setting up anchors and constraints, the view needs to be added to the base view of the NavigationController, or any superview. To do that, we call the following function:

superview.addSubview(currentView)

In the code chunk above, superview is the view that we want to contain the currentView

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.

Suppose we want to constrain a UILabel called labelA 50 pixels from the top of the screen, and horizontally aligned to the center of the screen like shown below:

This is how we would do that:

let labelA = UILabel()

override func viewDidLoad() {
    super.viewDidLoad()
    
    // Don't forget this step!!
    labelA.translatesAutoresizingMaskIntoConstraints = false

    // We need to add labelA to the base view of the Navigation Controller
    view.addSubview(labelA)
    
    // We have to activate our constraints in order to
    NSLayoutConstraint.activate([
        // Here, we can insert all the constraints that we want activated
        labelA.topAnchor.constraint(equalTo: view.topAnchor, constant: 50)
	labelA.centerXAnchor.constraint(equalTo: view.centerXAnchor)
    ])
}