1. Introducing Auto Layout

Written by Jayven Nhan

Gone are the days of building user interfaces based on a single device with a known screen size. Today, with so many different devices available from Apple, you need to design and build your apps for multiple screen sizes. You also need to think about designing with dynamic content in mind.

In other words, it shouldn’t matter whether you run your apps on an iPhone 11 Pro Max or an iPad 12.9” — either way, it should look good. The same holds true for dynamic content. Whether it’s a single line of text or twenty lines of text, your UI needs to adapt. With an adaptive layout, you can create a visually stunning app on all devices.

This is where Auto Layout comes in.

What is Auto Layout?

Auto Layout is a constraint-based layout system designed for building dynamically sized user interfaces. It lets you create user interface layouts that dynamically adapt for all screen sizes without manually setting the frame of every view.

For a complete Auto Layout system, every view must have a defined position and size. In other words, Auto Layout has to know how to position and size every user interface element in different circumstances. You’ll learn more about this later.

Auto Layout helps developers adapt user interface layouts for external and internal changes. Some examples include:

• Different screen sizes.
• iPadOS multitasking features like Slide Over, Split View and Picture in Picture.
• Device rotation.
• Larger text support.
• Internationalization support.
• Dynamic content support.

Beginning Auto Layout

Before you jump into learning about Auto Layout, it’s important to understand that Auto Layout isn’t automatic; you need to do some work to get it right. Some of the topics this book covers include:

• Thinking in auto layout (relativity).
• Dynamically sizing a UITableViewCell / UICollectionViewCell.
• Using Auto Layout with UIStackView and how to optimize for minimal constraints.
• Constraint content hugging and compression resistance priorities.
• Constructing Auto Layout programmatically.

To get started, you’ll learn about the foundational layer of any UIKit user interface running on iOS/iPadOS.

UIView and the View Hierarchy

UIView is the foundation of all user interfaces built using UIKit. Every user interface is built on top of UIView. This includes UIButton, UILabel and UITextField, all of which are built on top of UIView.

Your app’s views are arranged in a hierarchy. Each view is contained within a parent and each view may contain one or more child views. Another name for the parent view is superview.

Superview

The superview is the view that contains a child view.

Every view has a superview, and every screen has a view. The standard view of a screen is the view controller’s view. It’s the base layer containing all of the user interfaces on a single screen. You can consider this view as a blank canvas because you can put any drawings on top of it.

Each view controller’s view can have a different size based on many variables. For example, an iPhone 11 Pro Max full-screen view controller’s view is 414×896 points in portrait while an iPad Pro 12.9” full-screen view controller’s view is 1024×1366 points in portrait.

Thinking in Auto Layout

When you think about Auto Layout, it’s helpful to think of the word relative. When using Auto Layout, remember that you’re working on a blank canvas with predefined width and height known as the superview.

Given an app design, you’ll want to know how to implement the design using Auto Layout. Before you start adding views onto the superview, it’s helpful to ask yourself Auto Layout questions to begin thinking in Auto Layout.

Starting with a view’s position, you could ask questions like:

1. In what way is the view’s position relative to other views?
2. As the superview grows or shrinks, will the view’s position change? If so, what’s the pattern?
3. Is the view’s content static or dynamic? If dynamic, how do you want the view to position as content grows or shrinks?
4. Do you want to place any limitations on how far or close a view is relative to another?

Questions relating to a view’s size might be:

1. Do you want your view’s size to be relative to other views? If so, what’s the pattern?
2. As the superview grows or shrinks, will the view’s size change? If so, what’s the pattern?
3. Is the view content static or dynamic? If dynamic, how do you want the view’s size to change as content grows or shrinks?
4. Do you want to place any limitations on how much a view can grow or shrink?

These questions are crucial to consider when implementing Auto Layout.

Next, you’ll go through a thought process of thinking in Auto Layout, given an app design.

Example

The following example shows a simple app design with two labels, Label A and Label B.

Think about how you might implement Auto Layout for this type of app design. As you do, consider that there’s more than one way to implement the same user interface using Auto Layout.

The first view you’ll think about implementing in Auto Layout is Label A.

You add Label A onto the superview. The superview looks like this:

To apply the concept of relativity, start asking some of the Auto Layout questions. Continue down your list of questions until the view’s position and size requirements are met.

Auto Layout questions: Position (Label A)

Starting with the questions for the view’s position:

Q: In what way is Label A’s position relative to other views?

A: Label A’s leading edge is 16 points away from the superview’s leading edge. Label A’s top edge is 16 points away from the superview’s top edge.

The view’s two relationships you give to Auto Layout satisfy the position requirement.

Auto Layout questions: Size (Label A)

With the view’s position questions answered, you’re ready to move onto asking questions about its size.

Q: Do you want your view’s size to be relative to other views? If so, what’s the pattern?

A: No.

Q: As the superview grows or shrinks, will the view’s size change? If so, what’s the pattern?

A: No.

Q: Is the view content static or dynamic? If dynamic, how do you want the view’s size to change as content grows or shrinks?

A: Label A will be statically sized. Label A’s width is 200 points, and its height is 100 points.

The view’s constant values you give to Auto Layout satisfy the size requirement. You’re ready to move on to Label B.

Auto Layout questions: Position (Label B)

You add Label B onto the superview. The superview looks like this:

Again, apply the concept of relativity. Start asking some of the Auto Layout questions, and continue down the list of questions until the view’s position and size requirements are met.

Like before, start with the questions about its position:

Q: In what way is Label B’s position relative to other views?

A: Label B’s leading edge is 24 points away from Label A’s trailing edge. Label B’s top edge aligns with Label A’s top edge. Label B’s height is two times Label A’s height.

The view’s two relationships you give to Auto Layout satisfy the position requirement. You can safely move on to the view’s size requirement.

Auto Layout questions: Size (Label B)

Ask yourself the same size questions as before, but this time consider how your answers apply to Label B.

Q: Do you want your view’s size to be relative to other views? If so, what’s the pattern?

A: Yes, for width and height. Label B’s trailing edge is 16 points away from the superview’s trailing edge.

The view’s two relationships you give to Auto Layout satisfy the size requirement. Congratulations, you now have your first complete Auto Layout system.

Label A will position at the same relative distance from the superview’s upper left corner. It will also have a static size. Label B positions at a relative distance to Label A. Label B will have a dynamic width based on the screen width and a dynamic height based on Label A’s height.

Next, you’ll learn how to communicate your view’s position and size to Auto Layout using constraints.

Constraints

You use Auto Layout constraints to layout your user interfaces dynamically in Auto Layout. These constraints communicate a view’s position and size to Auto Layout using math. Constraints are a series of linear equations. A constraint is made up of the following linear equation:

Item A’s Attribute = Multiplier * Item B’s Attribute + Constant

When you add a constraint, you add a linear equation. It’s a way to express relationships or constants. You can think of adding constraints as a way to express relationships or constants mathematically to the layout engine.

When expressing constant values to Auto Layout, the linear equation sets Item B’s attribute and the multiplier to zero. For expressing constant values, the linear equation simply looks like this:

Item A’s Attribute = Constant

Attributes

An attribute is a view feature Auto Layout uses to create a relationship between two views. There are two types of attributes: location and size. Location attributes include a view’s leading, trailing, top and bottom edges. Size attributes include the view’s width and height. Different user interfaces have different sets of attributes.

Multiplier

A multiplier is a ratio you can apply to a relationship between two item attributes. For example, you can have Label B be twice the height of Label A.

Constant

Constant is a fixed value that you add to a constraint. For example, Label A’s leading edge spaces 16 points away from the superview’s leading edge.

For a deep dive into the Auto Layout engine, read Chapter 14, “Under the Hood of Auto Layout.”

There are a few more key concepts that impact how Auto Layout works. These include intrinsic content size and priorities.

Intrinsic content size

Intrinsic content size is a size a view naturally takes up based on its content. It’s like a balloon. The more air you put inside it, the bigger it becomes and vice versa. Some views have an intrinsic content size, while others don’t because they don’t contain defined size content.

Priorities

There are times where Auto Layout is unable to satisfy all of the constraints applied in a view hierarchy. In situations like this, you can encounter scenarios where views fight for space. Using priorities, you can help Auto Layout resolve these layout decisions.

Constraint priority

Constraint priority is about which constraint is more important for Auto Layout to satisfy. Constraint priority is defined using a value between 1 and 1000. A constraint priority between 1 and 999 is non-required. A constraint priority of 1000 is required. When you add a constraint, the default constraint priority is 1000, meaning it’s required.

Content hugging priorities

Content hugging priority helps Auto Layout decide which view gets stretched larger than its intrinsic size. Each view has a horizontal and vertical content hugging priority. A view with a higher content hugging priority fights harder from being stretched and vice versa.

When choosing between two views and deciding which view to stretch, the layout engine looks into the content hugging priorities. The view with the lower content hugging priority stretches.

A view’s default content hugging priority varies depending on its type and how you instantiate the view. When you instantiate a view using Interface Builder versus programmatically, the default content hugging priority can differ.

Compression resistance priorities

Compression resistance priority helps Auto Layout decide which view shrinks smaller than its intrinsic size. Each view also has a horizontal and vertical compression resistance priority. A view with a higher compression resistance priority fights harder from being shrunk and vice versa.

Each view has a default 750 horizontal and vertical compression resistance priorities. Unlike the content hugging priorities, all view objects have identical default compression resistance priorities regardless of the view type or instantiation method.

When choosing between two views and deciding which view to shrink, the layout engine looks into the compression resistance priorities. The view with the lower content compression resistance priority shrinks.

For more information on constraint priorities, read Chapter 8, “Content Hugging and Compression Resistance Priorities.”

Now that you’ve gotten an overview of Auto Layout, you’re ready to dive into more detail. Enjoy the journey!