Show Menu

Looking to hire an app developer?

Submit your 30 day Job Listing for FREE

It seems that starting from iOS 9 the situation will be much more easier for us thanks to UIStackView class!

This class is a welcome addition to UIKit and in this tutorial we briefly go through some of the main aspects that make it so useful. Without further ado let’s start introducing the UIStackView class!

When it comes to work with Auto Layout to build a complex user interface, it happens that you end up creating a huge number of constraints. Some of those constraints are needed for the main structure, some other are needed just to keep some secondary elements aligned. That said, even if you are skilled enough with Auto Layout, updating crowded user interfaces is… annoying. There isn’t a quick and easy way to go through this task and, sometimes, the risk of breaking the UI is damn high!

UIStackView in a few words

A UIStackView is a lightweight subclass of UIView whose main role is to act as container for other views. Thanks to this class we can easily group elements keeping them organized with a shared logic: For instance, you can create a vertical list of elements that are equally distributed through the height and aligned to the right of their container view (the Stack View). As you can see we are defining the vertical, the horizontal and the distribution behaviour at the same time. Believe it or not, you don’t have to add a single constraint! All this information are managed for you by the UIStackView, you have only to define some properties…all the rest comes for free.

The properties that define how Stack View views are organized are essentially 3: axis, distribution and alignment. We can setup those properties through Interface Builder or programmatically. Even if I’m not a fan of the Xib-way, I’ve to say that organizing user interfaces with UIStackView and Interface Builder is extremely easy and useful to maintain and update the layout in the future.

Let’s code…

With this Swift 2 tutorial we make some experiments with the Stack View (UIStackView) to understand how it works. First, launch your Xcode 7 application and create a single page project. In the Project Navigator to the left of the screen, click to open the Main.storyboard.

To create a new Stack View (UIStackView), you just drag and drop a vertical Stack View from the IB objects library into a view controller of the Storyboard/Xib and add some constraints to define a fixed size. Let’s say 200 X 200 and anchor the Stack View to the top left of the main view.

Now just drag and drop some Images and a UILabel inside the Stack View. As you can see the elements are some how arranged vertically within the Stack View.

Swift 2 UIStackView vertical

(You can also create a Stack View selecting some views and just pressing the “Stack View button” in Interface Builder. The selected view will be wrapped into a new instance of Stack View).

UIStackView Button icon

Select the Stack View and open the Attribute editor, here you find the properties previously introduced.

UIStackView Properties Swift-2

The axis has only two possible values: Vertical or Horizontal and, depending on your selection, the views handled by the Stack View are distributed along the Vertical or the Horizontal axis.

UIStackView Axis Swift 2

Just try to switch the current example axis value to Horizontal to see how the labels will be rearranged.

Swift 2 UIStackView Horizontal

Let’s check the alignment parameter. Depending on the axis, you can define how to align elements into the available space. If you select Vertical axis you can align elements to the leading, trailing and center of the stack while if the axis is horizontal, the choices are top, center or bottom. With both axis you can select the fill alignment to have the views expanding to take all the available space.

UIStackView Alignment

Just to continue with the previous example, you can select “Trailing” alignment to see how the elements will be moved to the right of the Stack View.

UIStackView Right

The distribution property describes how the stack elements should be distributed along the available space. The views are placed inside the Stack taking into consideration their intrinsic content size, hugging and compression priority values. Essentially you can decide to fill the available space with the stack elements or just to place those elements along the available space. The main difference is that with the former way the elements’ size should change to fit the Stack View size, with the latter way the Stack View changes only the elements positions.

The available options for fill-mode are fill, fill proportionally, fill equally. While if you prefer to displace the elements without changing any size, the possible values are Equally Spacing and Equally Center.

UIStackView Distribute

For the current example select “Equal Spacing” and you’ll find out that the Stack View tries to arrange its subviews adding similar margins between views edges.

Swift 2 UIStackView Center

You can better specify the element distribution defining also a value for the **spacing** property.

UIStackView structure

The views that are managed by the Stack View are subviews of the Stack View itself but they are also contained inside the arrangedSubviews array. This property is a subset of the Stack View subviews and each view that you add to this array is also added as subview of the Stack View, if you add a subview using the standard method “AddSubview” this view is not handled to the Stack View, but it might be used for example as a decoration view (you are responsible to set the view position inside the Stack View bounds).

You can add elements to the Stack View arrangedSubviews list using the addArrangedSubview method or the insertArrangedSubview(view:stackIndex:) method to better define the Stack order.

When it comes to remove a handled view from the Stack you can call the removeFromParent view’s method and the view will be removed form subviews and arrangedSubviews arrays.

A UIStackView can be managed exactly as any other UIView subclass: You might create complex structures adding a Stack View as child of another Stack View or insert it inside a Scroll View. Just keep in mind that the only constraints that you have to add are those that define how a Stack View is placed inside a parent view, and only if the parent view is not another Stack View. In that case the constraints will be created for you.

So, to recap, this Swift 2 Tutorial was a quick introduction to the UIStackView class. I hope you can see the huge potential in this new class like I can.

having issues?

We have a Questions and Answer section where you can ask your iOS Development questions to thousands of iOS Developers.

Ask Question

FREE Download!

Get your FREE Swift 2 Cheat Sheet and quick reference guide PDF download when you sign up to SwiftMonthly


Sharing is caring

If you enjoyed this tutorial, please help us and others by sharing using one of the social media buttons below.


Written by:

Bitwaker (Yari D'areglia) is a Senior iOS Developer author of the book Learning iOS UI Development. He is also the developer of Prio app and he actively writes about iOS on Think And Build.

Comments

comments