iOS 9 Learning Series: How UIStackView Makes Your Development Easier

Previously we covered the new features of Swift 2. We will start this article by covering some cool new features of iOS 9. The upcoming new version of iOS will bring a lot of new features. The introduction of stack view (UIStackView) is worth mentioning for developers. I know that for some developers it is difficult to design some complex interactive interfaces using autolayout. UIStackView can help and make our developers' work easier.

UIStackView provides an efficient interface for laying out a row or column of views. For views embedded in StackView, you no longer have to add auto layout constraints. Stack View manages the layout of these subviews and helps you automatically layout the constraints. That is, these subviews can adapt to different screen sizes. In addition, you can embed a stack view into another stack view to create more complex user interfaces. Don't get me wrong, this doesn't mean you don't need to deal with auto layout. You still have to define some layout constraints to constrain the stack view. It just saves you the time of creating constraints for each UI element, and it makes it easier to add/remove a view from the layout.

Xcode7 provides two ways to use UIStackView. You can drag a Stack View (horizontal/vertical) from the object library and drop it to the right position in the storyboard. Then you can drag some labels, buttons, imageView and other views into the stack view. In addition, you can use the Stack option in the automatic layout bar. For this method, you can simply select two or more views, then click the Stack option, IB will embed these views into a stackview and automatically adjust them. If you still don’t have much idea about how to use the stack view, it doesn’t matter, we will introduce these two methods in this article. Keep reading and you will soon understand what I mean.

I assume you are familiar with auto layout. If not, please read this [introduction article] about autolayout first.

Demo App

Take a look at the demo app we are going to build. In this article I will show you how to use stackview to lay out a similar user interface:

You can create the same UI without using stack view, but as you can see, stack view completely changes the way to layout the user interface. This article does not use coding, we just focus on using IB to layout this user interface.

Before you start, please download this [Starter Project] (or [Create Your Own Starter Project]). You need to use Xcode7 beta4 (or above) to build this project. If you don't have it installed, you need to download it. This project template is very simple, it only pre-sets a navigation controller and some sample images.

Credits: Examples photos courtesy of [magdeleine.co].

Add Stack Views from the Object Library

Now upgrade Xcode 7 and open Main.storyboard. Drag a vertical stack view from the object library and drop it into the view controller on the storyboard. Stack View can arrange its subviews (called arrangement views) in both vertical and horizontal layouts. Since we want to lay out the image view vertically, we choose a vertical Stack View.

Next, drag an image view from the Object Library. When you drop an image view into the stack view, the image view will automatically adjust. Repeat the same process to add more image views. This is where the magic happens: when you add another image view, the stack view will automatically layout the image view, setting the necessary constraints for you. Cool, right?

Defining Layout Constraints for the Stack View

Stack View saves developers the time of defining constraints for each UI element. That said, you need to provide layout constraints for the Stack View. For what we just added, we need to define the following layout constraints:

• Set the Stack View’s top, left, and right margins so that the Stack View is at the top of the screen.

• Set a height constraint for the Stack View so that the height of the Stack View view is 70% of the parent view’s height.

Now select the stack view, click the Pin button in the layout bar, set the top, left, and right values ​​to 10, 0, 0 respectively. Then click the “Add 3 Constraints” button to add these constraints.

The current position of the Stack view does not comply with the constraints. You can click the warning indicator (the yellow arrow) in the Document Outline to correct the position.

To set the height constraint, control-drag from the stack view to the view in the Document Outline in IB, and after releasing the button, select “Equal Heights”.

This sets the stack view’s height to be equal to the view’s height. However, the stack view only needs 75% of the height. So, select the “Stack View.height” constraint, go to the Attributes inspector, and change the Multiplier value from 1.0 to 0.7.

#p#

Setting Stack View Properties

This stack view doesn’t look like what we expected. Once you add the stack view, you can change some of the stack view’s properties to change its appearance. The axis option determines whether the views should be laid out vertically or horizontally. The alignment option controls how these views are aligned. For example, if you set it to Leading, the views managed by the stack view are arranged in the Leading alignment.

The distribution property determines the size and position of the views it manages. By default, it is set to Fill. This is when the stack view tries to keep all of its subviews at a reasonable distance. Now change it to Fill Equally. The stack view will adjust all of its subviews to the same size.

The spacing property lets you set the amount of space between views. Change its value to 10 to increase the space between the image views.

Setting the Image

Next, we set the image views’ corresponding images. Select the first image view, select the Attributes inspector, set the image to “nature-1”, set the model to “Aspect Fill”, and check “Clip Subviews”. Repeat the same steps for the remaining image views, but set the image to “nature-2” and “nature-3”. Your layout should look like this:

Now you can run the project and preview it. You can test the app’s UI on the simulator to see if it fits all devices correctly. The stack view has automatically added constraints for you. In fact, you can enable the view debugging option (while running the app) to display the layout constraints for the image view.

Using Nested Stack Views to Lay Out Labels and Buttons

We are not done yet. There are a few labels and buttons added to the user interface. Now drag a label from the Object library to the view, name it "Nature", and position it below the stack view. Change its font size to 30 pt to make it a bit larger. Next, drag another Label view and name the label "A collection of nature photos from magdeleine.co". Position it below the Nature label.

Again, you don’t need to set layout constraints for these labels. Let the stack view do the magic for you. At the very beginning of this tutorial, I mentioned a way to use a stack view. Earlier, I added a stack view from the object library. Now I’ll show you another way.

Hold down the command key to select the labels, then click the Stack button in the layout bar. IB automatically embeds the labels into a vertical stack view.

Next, add two buttons to the view. Name one button, "Like" and the other "Share". Again, we don't want to deal with Auto Layout. So, select the button in the Layout bar and click the Stack button to embed the two buttons in a horizontal stack view. Set the stack view's spacing to 5.

If you look at the final layout, the two buttons should be placed next to the Nature label. How can you achieve this step? The most important thing about stack views is that you can use multiple stack views nested together to build the exact layout you want. Now drag the stack view onto the Nature label's button. Once you release the button, the stack view will be embedded in another stack view. To layout the Nature label and button, select both views and then add them to another stack view using the Stack option. By default, the axis of a new stack view is set to vertical. In the Attributes Inspector, change it to Horizontal so that you can place the Like and Share buttons next to the Nature label.

The button also needs to be aligned with the baseline of the Nature label. Select the stack view and change the alignment from Fill to First Baseline. Also, set the spacing option to 20 to add some spacing between the Nature label and the button.

As you can see, we just use nested stack views to build the exact layout you need.

#p#

Finally, we set layout constraints between the stack view containing the image and the stack view containing the button & label. Select the stack view containing the button and label, and then click the Pin button in the layout bar. Set the top, left, and right values ​​to 0, 8, and 0 respectively.

Make sure the Description Label is AutoSize, Lines is set to 0 and Line Breaks is set to Word Wrap. Great! You have finished designing the interface. Now run the project to see the result. If you configured everything correctly, your UI should look like this:

If you turn your iPhone sideways, the UI should look like this:

It looks good, but wouldn’t it be more powerful if the images were arranged horizontally like this?

Using Size Classes to Adjust Stack Views

In order to achieve different layouts for iPhone in different orientations, we must make the stack view adaptive. In iOS 8, the concept of Size Classes was introduced. The following table shows iOS devices and their corresponding Size Classes:

You can override the original basic layout provided by size classes. In this case, we set the axis of the stack view (holding the image view) from vertical to horizontal in both size classes:

• Compact width-Compact height

• Regular width-Compact height

Now select the stack view and go to the Attributes inspector. Click the + button under Axis. Select Any Width > Compact height, and then set the Axis value under size classes to Horizontal. Here, any width includes both compact and regular widths.

After doing this, the stack view will be set to horizontal when the iPhone is in landscape orientation. Run the project on different iOS devices to see the results.

Summarize

In this tutorial, I introduced you to stack view and demonstrated how to layout your UI using this new component. Stack view allows you to efficiently layout your UI using very few constraints. A question you may have is, when to use stack view? Apple engineers recommend developers to adopt stack view first, and then they need to actually use the cumbersome constraints. So, start designing your user interface using stack view! I am sure you will like it.

For reference, you can download the [Xcode project] here.