iOS 9 UIStackViews

By: Sam Solomon

We’ve all been there before, building a scene on the storyboard using view after view to hold labels, buttons and pseudo-separators. Or worse yet, using spacer views as struts to hold your views in place, as suggested by official Apple documentation, and then throwing in a handful of auto-layout constraints hoping it won’t explode (LAYOUT MAGIC!).

Then there’s the UIView : too many constraints; UIScrollView+UIView : Inconvenient; ContainerView : Code verbosity; conundrum that we’ve all faced at one point, forcing us to resort to more and more complicated views resulting in terrifyingly complex code that even we would find unreadable.

UIStackViews, however, are simple and convenient to use. Methods of implementation and appropriateness of usage are easy to imagine, especially when presented with a problem that requires a strong fire-and-forget solution involving auto-layout constraints. UIStackViews now removes the need for you to even add constraints, instead generating constraints automatically. They may not always be the answer, but they definitely do make life easier. How, you ask? You could just take a look at the official Apple documentation, but like all Apple documentation, it’s obscure, uses terrible examples, and overall does a really bad job of explaining what it is and how to use it.

Let me take a crack at it, and (hopefully) do a better job of it. Let’s say you want to build a simple view like so;

The usual approach would be to place these views manually and add auto-layout constraints to each view element, use a UITableView with static/dynamic cells, use UIViews to encapsulate subviews, and then add constraints for elements inside the UIViews, and between UIViews. All those approaches can quickly become tiresome, and require a great deal of grunt-work.

Using UIStackViews makes this whole process simpler, not easier. A UIStackView is essentially a container view that treats its subviews as linear members of an array, occupying a unique spot in the index. To visualize as a real world object, let’s imagine it to be a 2D stackable grid, like the frame from Connect-4, except that you can only stack items vertically or horizontally. However, you can add a Vertical UIStackView into a Horizontal UIStackView and vice versa, nesting multiple types within each other to provide solutions for a plethora of use cases.

IMPORTANT: Using UIStackViews is dependant on the iOS9 SDK & Xcode 7 (beta or otherwise), and your minimum deployment target set to iOS 9.0.

Lets start by adding a UIStackView to an empty UIViewController. Add top and leading constraints to the UIStackView, and center it.

Adding the “TITLE” header as the first item adds it at Index 0 by default. Add the next label, “Title” at Index 1;

The snapper appears, indicating the position it will be added at. Your stack view will look like this once all your views have been added;

At this point, it is important to give you a quick overview of the attributes of a UIStackView. Lets start from the top;

Axis : Vertical/Horizontal

The axis of a UIStackView determines if the views are going to be stacked side-by-side, or on top of each other.

Alignment : Fill/Leading/Centered/Trailing

Alignment defines where the view element is located within the bounds of the UIStackView. The alignment for the whole stackview could be set, and this will enforce that alignment property on all its subviews.

Distribution : Fill/Fill Equally/Fill Proportionally/Equal Spacing/Equal Centering

Distribution defines the view frame for the element, relative to the frame of the UIStackView. This has always been ambiguous, and this option is usually left untouched during most of our view building activities.

Spacing : X

Spacing defines the distance between all individual elements in the UIStackView. So if you were to set a spacing of 10, all of the subviews would have a minimum spacing of 10 between each other. This can be a little inconvenient if you’re trying to set up a view that has runtime-specified spacing, or custom spacing. Or you could just throw in spacer views. \jk

Baseline Relative

Baseline Relative takes the distance between views from their baselines while creating the stack.

Layout Margins Relative

Layout Margins Relative uses points relative to the layout’s margins to place subviews in the stack.

All of these attributes and those of the view elements being added to it contribute heavily towards how the view is rendered on a display. UIStackViews are highly context-sensitive in that any change to the overall stackview affects the behavior of the elements within its bounds.

There is an argument that UIStackViews don’t really add any new functionality. This argument holds weight, however, if you consider that you can do pretty much the same thing using a container UIView. UIStackViews only disable the need for internal constraints for those UIViews by allowing you to add those constraints on the container itself.

The only way to know for sure if UIStackViews are going to be a critical component in the scope of development is to see where it works, and where it won’t. So get to it.

Here’s a link to the GitHub repo containing the example application used in this article.

Originally published at www.mutualmobile.com on September 17, 2015.