Auto Layout in Depth

Why Auto Layout exists

iPhones and iPads come in many screen sizes, and screens rotate. If you positioned views with fixed coordinates, they’d look broken on other devices. Auto Layout solves this: instead of fixed positions, you describe relationships (“this label is 16 points from the left edge”, “this button is centered”), and iOS calculates the exact positions for the current screen.

Constraints

A constraint is a single rule about a view’s position or size. You typically pin a view’s edges (anchors) to other views or to the safe area.

label.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    label.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 16),
    label.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -16),
    label.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20)
])

The safe area keeps content clear of the notch, status bar and home indicator — always pin to it rather than the raw screen edges.

The golden rule

Whenever you create a view in code and use Auto Layout, you must set translatesAutoresizingMaskIntoConstraints = false. Forgetting this is the #1 cause of “my constraints don’t work” problems.

Stack views: the easy way

Manually constraining many views is tedious. UIStackView arranges a group of views in a row or column automatically — you set spacing and alignment once, and it handles the constraints for you.

let stack = UIStackView(arrangedSubviews: [titleLabel, subtitleLabel, actionButton])
stack.axis = .vertical
stack.spacing = 12
stack.alignment = .fill
stack.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(stack)
NSLayoutConstraint.activate([
    stack.centerYAnchor.constraint(equalTo: view.centerYAnchor),
    stack.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 24),
    stack.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -24)
])

Content hugging & compression resistance

These two priorities decide which view stretches or shrinks when space is tight. A label with high “compression resistance” won’t get truncated; one with low “content hugging” will stretch to fill space. You rarely set these by hand at first, but knowing they exist helps when a layout behaves unexpectedly.

Interface Builder vs code

You can create constraints visually in Interface Builder (Storyboards) or in code as shown above. Both produce the same result; many teams prefer code for clarity and version control, while Storyboards are great for quick visual layout.

Common mistakes

• Forgetting translatesAutoresizingMaskIntoConstraints = false.
• Pinning to screen edges instead of the safe area (content hides under the notch).
• Giving conflicting or insufficient constraints (Xcode warns about ambiguous layout).

Summary: Auto Layout positions views with relationships, not fixed coordinates, so UIs fit every device. Use anchors against the safe area, prefer UIStackView for groups, and never forget translatesAutoresizingMaskIntoConstraints = false in code.