In this episode, I want to spend a few minutes talking about a special class that was introduced in iOS 9 and tvOS 9, UIStackView. Even though UIStackView is a UIView subclass, the stack view itself is not rendered. Only its contents are rendered to the screen. That's the first important feature of the UIStackView class.

What Is a Stack View

What is there to like about stack views? Stack views provide a convenient interface for creating user interfaces. Every stack view manages one or more views. The stack view lays the views it manages out in a column or a row. It is in charge of creating the necessary constraints and it also takes care of updating the layout when a change occurs, for example, when the device is rotated or when one of the views of the stack view is removed or hidden.

The idea is simple. Stack views allow you to work with Auto Layout without explicitly adding constraints. Apple recommends to use stack views as much as possible. Keep in mind that you still need to add explicit constraints to make sure the layout you want to create is unambiguous and satisfiable.

Working With Stack Views

Let's take a look at an example. Create a new project in Xcode, name it Stack Views, and open the main storyboard. Open the Object Library on the right and add a stack view to the view controller scene. The Object Library contains two types of stack views, a horizontal stack view and a vertical stack view. Choose the vertical stack view for now.

While a stack view automatically adds constraints to lay out the views it manages, you are responsible for sizing and positioning the stack view in its superview. Pin the stack view to the edges of the safe area layout guide using the Pin menu.

From the Object Library, add a label to the stack view. Notice that you're unable to position the label in the stack view. All you can do is drag and drop the label in the stack view. Remember that the stack view is responsible for laying out the views it manages.

Let's now add a view to the stack view below the label. With the view selected, open the Attributes Inspector and set its background color to red. Open the Object Library again and add a button below the view you just added.

There are a few things worth pointing out. Remember that labels and buttons have an intrinsic content size. A vanilla UIView instance doesn't have an intrinsic content size. In a stack view, views with an intrinsic content size appear at that size. In other words, the stack view respects the view's intrinsic content size.

The red view doesn't have an intrinsic content size and, as a result, it is stretched to fill the stack view. That's another feature of a stack view. Stack views by default attempt to fill the space they have available.

Configuring Stack Views

Let's take a look at the attributes of the stack view. Select the stack view and open the Attributes Inspector. Even though you cannot directly interact with the constraints of the stack view, you can configure a stack view to tell it how it should lay out the views it manages.

Axis

The axis of the stack view determines how the views it manages are laid out.

Alignment

The Alignment property of a stack view defines how the views are laid out along the axis of the stack view. The default is Fill. There are three other options, Leading, Center, and Trailing.

Distribution

The stack view's Distribution property determines how the views are distributed along its axis. If the distribution is set to Fill, the stack view respects the intrinsic content size of the views that have one. Not every distribution is useful or applicable for every situation.

Spacing

The Spacing property can be used to add spacing between the views the stack view manages.

Nested Stack Views

Select the stack view in the view controller scene and delete it. For the next example, I want to show you two other features of stack views, the Embed In Stack button, which I briefly mentioned earlier in this series, and nesting of stack views.

Add a label and a text field to the view controller scene and, with both views selected, click the Embed In Stack button at the bottom. Interface Builder embeds the selected views in a stack view. It inspects the current alignment of the selected views to determine the axis of the stack view.

Select the stack view and set Spacing to 8 points. Press the Option key, click the stack view, and create a copy of the stack view below the current stack view. Drag a button from the Object Library to the view controller scene and set its title to Sign In. Select the two stack views and the button and click the Embed In Stack button. Interface Builder inspects the alignment of the selected views and embeds them in a stack view, a vertical stack view in this example.

With the stack view selected, open the Attributes Inspector and set Spacing to 8 points. Open the Pin menu, pin the stack view to the bottom of the safe area layout guide, and fix the stack view's width to 240 points. Open the Align menu and horizontally center the stack view in its superview.

Have you noticed that we didn't have to specify the stack view's height? The vertical stack view inspects its contents and updates its intrinsic content size, which the layout engine uses to lay out the user interface.

Set the text property of the labels to Email and Password respectively. To make the form a bit nicer, control and drag from the top label to the bottom label and choose Equal Widths from the menu. That looks much better.

We need to fix a minor issue. Select the vertical stack view, open the Attributes Inspector, and set Alignment to Fill to force the nested stack views to take up the entire width that's available.

Stack views are incredibly powerful and a very welcome addition to Auto Layout. With very little effort, you can create beautiful, dynamic user interfaces without drowning in constraints.

In the last episode of this series, we take a look at a few best practices and we also discuss how to avoid common Auto Layout pitfalls.