Menu & Search

How to correctly set up UILabels with Auto Layout on iOS

November 22, 2015

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:

2-constraints

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:

mistake

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?

Simulator Screen Shot 22 Nov 2015 16.47.03

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:

greater-than

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!

compression-resistsance

Simulator Screen Shot 22 Nov 2015 16.55.18

Bonus

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.

lines

Simulator Screen Shot 22 Nov 2015 16.56.58

Pretty awesome, right?

Remember

  1. Avoid adding width and height constraints to labels, buttons, etc. unless you have a solid reason
  2. Resort to intrinsic content size to reduce the number of constraints you add
  3. Watch out for the Content Compression Resistance Priority, especially if a view is not being displayed correctly (too narrow or too wide)

As always, check out the source code on GitHub or download the zipped project directly. And if you like the post, don’t forget to leave your email to get more like these in your inbox! 🙂

STOP LOSING TIME WITH AUTO LAYOUT!

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!

I won't send you spam, I promise. Unsubscribe at any time. Powered by ConvertKit
Hey there! You're already subscribed to my newsletter and you've hopefully gotten some useful tips and tricks when working with iOS. If you're also working with Auto Layout, make sure to check out my book called Auto Layout Fundamentals and get a 20% off for being my subscriber! https://gum.co/autolayoutfundamentals/youareawesome
Jure Zove

A lot of things but mostly a programmer who really likes fast cars. Check me out on Twitter, if you fancy.

Related article

Introducing The “How do I Auto Layout” Cheatsheet

STOP LOSING TIME WITH AUTO LAYOUT! Take part in the…

Fastest way to use Auto Layout in code

Raise your ✋ if you hate adding views and setting…

Swift Optionals Demystified

STOP LOSING TIME WITH AUTO LAYOUT! Take part in the…

Type your search keyword, and press enter to search