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:

image221

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

stackButton

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

image222

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

image223

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.

image224

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

Image225

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

image226

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:

image227

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.

image228

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.

image229

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

image230

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.

image232

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 Replies to “Why Stack Views Are Your Best Friend If You Hate Auto Layout”

    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.

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