Auto Layout Recipes (part 2)

Software

In a previous post, I started going over some useful Auto Layout tricks that every iOS developer should know. In this post, I’ll continue with a few more ideas of greater complexity.

If you’re feeling rusty on the basic concepts in Auto Layout, head over to another previous post which will provide a quick refresher.

Proportionally Stretching Views

In many layouts, you’ll want your content to fill the available space. Perhaps you have a few pieces of content, and they should take up an amount of screen real estate that is proportional to their importance. Auto Layout makes this task easy.

In this example, the blue and red views each share half of the height of the superview. This is accomplished with the following vertical constraints:

  • The blue view’s top is aligned to the top of the parent view.
  • The red view’s bottom is aligned to the bottom of the parent view.
  • There is a fixed vertical spacing between the bottom of the blue view and top of the red view.
  • The blue and red views are of equal height.

I repeat the same process horizontally with the red and green views to demonstrate the ease of having an unequal proportion. To create this effect, set a multiplier other than 1.0 for the equal widths / heights constraint (the last bullet in the list above).

When the parent view stretches, subviews maintain their relative sizes

When the parent view stretches, subviews maintain their relative sizes

Here’s the code that makes it work. It should be familiar from the previous post:

That’s all the code. The rest of this fairly complex behavior comes from Auto Layout.

Centering a Group of Views

Layouts often have groups of views that should be centered. There’s often no guarantee that those views are the same size, or that size won’t change over time.

In this example we have three views. To center them, we can use the following horizontal constraints:

  • The red view’s left is aligned to the parent view’s left.
  • The blue view’s right is aligned to the parent view’s right.
  • There is a fixed spacing between each of the views.
  • Each view has a specific width.
  • The parent view is horizontally centered in the scene.

This example happens to have three views, but we can create similar behavior for any number of views.

Though the sizes are different and changing, the group of views stays centered

Though the sizes are different and changing, the group of views stays centered

In the previous example, we use the size of the parent view to calculate the size of the subviews. This example is interesting because we do the opposite.

The code is the same as the previous snippet, but using only one slider. Again, we’re getting some pretty nuanced behavior for only a few lines of code.

Gracefully Adjust for Removed Views

Often some subset of our data can be optionally omitted. In that case, the easiest thing to do would be to remove the view that displays that data. This gives more screen space for whatever data we do have.

In this example, the green view will represent a view that we have included in our storyboard. At runtime, we determine that the view is unnecessary and we remove it. Auto Layout gracefully adapts, stretching the blue view to fill the newly empty space.

This effect is accomplished with the following vertical constraints:

  • The red view’s top is aligned to the top of the parent view.
  • The blue view’s bottom is aligned to the bottom of the parent view.
  • The red and green views have a fixed height.
  • There is a fixed vertical spacing between the red and green views, and between the green and blue views.
  • There is an additional, lower-priority fixed vertical spacing between the red and blue views.
When the green view is removed, blue stretches to fill in the space

When the green view is removed, blue stretches to fill in the space

Here’s the code:

As long as the green view exists in the hierarchy, the constraints that are attached to it supersede the priority of the red-blue constraint. When it is removed, the red-blue constraint becomes active.

This approach has a catch: Auto Layout cannot re-adjust if the view is added back into the hierarchy once it has been removed. This means the technique works great for scenes that will be re-created every time the user views them. However, it is less useful for cells in table views because the cells are reused.

In iOS 8, the active property was added to NSLayoutConstraint. Using that property might be preferable to this approach if you don’t need to support older versions of iOS.

That’s All

Those are some of the most useful Auto Layout tricks that I have up my sleeve. I hope you’ve enjoyed digging in and exploring the possibilities.

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

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s