Menu & Search

How can intrinsic content size help make my layouts cleaner?

March 30, 2016

Views with Intrinsic Content Size (ICS) have a natural size given their current content and we’re going to demonstrate that in less than 50 lines of code.

ICS means a label knows how big it has to be to properly display the text with its font. A button does the same, but adds a little bit of vertical and horizontal padding.

Ok, but what does it mean for us? It means we don’t have to bother adding unnecessary vertical or horizontal constraints. If we want the label to display some text with font size 24, we don’t have to bother adding a height constraint so the label won’t be too small. If we want the same label to display the same text with the font size 48, we just change the font and voilà, our label is properly resized, no constraint changes needed!

Now, as we know, every time we don’t add something to our code, we have less chance of something going wrong. It’s the same with any kind of code – the less you write, the less bugs you introduce.

That’s why a general rule I follow is to add as faw constraints as possible.

Example

To demonstrate this property, I’ll use Playgrounds (for the first time on my blog!) You’ll be able to get a hold of the complete file at the end of the post.

First off, we start by creating a placeholder view that will contain a few labels

Pro tip: if you’re dealing with Auto Layout in your Playgrounds, do not forget this line:

Now let’s add our first label

The result is … not very impressive:

ICS-1

Ok, moving on. Now we add a new label that will stick to the right edge of Lefty.

Surprise surprise:

ICS-2

Here comes the big demonstration point. What happens now if we change the text of the Lefty label? Because of its Intrinsic Content Size, it will grow and “push” the right label along the way:

ICS-3

To spice things up a bit, lets add another label below the leftLabel . Then, change the font of the  leftLabel to 48. Is it going to work or are we going to end up with labels on top of each other?

Drumroll please …

ICS-4

It’s working! No height or width constraints and our layout is resizing itself like a boss.

We basically set up the layout you see above with a total of 7 constraints. 7 constraints and all the labels will behave nicely, no matter the content or font size!

To get a hold of the full Playgrounds file, follow this Gist link.

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

How to properly do buttons in table view cells using Swift closures

Note: This post is an upgrade of the original post…

A practical MVVM example in Swift – Part 2 (featuring RxSwift)

Welcome to part 2 of the practical MVVM example in…

A practical MVVM example in Swift – Part 1

The good ol’ MVC pattern has been around for a…

Type your search keyword, and press enter to search