UIStackView just look at me

UIStackView is a new layout technology in iOS9. Mastery saves layout time considerably. UIStackView is a subclass of UIView, which is a control used to constrain child controls. But its role is limited to this, it can not be used to present their own content, similar to backgroundColor. Of course, this control is fairly easy to learn, with only four properties.

• Axls: The layout direction of the child control, horizontal or vertical
• Alignment: Similar to the Alignment attribute of UILabel
• Distributlon: The size of the child control
• Spacing: The Spacing between child controls

You can see that there is a plus sign to the left of the property, which looks like this:

UIStackView also integrates the Size Class, which is used to lay out screens of different sizes. Here you can update child control constraints by selecting different sizes.

use

Next we use UIStackView in IB to complete the following layout:

First of all, the ImageView above is constrained directly. Then we can select the three labels in the lower left corner and click on the first icon in the lower right corner to compose UIStackView:

Since the three labels are spaced, let’s change Spacing:

This makes it very easy to do the layout of the UIStackView’s subviews, and then just set the constraints on the left and bottom of the UIStackView. Because the subviews inside the UIStackView are uilabels, uilabels have their own inherent size, so there is no need to set up four layouts.

This completes the layout of the three lables on the left. Next, let’s lay out the two controls on the right.

As before, select Image and label, and form a UIStackView and set the layout constraints for the UIStackView:

Next lay out the inner child control constraints:

This is because UIStackView does not know the width and height of its internal image. In this case, we can make the image have its inherent size:

The intrinsic Size attribute has been changed to Placeholder, but the View constraint has been changed to Placeholder, indicating that it is faster than Auto Layout.

UIStackView can also be created in code.

class UIStackView : UIView {
init(arrangedSubviews views: [UIView]) 
var arrangedSubviews: [UIView] { get }
func addArrangedSubview(view: UIView) 
func removeArrangedSubview(view: UIView) 
func insertArrangedSubview(view: UIView, atIndex stackIndex: Int) ... 
}Copy the code

The first method is used to create a UIStackView. The order of the array passed in represents the order of the child views in the UIStackView. The second method is used to find out what subviews UIStackView has.

The last three methods are similar to the methods in UIView. AddArrangedSubview and removeArrangedSubview do you think addSubView and removfromSuperView?

Here’s a table that distinguishes the four methods:

Add An UIStackView subview with addArrangedSubview, remove an UIStackView with removeArrangedSubview.

The attributes UIStackView uses to constrain subviews are the following

var axis: UILayoutConstraintAxis 
var distribution: UIStackViewDistribution 
var alignment: UIStackViewAlignment 
var spacing: CGFloat 
var baselineRelativeArrangement: Bool 
var layoutMarginsRelativeArrangement: BoolCopy the code

So that’s the code to create the UIStackView.

UIStackView is fairly simple, but very powerful. This article should give you a basic idea of how to use UIStackView.