Image for post
Image for post
Are you pro MacBook sticker on the lid or no?

UILayoutGuide

User Interface Creation Made Responsible

Jordan Morgan
Apr 15, 2018 · 6 min read

A quick note — all of my future posts will be published on my dedicated website and this publication is no longer being updated. Thanks for reading!


But Dummy Views Rock (…and I agree)

Dummy views solve some layout problems extremely well. That’s why we all use(d) them. Expressing inter-view relationships, creating modular chunks of your user interface or defining constraints to express the coordinates or size of empty spaces between views all called for the dummy view.

  • Added a first class member of the view hierarchy, joining in on all the overhead that may be associated with any task related to it.
  • And as part of the responder chain, it could intercept some messages that it was never intended to handle.

There, but Not Really

But a layout guide is none of those things, nor does it suffer from any of those problems. It’s a non-rendering view, much like its more powerful cousin, UIStackView.

let scrollView = UIScrollView()// Instead of this...
let containerView = UIView()
scrollView.addSubview(containerView)
containerView.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true
containerView.heightAnchor.constraint(equalTo: scrollView.heightAnchor).isActive = true
containerView.leftAnchor.constraint(equalTo: scrollView.leftAnchor).isActive = true
containerView.rightAnchor.constraint(equalTo: scrollView.rightAnchor).isActive = true
// We can do this...
let containerLayoutGuide = UILayoutGuide()
scrollView.addLayoutGuide(containerLayoutGuide)
containerLayoutGuide.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true
containerLayoutGuide.heightAnchor.constraint(equalTo: scrollView.heightAnchor).isActive = true
containerLayoutGuide.leftAnchor.constraint(equalTo: scrollView.leftAnchor).isActive = true
containerLayoutGuide.rightAnchor.constraint(equalTo: scrollView.rightAnchor).isActive = true

API Particulars

The UILayoutGuide class is designed to perform all the tasks previously performed by dummy views, but to do it in a safer, more efficient manner.

  • Invoke addLayoutGuide(_:)to the desired view.
  • Set up valid constraints on the layout guide.
let bottomLeftGuide = UILayoutGuide()
view.addLayoutGuide(bottomLeftGuide)
// External Constraints
bottomLeftGuide.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
bottomLeftGuide.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
bottomLeftGuide.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.5).isActive = true
bottomLeftGuide.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.5).isActive = true
// Internal constraints, pseudo code for brevity
someLabel.top.equalToLayoutGuideTop
someLabel.left/right/etc
// And you can pin all the other views here that you need

For De🐛-Ing

Look, Auto Layout goes to hell every now and again no matter what happens. You can either fight the wall of text spit out to the console or run and hide from it. If you opt for the former, take note of layout guide’s identifier property.

bottomLeftLayoutGuide.identifier = “BottomLeftGuide”
// When constraints break, it’ll show in the logs similar to this
“<NSLayoutConstraint:0x6040002b8a80 UILabel:0x7fbb1a39dde0.left == BottomLeftGuide:0x6040001ae2a0.left + 16>”
CGRect guideRect = someLayoutGuide.layoutFrame
aNonAutoLayoutView.frame = CGRectMake(0, guideRect.size.height, 100, 100)
  • And the hasAmbigiousLayout property
let constraintsEffectingVertical:[NSLayoutConstraint] = bottomLeftGuide.constraintsAffectingLayout(for: .horizontal)

Winding Down

If brevity is the source of wit, then the layout guide may be the sharpest of them all nesteled inside UIKit. It’s insanely simple — just a plain old thing that looks like a view, smells like a view, acts like a view and….isn’t a view. It’s just a rectangular region that loves Auto Layout.



If you enjoyed this week's post, please feel free to go ahead and NSRecommend(this, where: below);

The Traveled iOS Developer’s Guide

Cocoa Touch, unwrapped and analyzed by @JordanMorgan10.

Jordan Morgan

Written by

iOS @buffer. Author for Pluralsight, contributor to a few books, conference talks and some other stuff! Writing at swiftjectivec.com

The Traveled iOS Developer’s Guide

Cocoa Touch, unwrapped and analyzed by @JordanMorgan10. Updated biweekly.

Jordan Morgan

Written by

iOS @buffer. Author for Pluralsight, contributor to a few books, conference talks and some other stuff! Writing at swiftjectivec.com

The Traveled iOS Developer’s Guide

Cocoa Touch, unwrapped and analyzed by @JordanMorgan10. Updated biweekly.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store