Auto Layout: Describing Relationships, Not Frames

Why it exists

To create adaptive user interfaces that respond dynamically to changes without manual frame calculation. Before Auto Layout, developers had to write code to manually recalculate the size and position of every view when the screen rotated or content changed, which was brittle and complex.

The mental model

Think of Auto Layout as a declarative system for describing relationships between views. Instead of telling a view where to be (e.g., at coordinate 100, 200), you tell it how to relate to other views (e.g., "be centered horizontally in your parent" and "be 8 points below the title label"). The layout engine then solves these equations to determine the final frames.

How it works

Auto Layout builds a view hierarchy and solves a system of linear equations based on the constraints you provide. Each constraint, like button.top = image.bottom + 8, is an equation. The system calculates the x, y, width, and height for every view that satisfies all constraints simultaneously. This happens automatically whenever a change, like a device rotation, invalidates the current layout.

When to use it

Use Auto Layout for any modern iOS, iPadOS, or macOS app. It's essential for handling external changes like different screen sizes (iPhone SE vs. Pro Max), device rotation, and multitasking features like Split View. It's also critical for internal changes like supporting Dynamic Type (user-adjustable font sizes) and internationalization, where text labels can drastically change in length (e.g., English vs. German).

When not to use it

While it's the default, you might temporarily opt-out for performance-critical custom drawing or animations where you need absolute control over every frame, but this is rare. For very simple parent-child resizing, older autoresizing masks can work, but Auto Layout is far more powerful and expressive for building a truly adaptive interface.

One canonical example

A login screen has a logo and a "Login" button. You constrain the logo to be centered horizontally and 20 points from the top. You then constrain the button to also be centered horizontally and 16 points below the logo's bottom edge. Now, if the device rotates or the app runs on a larger iPad, the logo and button automatically adjust their positions to remain centered and correctly spaced, with no extra code needed.