New Features of iOS9-UIStackView, ios9-uistackview

New Features of iOS9-UIStackView, ios9-uistackview

1. UIStackView attributes

UIStackView was launched after iOS9, and I was also the first to come into contact with it. During the learning process, I had a thorough understanding of the relevant attributes, especially the distribution attribute values, so this article uses code instances to understand the differences between each of these attributes.

UIStackView mainly includes four attributes: axis, alignment, distribution, and spacing.

1. axis

It mainly sets the direction of the UIStackView layout: horizontal or vertical.

Typedef NS_ENUM (NSInteger, UILayoutConstraintAxis) {UILayoutConstraintAxisHorizontal = 0, // horizontal UILayoutConstraintAxisVertical = 1 // vertical };

 

Ii. alignment

This section mainly sets the alignment of the non-axial subview.

Typedef NS_ENUM (NSInteger, UIStackViewAlignment) {UIStackViewAlignmentFill, // fill the child view with the upper, // left alignment of the Child view (axis is vertical) UIStackViewAlignmentTop = lower, // align the top of the sub-view (axis is horizontal) UIStackViewAlignmentFirstBaseline, // align the first line of the text in the first sub-view, at the same time, ensure that the bottom of the sub-view with the highest height is aligned (only in the horizontal direction of axis) UIStackViewAlignmentCenter, // align the sub-view in the center of UIStackViewAlignmentTrailing, // align the right of the sub-View) UIStackViewAlignmentBottom = UIStackViewAlignmentTrailing, // align the bottom of the sub-view (in the horizontal direction of axis) UIStackViewAlignmentLastBaseline, // align the last line of the text of the last sub-view, at the same time, ensure that the top of the Child view with the highest height is aligned (only effective in the horizontal direction of axis)} NS_ENUM_AVAILABLE_IOS (9_0 );

 

The specific display effect is as follows:

Fill
Top
Center
Bottom
First base line
Last base line

Iii. distribution

Set the distribution ratio of the sub-view on the axis direction (if axis is horizontal, that is, set the width of the sub-view, if axis is vertical, It is set the height of the sub-view ).

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

Run axis = UILayoutConstraintAxisHorizontal,
Alignment = UIStackViewAlignmentCenter: add three uiviews to UIStackView, and set the first UIView to 40.100, the second UIView is set to 8080. The first UIView is set to 120*60. The difference between each attribute is described through the instance:

(1) UIStackViewDistributionFill = 0. Default attribute. UIStackView is filled in the axis direction. If axis is horizontal, the width of all sub-views is equal to the width of UIStackView. Therefore, if there is only one sub-view, the width of the sub-view is equal to the width of UIStackView, if there are two subviews with the same priority, A subview will be stretched or compressed so that the sum of the two subviews is equal to the width of UIStackView ......, If axis is vertical, the height of all subviews is equal to that of UIStackView. If necessary, a subview is stretched or compressed.

The preceding figure shows that if the subview has the same priority, if the subview has different priorities, the position of the subview is set from high to low, stretch or compress the child views with the lowest priority.

Set distribution = UIStackViewDistributionFill to display the following results:

UIStackViewDistributionFill

Because the sum of the width of the three sub-views is not the width of the UIStackView and the priority is the same, the third sub-view is stretched. Of course, we can modify the priority of a subview to stretch it.

(2) UIStackViewDistributionFillEqually. After this attribute is set, the width or height of all subviews are equal in the axis direction. That is, in the horizontal direction, all subviews are stretched or compressed to make the width of each subview consistent. The width of the previously set subview is ignored; if it is in the vertical direction, the height of all sub-views will be consistent, as shown below:

UIStackViewDistributionFillEqually

(3) UIStackViewDistributionFillProportionally after this attribute is set, the width or height of the subview is stretched or compressed based on the proportion of the original subview. For example, the width of the three subviews In the instance is, therefore, when the horizontal direction is displayed, it will be stretched according to this ratio, as shown in, the width after the stretch is still.

UIStackViewDistributionFillProportionally

(4) UIStackViewDistributionEqualSpacing this attribute will keep the width and height of the subview, and the interval between all subviews remains the same. As shown in, the interval between the neutron views (the length shown in the Green Line) in the graph is the same.

UIStackViewDistributionEqualSpacing

(5) UIStackViewDistributionEqualCentering this attribute controls the consistency of distance between the centers of all child views, as shown in. The interval between child view Centers (the length shown in the Green Line) is consistent.

UIStackViewDistributionEqualCentering

4. spacing this attribute controls the interval between subviews. When the first three attribute values of distribution are set, there is no interval between subviews, we can explicitly set through the spacing attribute. For example, in the case of distribution = UIStackViewDistributionFillEqually, set the subview interval to 10, the interval between subviews is 10, and the subview is still equal to the width.

Spacing = 10

2. Advanced

We canInterface BuilderSelectUIStackViewDrag the control directlyXIB. AvailableHorizontalAndVerticalIn two directionsUIStackView, You can also dragXIB.

Sample Image

ThenViewDrag thisUIStackViewThe parent view can alsoUIStackViewMultiple layers as sub-ViewsUIStackViewNesting, which is also recommended by Apple.

Sample Image

Open the settings panel on the right to setUIStackViewTo achieve better layout.

Sample Image

In addition to the above method, you can alsoXIBSelect multipleViewAnd then clickStackButton, the system will automatically infer the layout mode, help us automatically layout the sub-view, we can manually adjust after the system layout.

Sample Image

Code layout is essentially an operation on arrays.UIStackView. Then, SetUIStackViewThe enumerated Value Attribute. The Code layout is not demonstrated here...