See UIStackView Tutorial: Introducing Stack Views

Introduction to the

Recently, I learned about the API UIStackView from my colleague. The automatic layout I used before includes code automatic layout (Masonary) and drag constraint. UIStackView and these two can reduce the repetitive tedious work, make automatic layout is easy and quick.

UIStackView is a container, UIStackView inherits from UIView, but it can’t render itself. For example, setting the backgroundColor for it is invalid, so it has to work in conjunction with UIView. It helps UIView handle layout issues such as position and size of subviews. His position is between handwritten constraints and UITableView/UICollectionView tools.

UIStackView is generally used to implement view combinations that tile a row horizontally or vertically.

The body of the

1, UIStackView initialization

A simple diagram shows the inheritance relationship between UIStackView and its parent and child views

The code initializes a stackView and adds it to the superview

- (void)initStackView{
    self.stackView = [[UIStackView alloc] init];
    self.stackView.axis = UILayoutConstraintAxisHorizontal;
    self.stackView.distribution = UIStackViewDistributionFill;
    self.stackView.spacing = 10;
    self.stackView.alignment = UIStackViewAlignmentFill;
    self.stackView.frame = CGRectMake(0, 100, ScreenWidth, 200);
    [self.view addSubview:self.stackView];
}
Copy the code

2, some properties of UIStackView

2.1 Axis Attributes

It determines the orientation of the stack, either vertical or horizontal;

typedef NS_ENUM(NSInteger, UILayoutConstraintAxis) {UILayoutConstraintAxisHorizontal = 0, UILayoutConstraintAxisVertical = 1 / / / / horizontal layout direction vertical layout direction};Copy the code

2.2 Distribution properties

Describes the layout relations of the subviews it manages along its axis.

typedef NS_ENUM(NSInteger, UIStackViewDistribution) {
UIStackViewDistributionFill = 0, 
UIStackViewDistributionFillEqually,
UIStackViewDistributionFillProportionally,
UIStackViewDistributionEqualSpacing,
UIStackViewDistributionEqualCentering,
} NS_ENUM_AVAILABLE_IOS(9_0);

Copy the code
  • 2.2.1 UIStackViewDistributionFill

These are arrangedSubviews that fill the entire StackView. If spacing is set to spacing, then these arrangedSubviews are spacing. If subtracting all spacing, all arrangedSubview intrinsicContentSize cannot fill or exceed StackView size, Then, several ArrangedSubviews stretch or compress according to the priority of select or CompressionResistance. If the priority is the same, stretch or compress in order.

  • 2.2.2 UIStackViewDistributionFillEqually

This is the spacing of StackView minus all spacing divided into arrangedSubviews. Each Layout Subview has the same size.

  • 2.2.3 UIStackViewDistributionFillProportionally

This is similar to FillEqually, except that instead of dividing dimensions equally into arrangedSubviews, this arranges dimensions proportionally according to the Layout Subviews intrinsicContentSize.

  • 2.2.4 UIStackViewDistributionEqualSpacing

This arrangedSubview spacing is equal, but the spacing can be greater than StackView’s set spacing, but never less than StackView’s. The layout of this type can be understood as following: Layout all arrangedSubview intrinsicContentSize, then the rest of the layout is divided into spacing. Spacing is set to StackView’s spacing if smaller, and then CompressionResistance’s priority is to compress an arrangedSubview.

  • 2.2.5 UIStackViewDistributionEqualCentering

This arrangedSubview spacing is equal between the center points, so that no two ArrangedSubViews may be spacing unequally, but the spacing is still greater than or equal to the spacing set by StackView. It can’t be less than. This type of layout still assigns spacing between stackViews evenly if there is excess space in the StackView, and CompressionResistance compression subviews if there is insufficient space.

2.3 Alignment Attributes

Determines the layout of its managed view perpendicular to its axis;

typedef NS_ENUM(NSInteger, UIStackViewAlignment) {UIStackViewAlignmentFill, / / child view fill StackView UIStackViewAlignmentLeading, left-aligned / / child views (for vertical axis direction) UIStackViewAlignmentTop = UIStackViewAlignmentLeading, / / child view at the top of the alignment (for horizontal axis) UIStackViewAlignmentFirstBaseline, // Align the first line of the text in the first subview, At the same time ensure that the height of the child view bottom alignment (is only valid for horizontal axis) UIStackViewAlignmentCenter, / / child view center alignment UIStackViewAlignmentTrailing, / / child views right-aligned (for vertical axis direction) UIStackViewAlignmentBottom = UIStackViewAlignmentTrailing, / / child views at the bottom of the alignment (for horizontal axis) UIStackViewAlignmentLastBaseline, } NS_ENUM_AVAILABLE_IOS(9_0);} NS_ENUM_AVAILABLE_IOS(9_0);Copy the code
  • 2.3.1 UIStackViewDistributionFill

By default, if the child control is laid out horizontally, the vertical direction of the child control fills the stackView. And vice versa.

  • 2.3.2 UIStackViewAlignmentLeading

If the child control is laid out vertically, align the left side of the child with the left side of the stackView. And vice versa.

  • 2.3.3 UIStackViewAlignmentTop

  • 2.3.4 UIStackViewAlignmentFirstBaseline

Align the text on the first line of the first subview, while ensuring that the subview with the highest height is aligned on the bottom (only if axis is horizontal)

  • 2.3.5 UIStackViewAlignmentCenter

The subview is centered and aligned.

  • 2.3.6 UIStackViewAlignmentTrailing

The subview is right-aligned (axis is vertical).

  • 2.3.7 UIStackViewAlignmentBottom

The axis for UIStackViewAlignmentBottom = UIStackViewAlignmentTrailing level.

  • 2.3.8 UIStackViewAlignmentLastBaseline

Align the text on the last line of the last subview, while keeping the top of the highest subview aligned (only when axis is horizontal)

2.4 Spacing property

Set the spacing between the subviews, which is the minimum spacing between the subviews. It is called the minimum spacing, because stackView arranges the internal space according to certain rules. Sometimes, it does not meet all requirements, for example, the width of stackView itself is 100, and the width of two internal controls is 100. 100+100+10 exceeds its own width, and one of the child controls is compressed to meet the minimum spacing.

2.5 baselineRelativeArrangement properties (the default is false)

Determines whether the vertical clearance between its views is derived from baseline measurements.

2.6 layoutMarginsRelativeArrangement properties (the default is false)

Determines whether stackView should refer to its layout margins when tiling the sub-views it manages, with Layout Margins if YES and bounds if NO.

3, some common methods of UIStackView

3.1 Creating a Stack View

– initWithArrangedSubviews: (New in iOS 9.0) : initial, anti-fuzzy view array

3.2 Managing subviews

-AddArrangedSubView: (New in iOS 9.0) : Adds subviews

3.2.2 -arrangedSubviews Property (New in iOS 9.0) : UIStackView uses arrangedSubviews array to manage subviews.

3.2.3 – insertArrangedSubview: atIndex: (New in iOS 9.0) : according to the index into view

-removeArrangedSubview: (New in iOS 9.0) : Removes subviews

Note: AddArrangedSubview and insertArrangedSubview add subviews to the Arrangement Subviews array and StackView, but removeArrangedSubview, Subviews are removed only from arrangedSubviews array, not subviews, and removeFromSuperview can be called if required.

Example use of UIStackView

Attach a lot demo

conclusion

UIStackView can be implemented by code or XIB, which can be implemented by code in daily work. The code is more convenient for function modification of later projects and easier to maintain. Learning how to use it allows us to quickly develop new features. I hope to talk more about UIStackView.