iOS UIStackView – Stack Views

Filed Under: iOS

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.

iOS UIStackView

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:
ios uistackview example

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.

ios uistackview example

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:

ios uistackview error constraint

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.

ios uistackview example content hugging

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:

ios uistackview content compression

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

ios uistackview

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:
ios uistackview orientation stackview properties

Let’s look at a beautiful UI using UIStackView:

Beautiful UI Using StackView Part 1

ios uistackview beautiful ui

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.

ios-uistackview-beautiful-ui-1-stacking

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

ios uistackview margins constraints

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:

ios uistackview nested stackview

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.

ios uistackview axis change orientation

Beautiful UI Using StackView Part 2

Let’s create another beautiful UI using StackView.

Add the StackView onto the ViewController:

ios uistackview create stackview

We’ve created a Vertical StackView with the margins and a width set for now.

Add UIImageViews inside UIStackView.

uistackview adding imageview

Make sure that you have added an image to the assets folder.

Hold option and drag a UI element to clone it.

Making all the UIImageView equal width and height.

uistackview square images

Add a Horizontal StackView.

ios uistackview add horizontal stackview

Add a Large UIImageView

ios uistackview add large imageview

Making the right-hand side column one-third of the screen width

We had hardcoded the width to 120 initially. Now let’s remove that constraint and make it one-third of the view’s width:

ios uistackview width multiplier

This brings an end to this tutorial. You can download the UIStackView project with the examples from the link below:

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages