Responsive design with UIStackView


UIStackView is my go-to view when I try to layout views in the Auto layout. The good thing about UIStackView is it is effortless to make a responsive design out of it. Today we are going to learn how to use UIStackView that adapts to size change.

A design in portrait and landscape
A design in portrait and landscape

Let's start with a simple layout of a single vertical UIStackView with three elements (UIImageView and two UILabel).

Simple UIStackView
Simple UIStackView

If you rotate right now, this is what you get.

Simple UIStackView
Simple UIStackView

Horizontal axis for landscape #

What we want to do is changing our axis of the stack view to horizontal for landscape. The concept of portrait and landscape is obsolete in iOS 8 and replace with a concept of Size classes where the width and height are categorized into two classes, regular and compact. So, when we want to make an adjustment for landscape, what we really want is to make an adjustment for compact height.

Apple makes this adjustment very easy when using the storyboard. To do this:

  1. Open storyboard and select a stack view that you want to make a modification.
  2. In Attributes Inspector, click plus icon (+) on the left of Axis attribute.
  1. Since we want to modify axis for compact height, we would set Width and Gamut to Any and Height to compact.
  1. Click Add Variation and you will see a new row with hC label (height Compact).
  2. Edit this new row to Horizontal.

That's all you need to do to make the stack view axis horizontal in the landscape. Run the app, and this is what you get.

UIStackView with horizontal axis for compact height
UIStackView with horizontal axis for compact height

Two stack view #

We are halfway done at this point. The rest is just a small modification on the label's part. Right now, everything shares the same stack view, but we want two labels to align vertically regardless of size classes. So, we will create another stack view to hold these two labels.

Nested stack view
Nested stack view

Here is the result.

Nested stack view
Nested stack view

The outer stack view becomes horizontal on a landscape, and the inner stack view maintains the same vertical axis.

Nested stack view
Nested stack view

Alignment #

The only thing left to make a landscape layout look perfect is an alignment. Right now, the labels spacing are too large. That's because our stack view alignment is fill. To fix this, we will change alignment to center for compact height.

What we need to do is repeats all the steps that we did, but this time do it on Alignment attribute.

  1. Open storyboard and select a stack view that you want to make a modification.
  2. In Attributes Inspector, click plus icon (+) on the left of Alignment attribute.
  3. Set Width and Gamut to Any and Height to compact.
  4. Click Add Variation, and you will see a new row with hC label (height Compact).
  5. Edit this new row to Center.

Here is the result.

Final design
Final design

And here is a layout. The outer stack view is now center align in compact height trait.

Final design layout
Final design layout

Conclusion #

Adding variation based on size and gamut isn't available just for a stack view. This is a storyboard feature that you can use on any UIKit views. You can easily figure the support attributes by looking at the plus (+) sign on the left of attributes.

Attributes Inspector of UIStackView.

Attributes Inspector of UIStackView
Attributes Inspector of UIStackView

Attributes Inspector of UIImageView.

Attributes Inspector of UIImageView
Attributes Inspector of UIImageView

You can even change NSLayoutConstraint attribute based on these traits.

Size Inspector
Size Inspector

That's all you need to do to make your layout adaptive.


Feel free to follow me on Twitter and ask your questions related to this post. Thanks for reading and see you next time.

If you enjoy this article, you can subscribe to the weekly newsletter.

Every Friday, you’ll get a quick recap of all articles and tips posted on this site — entirely for free.

← Home