Mastering iOS Auto Layout: How the Layout Cycle Works and Boosts Performance

What Is Layout?

Layout answers two questions: What to draw? – it is responsible for arranging UIViews and their subclasses; and Where to draw? – it determines each subview’s frame based on constraints.

How Are Subview Frames Determined?

There are two approaches:

Manually set the subview’s frame size.

Describe the relationship between subviews using constraints, which form a system of linear equations that the Auto Layout engine solves to compute frames.

With the increasing variety of iPhone screen sizes, manual frames are rarely sufficient, so constraints are preferred.

width = trailing - leading</code>
<code>height = bottom - top</code>
<code>centerX = (leading + trailing) / 2</code>
<code>centerY = (top + bottom) / 2

Given the four anchors (leading, top, trailing, bottom), the engine can compute each subview’s frame recursively from the root view (UIWindow), whose frame is known at runtime.

The Layout Cycle

Constraints Change

Constraints are linear equations; modifying them affects the system:

Activate a constraint

Deactivate a constraint

Change a constraint’s priority

Modify a constraint’s constant

Add or remove a view in the hierarchy

Deferred Layout Pass

The pass consists of two steps:

Update constraints (ensure pending changes take effect).

Re‑position views based on the solved frames.

If the first step is skipped, the second step may run multiple times, causing unnecessary calculations.

updateConstraints Method Summary

After calling setNeedsUpdateConstraints, iOS invokes your custom updateConstraints before layout. Overriding this method is usually faster than updating constraints elsewhere, but you should only modify constraints when they actually need to change.

layoutSubviews Method Summary

Override layoutSubviews only when autoresizing and constraint‑based layout cannot achieve the desired result. Calling it improperly can create layout feedback loops.

Auto Layout Debug Techniques

Common problems:

Unsatisfiable Constraints – the linear system has no solution.

Ambiguous Layouts – the system has multiple solutions.

Use identifier and accessibilityIdentifier on constraints to improve log readability. For ambiguous layouts, you can print the view hierarchy with view.value(forKey: "_autolayoutTrace")! and step through possible layouts.

High Performance Auto Layout

The render loop can run up to 120 times per second and has three stages: Update Constraints, Layout, and Display. Each view from bottom to top calls updateConstraints, then from top to bottom calls layoutSubviews, and finally determines whether it needs to be displayed.

Frequent deactivation and re‑activation of constraints (e.g., in a loop) forces the engine to solve the same equation set many times, leading to noticeable performance overhead.

Optimizing performance means ensuring constraint updates happen only once per layout pass.

Alignment Rectangle

The engine actually computes an alignment rectangle, not the full frame. The alignment rectangle contains the core visual elements, while the frame may include additional decorative parts. Transformations do not affect the alignment rectangle size.

Intrinsic Content Size

Controls like UILabel and UIImageView provide an intrinsicContentSize that the engine uses to create NSContentSizeLayoutConstraint. Overriding intrinsicContentSize can avoid costly text measurement, improving layout performance.

override var intrinsicContentSize: CGSize { return CGSize(width: 100, height: 100) }

Alternatively, return UIView.noIntrinsicMetric for dimensions that should be determined solely by constraints.

override var intrinsicContentSize: CGSize { return CGSize(width: UIView.noIntrinsicMetric, height: UIView.noIntrinsicMetric) }

Reference Information

Mysteries of Auto Layout, Part 1 – https://developer.apple.com/videos/play/wwdc2015/218/

Mysteries of Auto Layout, Part 2 – https://developer.apple.com/videos/play/wwdc2015/219/

High Performance Auto Layout – https://developer.apple.com/videos/play/wwdc2018/220/