ios布局 分为左右两块_iOS 常用布局方式之StackView

级别： ★☆☆☆☆

标签：「iOS UIStackView」「iOS 自动布局」「StackView」

作者： Xs·H

审校： QiShare团队

在 沐灵洛 线下分享iOS UIButton根据内容自动布局时，有和前端同学讨论到iOS的常用布局方式。讨论过程十分热闹，不容易记录，但作者认为讨论结果有必要记录一下，希望能帮助到一些同学。

作者将iOS常用布局方式归纳为Frame、Autoresizing、Constraint、StackView和Masonry五种，并将逐一介绍。

本篇文章介绍StackView。

UIStackView是UIKit在iOS9中新增的视图类。它可以被理解成一个容器，能够对添加到容器中的视图按照行或列进行布局。作者以之前文章中提到的4分图为例，结合storyboard，可以很快速地实现效果。如下图。

如上图，作者在没有编码的情况下使用UIStackView快速构建了一个4分图的布局效果，甚至没有对4分图添加Constraint。可见UIStackView在自动布局方便有着强大的能力和效率。当然UIStackView也允许开发者进行编码，使用相关属性实现需求效果。使用UIStackView实现4分图效果的代码如下。

- (void)viewDidLoad {

[super viewDidLoad];

UIView *subView1 = [[UIView alloc] initWithFrame:CGRectZero];

subView1.backgroundColor = [[UIColor redColor] colorWithAlphaComponent:.6];

UIView *subView2 = [[UIView alloc] initWithFrame:CGRectZero];

subView2.backgroundColor = [[UIColor greenColor] colorWithAlphaComponent:.6];

UIView *subView3 = [[UIView alloc] initWithFrame:CGRectZero];

subView3.backgroundColor = [[UIColor blueColor] colorWithAlphaComponent:.6];

UIView *subView4 = [[UIView alloc] initWithFrame:CGRectZero];

subView4.backgroundColor = [[UIColor yellowColor] colorWithAlphaComponent:.6];

UIStackView *subStackView1 = [[UIStackView alloc] initWithFrame:CGRectZero];

subStackView1.spacing = 10.0;

subStackView1.alignment = UIStackViewAlignmentFill;

subStackView1.axis = UILayoutConstraintAxisHorizontal;

subStackView1.distribution = UIStackViewDistributionFillEqually;

[subStackView1 addArrangedSubview:subView1];

[subStackView1 addArrangedSubview:subView2];

UIStackView *subStackView2 = [[UIStackView alloc] initWithFrame:CGRectZero];

subStackView2.spacing = 10.0;

subStackView2.alignment = UIStackViewAlignmentFill;

subStackView2.axis = UILayoutConstraintAxisHorizontal;

subStackView2.distribution = UIStackViewDistributionFillEqually;

[subStackView2 addArrangedSubview:subView3];

[subStackView2 addArrangedSubview:subView4];

UIStackView *stackView = [[UIStackView alloc] initWithFrame:self.view.bounds];

stackView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

stackView.spacing = 10.0;

stackView.alignment = UIStackViewAlignmentFill;

stackView.axis = UILayoutConstraintAxisVertical;

stackView.distribution = UIStackViewDistributionFillEqually;

[stackView addArrangedSubview:subStackView1];

[stackView addArrangedSubview:subStackView2];

[self.view addSubview:stackView];

}

在上述代码中，作者将4个subView分别放到了两个subStackView中，并实现了subView在subStackView中横向等宽排列，然后将两个subStackView放到了stackView中，并实现了subStackView在stackView中竖向等高排列。这里，要重点介绍一下实现这些效果的属性。

axis

axis是UILayoutConstraintAxis类型的枚举变量，负责设置stackView排列方向。

/* A stack with a horizontal axis is a row of arrangedSubviews,

and a stack with a vertical axis is a column of arrangedSubviews.

*/

@property(nonatomic) UILayoutConstraintAxis axis;

typedef NS_ENUM(NSInteger, UILayoutConstraintAxis) {

UILayoutConstraintAxisHorizontal = 0,

UILayoutConstraintAxisVertical = 1

};

alignment

alignment是UIStackViewAlignment类型的枚举变量，负责设置stackView子视图的对齐方式。

/* The layout of the arrangedSubviews transverse to the axis;

e.g., leading/trailing edges in a vertical stack

*/

@property(nonatomic) UIStackViewAlignment alignment;

/* Alignment—the layout transverse to the stacking axis.

*/

typedef NS_ENUM(NSInteger, UIStackViewAlignment) {

/* Align the leading and trailing edges of vertically stacked items

or the top and bottom edges of horizontally stacked items tightly to the container.

*/

UIStackViewAlignmentFill,//!< 子视图填充

/* Align the leading edges of vertically stacked items

or the top edges of horizontally stacked items tightly to the relevant edge

of the container

*/

UIStackViewAlignmentLeading,//!< 竖直排列时，子视图左对齐

UIStackViewAlignmentTop = UIStackViewAlignmentLeading,//!< 水平排列时，子视图上对齐

UIStackViewAlignmentFirstBaseline, // Valid for horizontal axis only //!< 水平排列时，子视图按照首个子视图的首行文字对齐

/* Center the items in a vertical stack horizontally

or the items in a horizontal stack vertically

*/

UIStackViewAlignmentCenter,//!< 居中对齐

/* Align the trailing edges of vertically stacked items

or the bottom edges of horizontally stacked items tightly to the relevant

edge of the container

*/

UIStackViewAlignmentTrailing,//!< 竖直排列时，子视图右对齐

UIStackViewAlignmentBottom = UIStackViewAlignmentTrailing,//!< 水平排列时，子视图下对齐

UIStackViewAlignmentLastBaseline, // Valid for horizontal axis only //!< 水平排列时，子视图按照最后一个子视图的末行文字对齐

} NS_ENUM_AVAILABLE_IOS(9_0);

distribution

distribution是UIStackViewDistribution类型的枚举变量，负责设置stackView子视图的宽度或高度布局。

/* The layout of the arrangedSubviews along the axis

*/

@property(nonatomic) UIStackViewDistribution distribution;

/* Distribution—the layout along the stacking axis.

All UIStackViewDistribution enum values fit first and last arranged subviews tightly to the container,

and except for UIStackViewDistributionFillEqually, fit all items to intrinsicContentSize when possible.

*/

typedef NS_ENUM(NSInteger, UIStackViewDistribution) {

/* When items do not fit (overflow) or fill (underflow) the space available

adjustments occur according to compressionResistance or hugging

priorities of items, or when that is ambiguous, according to arrangement

order.

*/

UIStackViewDistributionFill = 0, //!< 子视图填充，多个视图时以最后一个视图填充

/* Items are all the same size.

When space allows, this will be the size of the item with the largest

intrinsicContentSize (along the axis of the stack).

Overflow or underflow adjustments are distributed equally among the items.

*/

UIStackViewDistributionFillEqually,//!< 子视图等宽或等高填充

/* Overflow or underflow adjustments are distributed among the items proportional

to their intrinsicContentSizes.

*/

UIStackViewDistributionFillProportionally,//!< 子视图按比例填充

/* Additional underflow spacing is divided equally in the spaces between the items.

Overflow squeezing is controlled by compressionResistance priorities followed by

arrangement order.

*/

UIStackViewDistributionEqualSpacing,//!< 子视图等间距填充

/* Equal center-to-center spacing of the items is maintained as much

as possible while still maintaining a minimum edge-to-edge spacing within the

allowed area.

Additional underflow spacing is divided equally in the spacing. Overflow

squeezing is distributed first according to compressionResistance priorities

of items, then according to subview order while maintaining the configured

(edge-to-edge) spacing as a minimum.

*/

UIStackViewDistributionEqualCentering,//!< 子视图等中点填充

} NS_ENUM_AVAILABLE_IOS(9_0);

spacing

spacing是CGFloat类型的变量，负责设置stackView子视图之间的间距。

/* Spacing between adjacent edges of arrangedSubviews.

Used as a strict spacing for the Fill distributions, and

as a minimum spacing for the EqualCentering and EqualSpacing

distributions. Use negative values to allow overlap.

On iOS 11.0 or later, use UIStackViewSpacingUseSystem (Swift: UIStackView.spacingUseSystem)

to get a system standard spacing value. Setting spacing to UIStackViewSpacingUseDefault

(Swift: UIStackView.spacingUseDefault) will result in a spacing of 0.

System spacing between views depends on the views involved, and may vary across the

stack view.

In vertical stack views with baselineRelativeArrangement == YES, the spacing between

text-containing views (such as UILabels) will depend on the fonts involved.

*/

@property(nonatomic) CGFloat spacing;

综上，UIStackView可谓是iOS的布局神器，在cell等多见布局需求的场景中能起到重要的作用。关于本篇文章中的代码部分，可以从QiLayoutDemo中获取。