The Only UIStackView Guide You Will Ever Need

Photo by Kimberly Farmer on Unsplash

Prerequisites:

Terminology

UIStackView: An interface for laying out objects horizontally or vertically

The world of constraints and Auto Layout is tricky to some. The addition of constraints and layout can be tricky, and especially so if you require putting your views into a complex layout of some sort. The solution? Stack views are there to rescue you.

You might prefer to use Interface Builder or programatic means to add UIStackView into your project. It doesn’t matter: this article has you covered in either way.

The way a Stack View (UIStackView) displays subviews is defined by the following properties, which at runtime create the constraints necessary to create the Stack View.

These properties are:

axis: The axis along which the subviews are laid out, either .horizontal or .vertical
distribution: The distribution of arranged views along the axis
spacing: The distance in points between the adjacent edges of the stack view’s arranged views

Playing with the properties

axis

The axis can either be vertical or horizontal, as shown in the following animation:

The height and the width of each cell in the cases shown changes as the axis switches from horizontal to vertical.

The following examples are all with the axis as horizontal.

Spacing and distribution

The following will go from minimum spacing and are animated to show the differences in the stack view as the spacing changes

Equal centering

Equal centering attempts to arrange the subviews so they have an equal center-to-center spacing. The following image shows that spacing from subviews a-b-c — any shrinking happens according to the compression resistance priority that the subviews are assigned.

Equal spacing

Equal spacing pads the subviews evenly, any shrinking happens according to the their index in the stackview.

Equal

The subviews are resized so that they use the avaliable space along the stackview’s axis. Note here that changing the spacing changes the size of each of the subview.

Fill Proportionally

The subviews are resized proportionally according to their intrinsic content size, see the animation when the spacing is changed.

Fill

The subviews are resized so as to fill the available space. In order to fill it, they are stretched according to their hugging priority, and ambiguities resolved by referring to their index in the parent stackview.

Alignment

The alignment of subviews in the stackview is brought into full clarity when the default is considered first (fill), that is the subviews fill the available space perpendicular to the axis of the stackview.

Without this we are thinking rather about the intrinsic size of the subviews, and therefore leading, trailing, center are quite clear in their meaning. Horizontal stackviews also have firstBaseline andlastBaseline that are determined by the forFirstBaselineLayout and forLastBaselineLayout properties of the subviews.

Stackview basics

A stackview contains an array of subviews, which are displayed within the stackview itself.

I’d recommend that you download the repo and see how I’ve set this up (in a playground), but in any case I’ve called my UIStackView stack (short for stack view, not representing any other data structure).

let stackView = UIStackView(frame: CGRect(x: 0, y: 0, width: 200, height: 40))

Add arranged subview

For each of these examples I’ve used simple UIView instances that are colored in a primary color — but you could put any view that is a UIView subclass into the stackview (gosh, what a sentence). Moving on…

This adds a new element at the end of the UIStackView you can use addArrangedSubview():

self.stack.addArrangedSubview(nv)

Now if you wish to have it in a particular index you can place the subview into the following

self.stack.insertArrangedSubview(nv, at: insertionIndex)

Remove subviews

We might remove an item that we have a reference to — so when adding such items we would need to be a little bit careful.

For this example, we can remove all the items in the subview using for…in

for item in stack.arrangedSubviews {
stack.removeArrangedSubview(item)
}

alternatively we can use forEach:

stack.arrangedSubviews.forEach{ element in
stack.removeArrangedSubview(element)
}

If you use either of these you will need to remove the item (or element, respectively) and remove it with item.removeFromSuperview() or element.removeFromSuperview() to ensure the item does not still appear as a subview.

Conclusion:

Using Stack Views can, no doubt be tricky.

However, the idea is that they create their own constraints based on the properties shown above.

Knowing how these properties can be used to create the effect that you want really gives you a head-start on producing that great user experience. Who *wouldn’t* want that?

It is always nice to look at the source, and that in this case is to Read Apple’s documentation about UIStackView

I hope this article has been of help to you, and you can see the code from this is included in the attached Repo to get the whole lot in one go!

If you’ve any questions, comments or suggestions please hit me up on Twitter

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store