iOS UIStackView

In this tutorial, we’ll be discussing and implementing the powerful component UIStackViews introduced since iOS 9 for building faster and robust UI in our iOS Application.

As the name says it stacks subviews either horizontally or vertically. That means inside a column or a row.
UIStackViews are a preferred way of building the UI since they create most of the constraints for you automatically. Also, it is very easy to add or remove subviews from a StackView.

A UIStackView consists of the following important properties:

axis: The axis along which the subviews are positioned: horizontal or vertical.
distribution: How are the subviews arranged inside the stack. Distribution consists of the following four types:

fill
fillEqually
equalSpacing
fillProportionally
equalCentering

alignment: How are the subviews aligned:

leading – left aligned
trailing – right aligned
centered
fill – occupies the space

Launch your XCode and create a new single view application. Inside the View Controller Scene add three views of different sizes.

Creating A UIStackView

We can create a UIStackView by selecting the UI elements and embedding them:

In the above illustration, we’ve demonstrated how the different alignments change the position of the subviews inside the UIStackView.

Let’s create another example in which we will play with the distribution property.

In the above illustration, we stack three Buttons horizontally in the UIStackView.
Notice that on the left hand side pane, a red error icon pops up when the distribution is not set to fill equally. It’s shown below:

Why is this error displayed? Isn’t UIStackView meant to auto-set the constraints of the subviews? What does this error mean and how to tackle it?

We’ll discuss all these in the next section.

When views are Stacked in a UIStackView, the previous constraints of the Views would be removed.

Content Hugging And Content Compression Resistance Priority

Content Hugging Priority means hugging/embracing to the content size of the view.
A View with a lower priority expands when the UIStackView size is increased and vice-versa.
The values is 250 by default. That means views with values 251 and more would have a lesser size.
Views with values 249 or less would take up the available space in the UIStackView.

Content Compression Resistance Priority means resisting compression of the size of the View.
A View with higher value priority means the size of the view won’t be compressed if the UIStackView size is decreased.
The default value is 750.

We have set the content hugging property of one of the Buttons to a lesser value. Hence it occupies more space.

When you add a UILabel and a UITextField inside a UIStackView, by default XCode gives the UITextField lesser content hugging priority and more available space.

Let’s play with the Content Compression Priority:

We’ve changed the widths of the Button by changing the text. Now the more the resistance, the more resistance it gives.
Hence the Login With Google Button(752) stays to its full intrinsic size since it had a larger value than the Login With Facebook button (751). Though the Login With Facebook button should have occupied more portion due to its length in normal circumstances.

Power of UIStackView

UIStackView frees us from setting the constraints in Auto Layouts. We can nest StackViews inside one another too. Also, we can set different properties for different orientations and screen sizes.
In the following example, we’ll adjust the spacing of the subviews inside the StackViews and also change the properties on landscape mode.

Example 3

We’ve changed the orientation to the landscape mode and look how beautiful it looks in that mode without writing a single line of code.

We can change the UIStackView property for different modes too:

Let’s look at a beautiful UI using UIStackView:

Beautiful UI Using StackView Part 1

We’ve added some random views inside a ViewController of our storyboard.

Let’s stack a bunch of them in their own UIStackView which would be enclosed by a parent one.

We’ve stacked them individually and then in a vertical UIStackView equally.
But we need to ensure that the individual UIStackView properties are respected:

How quickly have we created a UI. We can further nest subviews or UIStackViews in these elements as well.
Let’s add Buttons inside this:

We’ve added a Horizontal StackView inside the Orange View element. Notice that the text of the button is truncated in the portrait mode but not in the landscape mode.
To deal with this, we can set the StackView as vertical in the Portrait Mode.