Introducing The “How do I Auto Layout” Cheatsheet
STOP LOSING TIME WITH AUTO LAYOUT! Take part in the…
One thing all developers should have deeply embedded in their brain is that adding more rules into their code adds complexity.
It’s the same with Auto Layout. If you can set up your UI with 10 AL constraints, you should try to make it work with 9. If you’ve just added a width constraint to an element, ask yourself if this is really what you want or if you can do it more effectively.
Now, to the topic of UILabels. They are one of the most commonly used elements, yet many developers (including me up to not so long ago) still don’t know that they possess a special property called intrinsic content size.
The intrinsic content size greatly simplifies Auto Layout and reduces the number of constraints you have to add to your layout.
Let’s look at a simple example.
Here we have a UILabel with only 2 constraints we’ve added ourselves. It even works with a longer text:
How come the label is being displayed properly? See, the trick is in the intrinsic content size. UILabel s (and other components that share the same magic) calculate their own content size.
PS: If you have custom views, you can implement intrinsicContentSize yourself and harvest the benefits as well.
We have a bit more complicated UIs in real life, so let’s continue exploring what happens with intrinsic content size if we add a button to the right edge of the screen.
Woops. This doesn’t look right … right?
This happened because there was no constraint limiting how wide the label can be. This is where most developers make a mistake and do something like this:
If you inspect the constraints, you’ll see that I added a width constraint on the button (80) and a horizontal spacing constraint between the label and the button (8). What happens if I run the app?
It works. But I had to add two constraints – one to limit the size of the button and one to determine the horizontal spacing.
So what is the correct approach you might ask.
We should simply allow Auto Layout to do its magic and rather think of how far are we willing to let it go. So instead of saying “my label and button should be 8 points apart“, we should say “my label and button should be at least 8 points apart“.
Lets remove the unnecessary width constraint on the button and change the horizontal spacing like this:
Now both elements will use their intrinsic size unless one overlaps the other. With this setup there is one more problem we have to take care of. It’s the Content Compression Resistance Priority. This property tells Auto Layout how much the element should resist to compression. And since we know that the label will try to “compress” the button because its intrinsic content size is quite big (long text), we should say that the button should resist compression more than the label.
The default value is 750 for both elements, so if we just change the one on the button to 751, the app will work as expected with as few constraints as possible!
But wait! We don’t see all the lollipops. How can we fix that? Well, because our layout is set up properly, we can just change the Lines property on the label from 1 to 0 and re-run the app.
Pretty awesome, right?
Take part in the 5-day course with actionable tasks that will let you become a master at recognizing and solving the most common mistakes iOS developers do with Auto Layout.
Let Auto Layout become a tool you swing with your utmost confidence!