级别： ★☆☆☆☆
标签：「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中获取。
了解更多iOS及相关新技术，请关注我们的公众号：
关注我们的途径有：
QiShare()
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公众号)
推荐文章：
iOS UIButton根据内容自动布局
iOS 指定初始化方法
UIView中的hitTest方法
奇舞周刊