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:
alignment: How are the subviews aligned:
- leading – left aligned
- trailing – right aligned
- 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
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.
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.
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.
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.
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.
Beautiful UI Using StackView Part 2
Let’s create another beautiful UI using StackView.
Add the StackView onto the ViewController:
We’ve created a Vertical StackView with the margins and a width set for now.
Add UIImageViews inside UIStackView.
Make sure that you have added an image to the assets folder.
Making all the UIImageView equal width and height.
Add a Horizontal StackView.
Add a Large UIImageView
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:
This brings an end to this tutorial. You can download the UIStackView project with the examples from the link below: