Make App Pie

Training for Developers and Artists

Why Stack Views Are Your Best Friend If You Hate Auto Layout

If you hate auto layout, you may be surprised to learn Apple does too. In Xcode 7 Apple introduced a new way to work with constraints called stack views. Stacks are containers that keep views aligned automatically. Originally announced as a lazy man’s auto layout, you do need to understand auto layout to use it correctly. For this demo and introduction to stack views, we’ll make an options page for dessert pies. We’ll suppose we will use this as a modal view, so we need to add our own navigation.

Horizontal Stack Views

Create a new project and go to the storyboard. Add a label titled Pie Options. Add two buttons titled Cancel and Done. Place them toward the top of the scene like this:


Select all three items. Click the stack button in the Auto layout menu buttons.


It has no menu, but there will be a change in the storyboard. Your three views now are embedded in a horizontal stack view.


Stack views can be pinned like any other view. Pin the stack view 0 points up, 0 Points Left and 0 points right, with update set to Items of new constraints


Besides the odd placement of the items in the stack view, the labels and buttons are not aligned. In the attributes menu for the stack view, Select First Baseline for Alignment and Fill Equally for Distribution.


Our stack view rearranges to have equal width for all the subviews, and the text in the labels and buttons align to the baseline.


However the Label is still left justified. Select the label and center justify it.


Our pseudo toolbar is now complete, a lot faster than pinning the three views

Vertical Stack Views

Add a label Topping and four buttons Whipped cream,Chocolate Sauce,Caramel Sauce and None. Give the buttons a blue background with white text. Arrange them vertically like this:


Select the label and buttons, then click the stack view button. Stack views know you want a horizontal or vertical view by context. This gets a vertical stack view.


Stack view also take by context what type of Alignment and distribution they’ll use. Due to the centered labels, the stack view centered the buttons. Change the Alignment to Fill. Also change the spacing to 3.


This makes equal width buttons and a 3 point space between them.


Pin the new stack view 10 points up, 0 points left and 0 points right. Update the frame. Checking in the assistant editor’s preview mode, we see that both landscape and portrait adapts to the new layout.


In the preview and storyboard, you’ll see a background to the stack view. In an app, a stack view always has a background of clearColor. Don’t waste your time, trying to change the background.

That’s the basics of Stack views. In my upcoming book Practical Autolayout for Xcode 7, we’ll cover more about stack views including  embedding them, and some of the perils of stack views.

6 responses to “Why Stack Views Are Your Best Friend If You Hate Auto Layout”

  1. Will Practical Autolayout for Xcode 7 be a free update to your existing Practical Auto Layout book or will it be a separate item?

    1. As much as I wish it could be an update, one of the disadvantages of Amazon Kindle is I’m pretty close to forbidden to update the book. This is particularly annoying in tech stuff with obsoletes so quickly. I’m forced to update into a new book. I will also be launching this book in iBooks who has no such policy. Apple treats all media – Apps and books the same through iTunesConnect.

  2. […] of views becomes the answer instead of auto layout. In Xcode 7 Apple introduced stack views. In an earlier post, I introduced stack views in Interface Builder. There are still some problems with stack views in […]

  3. […] an explanation of using stack views, see the stack view lesson. Your layout should look like […]

  4. […] if you want a messier app. If you are not familiar with the beauty that is stack views, you can check out this tutorial. Start by selecting the Dark Text Label and the switch. Click the stack view button at the bottom of […]

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 )

Facebook photo

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

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: