Auto Layout Recipes (part 1)


With iOS now available on more screen sizes, proficiency with Auto Layout has become a necessity. Unfortunately, I’ve observed many novice iOS developers whose first reaction to Auto Layout is to shy away. It can be intimidating, so in this post I’ll show a few common tricks that show the power and ease of use of Auto Layout.

Before trying to learn any fancy tricks, it’s important to understand the basics. In a previous post, I covered some of the underlying concepts. If your understanding of Auto Layout is shaky, that post will be a good starting point.

Animated Layout Update

Auto Layout works elegantly in combination with iOS’s existing animation APIs. It allows us to update the frames of several views at once, while animation blocks allow us to capture all changes to a view and animate them. Here’s an example of multiple views that perform an animated resize.

All changes in the layout can be easily animated

All changes in the layout can be easily animated

Here’s the code that’s driving the above animation:

@IBOutlet weak var constraint1: NSLayoutConstraint!
@IBOutlet weak var constraint2: NSLayoutConstraint!
@IBAction func animateViews(sender: AnyObject) {
constraint1.constant = CGFloat(arc4random_uniform(200))
constraint2.constant = CGFloat(arc4random_uniform(200))
UIView.animateWithDuration(0.5, animations: {

This code is forcing Auto Layout to update from within an animation block. The block captures all the changes to the layout and animates them into place.

Single-Line Truncation

Text can be a pain, but Auto Layout makes it easy to deal with. In this example, we’re changing the size of a label to show how the UILabel class deals gracefully with being truncated.

UILabel truncates the line of text based on the layout

UILabel truncates the line of text based on the layout

This effect can be achieved with a very small amount of code:

@IBOutlet weak var constraint1: NSLayoutConstraint!
@IBAction func slider1Changed(sender: AnyObject) {
constraint1.constant = CGFloat((sender as UISlider).value)

In this example, the layout is squeezing the label. Conversely, one could create a layout where the length of the text determines the position of other views. For example, an image could be fixed to the right edge of the label. In this case, the image would move depending on the length of the text.

Multi-Line Truncation

Truncating text also works with multi-line text labels. Our last example squeezed the label horizontally, but this one will squeeze it vertically:

UILabel truncates the block of text based on the layout

UILabel truncates the block of text based on the layout

The code for this example is exactly the same as the code from the last example. The only difference is which constraint is being updated.

More To Learn

This post shows some of the most basic uses of Auto Layout. In the next post, we’ll cover more advanced techniques.

As usual, all code used in this post is available on GitHub.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s