How would you achieve the following screen?
You can easily spot an
UIImageView and an
UILabel centered together.
There are multiple approaches to this problem and the most obvious would be to insert these two elements in a
UIStackView. But what if, in a more complex layout, you weren´t able to use it? The most common approach, although not the best, would be encapsulating the
UIImageView and the
UILabel inside a
In this article, you’ll learn how to approach this problem in this scenario.
I’m Here to Guide You!
In iOS 9.0, Apple introduced major changes to its frameworks and added new ones. One of them was
UILayoutGuide is a “rectangular area that can interact with Auto Layout”. It should be used to replace any
UIView used for “inter-view spaces or encapsulation” since it improved efficiency and safety by avoiding the following issues regarding these kind of
UIView (dummy views):
- Creating and maintaining a
- Each member of the view hierarchy adds overhead to every task the hierarchy performs
dummyViewwill be able to intercept messages that are intended for other views
It’s also important to notice that, similar to
UILayoutGuide cannot have a background color, among other properties.
World’s Most Famous Guide
Alongside with iOS 11, Apple introduced the Safe Area Layout Guide while deprecating the top and bottom layout guides.
According to its documentation,
safeAreaLayoutGuide is “the layout guide representing the portion of your view that is unobscured by bars and other content”. It can also be confirmed in its declaration below, that
safeAreaLayoutGuide truly is an
Time to Solve Problems
With all the knowledge acquired, you are now able to solve the initial problem using
UILayoutGuide instead of a dummy view.
To start off, if you were using an
UIView for encapsulation, you would start by creating it and adding it to the hierarchy:
This time, since you’re using
UILayoutGuide, you’ll need to create an instance of it. Then, instead of adding it by calling
addSubview(UIView), you’ll be using
Notice that, since
UILayoutGuide isn’t a member of the view hierarchy you’ll be adding your views to
view instead of
You’re now done with the
UILayoutGuide’s initial setup and with so, it’s time to move to constraints. In the end, it is similar to what you would do with an
Keep in mind that
introLabel setup isn’t in the scope of this article. Still, if you’re interested in it, take a look here.
Most of the times, you’ll end up using a
UIStackView to solve problems alike but there are cases where
UILayoutGuide shines. The presented problem isn’t the case and it was just used for a matter of presentation.
Unfortunately, in case you prefer working with Interface Builder,
UILayoutGuide isn’t available there.
In the end, what’s your opinion of it? Did you know it or is it something new to you? Let me know it, alongside with your questions and feedback on Twitter or here.
Thanks for reading. ✨