Auto Layout for (existing) iOS projects

Developing for the iPhone 6, 6 Plus and beyond in Xcode

Published in

Design and Develop

6 min readJan 23, 2015

Months after the iPhone 6 and 6 Plus launch we’re still waiting for some major appsto launch an optimized layout for these screen sizes. There was some surprise that even companies like Spotify, WhatsApp and Snapchat took 3–4 months to release updated interfaces. But I think the mystery is quite easy to solve: it’s just a substantial job to do so.

Apps like Spotify probably developed tons of custom interactions that need to be rewritten or even rethought to scale to larger devices. We have several apps in the App Store and are rebuilding some major apps releases to let them scale.

As I’m probably not the only one working on these challenges, I thought it would make sense to share my personal thoughts, insights and great articles that help to make your (existing) iOS project adaptive.

Adaptive Layouts

I’m convinced it won’t be long before Apple will start rejecting apps that are not optimized for all devices. Not only for new iOS app submissions, but also for updates on existing apps. If you’re planning minor updates on existing projects, you could be surprised with a large amount of work for a small bug fix. Or worse, for an important security update.

That’s why I suggest to start implementing adaptive layouts in your existing iOS projects before being confronted by this. The adjustments from fixed to adaptive layouts could range from hours of work to months. This largely depends on the complexity of your app and how much custom code has been used.

Designing Adaptive Layouts

Apple added two key features that make adaptive layouts for iOS a reality: Auto Layout and Size Classes.

Auto-Layout

Responsive web and Android developers might be surprised by this subject in the year 2015. But fact is, for a long time it was often the easiest (in some cases even best practice) to create fixed layouts for iOS devices. Auto Layout was introduced in iOS6 (mid 2012) and although Auto Layout frustrated me at first, I now think that Apple has executed the concept in an impressive way. I even believe they first needed to create Auto-Layout, before they could release larger phones.

*Xcode clearly indicates if the layout doesn’t match your constraints.*

Auto Layout according to Apple: “Auto Layout is a system that lets you lay out your app’s user interface by creating a mathematical description of the relationships between the elements. You define these relationships in terms of constraints either on individual elements, or between sets of elements.”

In some way Auto Layout feels like an exciting puzzle. Once you have described all the rules for your layout, the puzzle falls into place. As you can see in the Bingo Card example above, I defined all the relationships and when you move a square in Interface Builder it will warn you that the layout is not according to your constraints.

Size Classes

In Xcode 6 Apple introduced Size Classes. Size Classes let you set different constraints for certain screen sizes. This let’s you go beyond basic stretching layouts.

Size Classes can best be compared to breakpoints with media queries in CSS. The breakpoints are predefined by Apple and it depends on your app if targeting with Size Classes is needed or useful.

With these core features described, I would like to share the articles that can help to kickstart your adventures in the wonderful world of Adaptive Layouts with iOS.

Getting started

Before you even open your new or existing project it’s important to get a clear understanding of the key features that Apple provides to make adaptive layouts possible.

Understanding constraints and size classes

The article that helped me the most to get a clear understanding of adaptive layouts with Xcode is Designing Adaptive Layouts for iPhone 6 by Matthew Sanders. His promise that ‘by the end of this post you should be comfortable with using storyboards, constraints and size class traits’ is definitely true. Walking through the article takes about an hour. An hour well worth spent.

Read: Designing Adaptive Layouts for iPhone 6 by Matthew Sanders (UsTwo)

Enabling Auto Layout and Size Classes

To be able to use Auto Layout and/or Size classes you’ll have to enable this in the Storyboard or Interface Builder (XIB) file. If you’re working on an existing iOS project you probably also need to set the Launch Screen of the app. Until recently the Launch Screen was an image, but with scalable layouts you now need to create a separate Interface Builder file. Important: Native resolution is not enabled without the Launch Screen. Until you set this, it will use scale mode, which just blows up your old app on iPhone 6 screen sizes.

Once you start setting constraints in the layout, you will need to set all constraints to make it work. This makes sense: if you define that a label should be a certain distance from an image, Xcode also needs to know where the image is placed to display the layout correctly on all resolutions.

When you start working with Auto Layout on actual iOS projects you can expect to run into issues. Xcode will do its best to resolve these issues, but the solution will not always meet your demands. Apple’s own documentation on Resolving Issues with Auto Layout might come in handy to resolve these issues.

Scaling according to the content size

An important part of successfully implementing Auto Layout is understanding how you can scale elements by using Content Hugging and Resistance.

In short, with Content Hugging you can define if certain objects (Labels, Images, etc.) should grow when needed. With Content Compression Resistance you can define which object should or should not shrink when content overlaps. This growth isn’t only defined by screen size or orientation, but also by the content itself. For example, a text label will have a different size in different languages. In Xcode this is called Intrinsic Content Size.

The Auto-Layout video tutorial by Ray Wenderlich will help you gain a better understanding of these crucial settings.

The joy of Self Sizing Cells

Once you’re comfortable with setting up views with Auto Layout, you’ll probably want to think about tableviews next. UITableviews probably are (or will be) the most common views in your app. Tableviews are not only used for basic rows but also more complex layouts with custom cells.

With Auto Layout a cell in a tableview can in theory be any size. The row containing the cell can keep its proportions and therefor grow in height, or keep its height if that’s preferred.

Until recently iOS developers had to calculate the height of a cell when its content was dynamic. With Auto Layout calculating the height of cells would be an even bigger hassle as it depends on the dynamic content, device and orientation (horizontal, vertical).

Luckily Apple came prepared with the introduction of Self Sizing Cells in iOS8. This new feature lets you replace a big share of your tableView code with just these two lines:

tableView.estimatedRowHeight = 44.0tableView.rowHeight = UITableViewAutomaticDimension

This is definitely one of the biggest new features in the new SDK. AppCoda has written a clear introduction to Self-Sizing Cells. This Stackoverflow Thread should answer the most common questions regarding using Auto-layout in UITableview.

Concluding

That’s it for now. I hope this article, and the great tutorials mentioned, help you to feel comfortable with the topic. Have fun diving into the wonderful world of adaptive layouts for iOS.

Articles mentioned for further reading:

This article was originally published on the Mangrove Journal.