Menu & Search

How to set up different Auto Layout constraints for different screen sizes

May 10, 2015
Candy Code - 3 copy

Storyboards are a great tool and can make the prototyping/development process a lot quicker. However, making the UI look great on different screen sizes (even between phones) can be quite difficult.

Let’s assume you have one view that takes up the majority of the screen space and you’re wondering how to make everything look nice on all devices and how to use as much real estate as possible.

Example

Here’s an example where the majority of the screen is taken up by an image view with size/width ratio of 1.Auto Layout 1

This is how it looks like on iPhones.

As you can see, the layout on iPhone 4 is not optimal. In fact, the car description is cut off at the bottom of the screen. So how can we set up Auto Layout so the image is as big as possible, without cutting off the description? (Note: Let’s assume we won’t have dynamic description, because that would make this a tad more complicated, but still achievable.)

Solution #1

We can set up a height constraint for the image view in a way that it’ll always represent a certain percentage of the superview’s height.

Auto Layout - Height Percentage

Here, we set up the image view’s height constraint to 50% of the superview’s height.

Ok, the text is not being cut off anymore. But what if we want more control? What if we want to set the image view to a specific height according to screen size? Well in that case, we need to dive into code.

Solution #2

The best solution without diving into code would be to play around with constraint’s content hugging and content compression resistence priorities. On the description label and title label (Zonda R), I’ve set up content compression resistance priority to 751 so they resist compression a bit more and the only item that has less resistance is the image view. That means it will resize so the description and title will both occupy as much real estate as they need.

Result:

Here’s a link to the separate git branch using this approach.

This is obviously the cleanest approach (and it works great on every device, even iPads), but sometimes we still need more control.

Solution #3

To get more control in code, we have to set up a height constraint on the image view in Interface Builder:

Auto Layout - Height Constraint IBOutlet

Now, we have control over it in our ViewController.swift via IBOutlet.

You can see two methods we’re using – screenHeight and imageHeightConstraintConstant.

We get a lot more granular control over the image view height and can do pretty much anything. I want the image view to be as big as possible, so I experimented a bit an set up those values you see in imageHeightConstraintConstant function.

Conclusion

The best and cleanest solution doesn’t require any coding for this particular example. However, you might work with a lot more views. That’s when more control comes useful. I’d advise on always trying to set up the UI in Interface Builder and dive into code if you really can’t set up constraints in a way that everything makes sense.

I’ve found the code approach come handy only when implementing completely different layouts on iPhone 4 and 6.

Auto Layout really is powerful, but can seem scary and confusing at first. Once you do get a hang of it, you’ll be creating sweet and pixel perfect layouts in no time!

Take a look at the source code on GitHub or download the project directly (.zip file)

PS: Have any question about Auto Layouts in particular? Leave a comment and I’ll try to figure it out for you.

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