> 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/textbook/uikit-+-autolayout/autolayout.md).

# AutoLayout

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

<div><figure><img src="/files/pEDc5q24ckyZPxovy0kY" alt=""><figcaption></figcaption></figure> <figure><img src="/files/1uoSMJyTIsvnqtjtkotY" alt=""><figcaption></figcaption></figure></div>

### 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:

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

<figure><img src="/files/AtENQRHlsttlVMeHFYoB" alt="" width="375"><figcaption></figcaption></figure>

This is how we would do that:

```swift
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)
    ])
}
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ios-course.cornellappdev.com/resources/textbook/uikit-+-autolayout/autolayout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.