iOS 9: Getting Started with UIStackView

[[138778]]

Like every previous iteration of iOS, iOS 9 brings many new features. The UIKit framework changes with each version, and what is special in iOS 9 is UIStackView, which will fundamentally change the way developers create user interfaces on iOS. This article will show you how to use UIStackView to create user interfaces.

This article assumes that you are familiar with the basics of Auto Layout. If you are not familiar with it, you can take a look at the Auto Layout tutorial first. To understand why Stack View is so useful and how it works, you need to have a deep understanding of Auto Layout first.

1. Instance Preview

We will use UIStackView to simulate an app rating prompt. Users can add or remove stars to rate the app. When completed, it will look like this.

First download the sample project from GitHub and open it. There are two Stack Views in Main.Storyboard.

We will use these two Stack Views to layout the interface. Before we start coding, let's take a look at how Stack View works.

2. UIStackView Overview

The core of Stack View is to arrange multiple subviews vertically or horizontally. If you have done Android development, it is very similar to the LinearLayout control.

The most useful thing about Stack View is that it automatically creates and adds Auto Layout constraints for each subview. Of course, you can control the size and position of the subviews. You can configure the size, layout, and spacing of the subviews through options.

Layout Content

Open Main.Storyboard, select one of the Stack Views to see its options, and select a Stack View. In the Attributes Inspector, notice the options listed under Stack View.

Axis indicates whether the Stack View's subviews are arranged horizontally or vertically. Alignment controls the subview alignment. Distribution defines the distribution of subviews. Spacing is the minimum spacing between subviews.

To simplify the terminology, you can think of it this way: Alignment controls the X and Y values, while Distribution controls the height and width. The other two values ​​will affect alignment. If Baseline Relative is checked, the vertical spacing will be adjusted based on the subview's baseline. If Layout Margins Relative is checked, the subview position will be adjusted relative to the standard margins.

Another thing to remember is that Stack View is treated as a Container View. So it is a UIView subclass that is not rendered. It is not rendered to the screen like other UIView subclasses. This also means that setting its backgroundColor property or overriding the drawRect: method will not have any effect.

subView and arrangedSubView

Before starting to use Stack View, let's take a look at the differences between its subViews and arrangedSubvies properties. If you want to add a subview to be managed by Stack View, you should call addArrangedSubview: or insertArrangedSubview:atIndex:. The arrangedSubviews array is a subset of the subviews property.

To remove a subview managed by the Stack View, you need to call removeArrangedSubview: and removeFromSuperview. It is very important to understand that removing arrangedSubview only ensures that the Stack View no longer manages its constraints, rather than removing it from the view hierarchy.

Now that we have some understanding of Stack View, let’s start using it.

3. Configure the vertical layout of the Stack View

Open Main.Storyboard and select the Stack View above. Make the following changes in the Attributes Inspector:

Alignment set to Center

Distribution set to Equal Spacing

Set Spacing to 30

This tells the Stack View to add constraints to the subview so that it is vertically centered and symmetrical along the Stack View’s axis, and then gives the subview a margin of 30.

If the subview size does not fit within the Stack View content area, the subview will be stretched or compressed based on the compression resistance priorities. The same is true when adding subviews to the Stack View at runtime.

If there is any ambiguity in the layout, the Stack View will adjust the size of the subview step by step according to the subview's index in arrangedSubviews until it just fits the size of the Stack View.

4. Add a vertical layout subview to the Stack View

Add a label, an image view, and a button to the top Stack View. The label is at the top, the image view is in the middle, and the button is at the bottom. Once added, it looks like this:

Next, we need to modify the properties of the subview we just added in the Attributes Inspector. Change the label’s text to “How do you like our app?” and select Center for Text Alignment. Enter “logo” in the image view’s Image and select Aspect Fit for Content Mode. Finally, set the button’s Text to “Add Star!”.

Run the app. You can see that with very little work we’ve added three subviews that respond to changes in orientation, size class, etc. You didn’t actually have to add any constraints manually.

When the app is running, click the Debug View Hierarchy button at the bottom of the Xcode window to perform real-time view debugging.

Select any of the subviews that we added earlier. Looking at the size inspector, we notice that the Stack View has automatically added constraints to it. The following image shows the constraints added to the button:

5. Add a five-pointed star

The button event has not yet been associated with the app interface, so let's do that first. Stop the app and open the storyboard. Create an IBAction called addStar and associate it with the Touch Up Inside event of the button.

addStar(_:) method implementation:

 @IBAction func addStar(sender: AnyObject) {
 let starImgVw:UIImageView = UIImageView(image: UIImage(named: "star" ))
 self.horizontalStackView.addArrangedSubview(starImgVw)
 UIView.animateWithDuration( 0.25 , animations: {
 self.horizontalStackView.layoutIfNeeded()
 })
 }

Add animation to the star image in the horizontal stack view. Remember, because the stack view automatically manages Auto Layout constraints for us, we can only call layoutIfNeeded to implement the animation.

Build and run the app, and click the add star button. You can see the final result, but it is not satisfactory.

Select the bottom Stack View and look in the Attributes Inspector to see the problem. Since both Alignment and Distribution are set to Fill, the Stack View stretches the star to fit its size.

This will cause more problems as we add more stars. We want the stars to be centered, not stretched to fit the width of the Stack View.

Change the Alignment value to Center and the Distribution value to Fill Equally. Finally, set the content of the image view in the addStar(_:) method.

 @IBAction func addStar(sender: AnyObject) {
 let starImgVw:UIImageView = UIImageView(image: UIImage(named: "star" ))
 starImgVw.contentMode = .ScaleAspectFit
 self.horizontalStackView.addArrangedSubview(starImgVw)
 UIView.animateWithDuration( 0.25 , animations: {
 self.horizontalStackView.layoutIfNeeded()
 })
 }

Run the app and tap the Add button a few times. We can see that all the stars are centered.

6. Nested Stack Views

Without the ability to delete stars, our app rating is of little use. Open the storyboard and add a horizontal Stack View to the top Stack View. Place it below the logo and above the button.

Drag the "Add Star!" button to the newly added Stack View, and then add a button to the new Stack View. Change the button title to "Remove Star" and set the text color to red. The preview is as follows:

Edit the new Stack View’s attributes in the Attributes Inspector and change them as follows:

Alignment set to Center

Distribution set to Equal Spacing

Set Spacing to 10

7. Delete the five-pointed star

Create an IBAction response method named removeStar for the "Remove Star" button with the event type Touch Up Inside.

removeAction(_:) implementation:

 @IBAction func removeStar(sender: AnyObject) {
 let star:UIView? = self.horizontalStackView.arrangedSubviews.last
 if let aStar = star
 {
 self.horizontalStackView.removeArrangedSubview(aStar)
 aStar.removeFromSuperview()
 UIView.animateWithDuration( 0.25 , animations: {
 self.horizontalStackView.layoutIfNeeded()
 })
 }
 }

Run the app and you can now add and remove items. Change the orientation of the simulator or rotate the device to see how the app adjusts its interface. We have built the app's user interface without adding a single line of constraints.

Note that the removeFromSuperview call in removeStar(_:) removes the subview from the view hierarchy. The call to removeArrangedSubview(_:) tells the Stack View that it no longer needs to manage the subview’s constraints. The subview remains in the view hierarchy until removeFromSuperview is called to remove it.

in conclusion

The UIStackView class greatly simplifies user interface development. This is a good thing, especially as hardware changes. Using UIStackView, developers are relieved of the tedious task of setting up constraints for simple scenes, leaving the heavy lifting to UIKit.

【Editor's recommendation】

1. Apple releases second iOS 9 beta to developers
2. iOS 9 adaptation series tutorial: background positioning
3. iOS 9 adds UIStackView official documentation translation

[Editor: chenqingxiang TEL: (010) 68476606]