What is a UILayoutGuide, and when is it better than an invisible spacer view?

9.8.3 · L3 · Interview

Predict first

Two equal-width guides separate a 40-point view from the left edge, from each other and from the right edge. Where do the views land, and what does the container hold?

import UIKit

let c = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 100))
let g1 = UILayoutGuide(), g2 = UILayoutGuide()
let a = UIView(), b = UIView()
for x in [a, b] { x.translatesAutoresizingMaskIntoConstraints = false; c.addSubview(x) }
c.addLayoutGuide(g1); c.addLayoutGuide(g2)
NSLayoutConstraint.activate([
    a.widthAnchor.constraint(equalToConstant: 40), a.heightAnchor.constraint(equalToConstant: 40),
    b.widthAnchor.constraint(equalToConstant: 40), b.heightAnchor.constraint(equalToConstant: 40),
    a.topAnchor.constraint(equalTo: c.topAnchor), b.topAnchor.constraint(equalTo: c.topAnchor),
    g1.leadingAnchor.constraint(equalTo: c.leadingAnchor), g1.trailingAnchor.constraint(equalTo: a.leadingAnchor),
    g2.leadingAnchor.constraint(equalTo: a.trailingAnchor), g2.trailingAnchor.constraint(equalTo: b.leadingAnchor),
    g1.widthAnchor.constraint(equalTo: g2.widthAnchor), b.trailingAnchor.constraint(equalTo: c.trailingAnchor)])
c.layoutIfNeeded()
print(a.frame.minX, b.frame.minX, c.subviews.count, c.layoutGuides.count, g1.owningView === c)
  • 110.0 260.0 2 2 true
  • 110.0 260.0 4 2 true
  • 100.0 260.0 2 0 false

Mental model. A guide is a chalk mark on the floor: it tells everyone where to stand, but it is not furniture.

A UILayoutGuide is a rectangle that takes part in Auto Layout but is not a view: it has anchors (leadingAnchor, widthAnchor and so on) and a resolved layoutFrame, belongs to one owningView (addLayoutGuide(_:)), and costs no layer, no drawing and no hit testing. Before guides, people used hidden empty UIViews as spacers to centre a group of controls or to space items evenly. A guide does the same job without adding a view to the hierarchy, and the view debugger shows it as a layout rectangle rather than a layer. The system guides work the same way: safeAreaLayoutGuide, layoutMarginsGuide, readableContentGuide and the keyboard layout guide.

Typical uses: make two flexible gaps equal (two guides with equal widths), pin a view to the centre of the free space beside another, or give a layout region a name that several views align to. In the check below two equal guides space two 40-point views across 300 points: the gaps come out equal (110 each side of the first view), and the container still has just two subviews. The limit: a guide cannot draw, receive touches or be animated as a view; when you need those, use a view.

The two gaps are 110 points each; the guides add no subviews.

Common traps

  • Using an empty UIView as a spacer. It costs a layer and hit testing for nothing.
  • Reading layoutFrame before layout has run. It is zero until a pass resolves it.

They might follow up with

  • Can a guide be shared between views? It has one owning view; others constrain to its anchors.
  • Which system guides exist? Safe area, layout margins, readable content, and the keyboard guide.

Related questions

  • 9.8.1 What are layout margins, how do they differ from the safe area, and what changes in a right-to-left language?
  • 9.8.2 What rules does UIStackView follow: hidden views, distribution, who stretches, and what does…
  • 9.1.1 How does Auto Layout work, and what are intrinsic size, content hugging, compression resistance, priorities…

← What rules does UIStackView follow: hidden views, distribution, who…   Who owns a constraint, what can you change after activating it, and… →