该文章属于<简书 — 刘小壮>原创，转载请注明：
<简书 — 刘小壮> http://www.jianshu.com/p/173f25d35ddc
占位图
什么是UIStackView？
在iOS9中苹果在UIKit框架中引入了一个新的视图类UIStackView。UIStackView类可以帮我们布局UI控件，而我们不需要设置任何约束或设置很少的约束就可以，其他都由UIStackView帮我们自动完成了。
UIStackView提供了两个方向的约束，垂直布局和水平布局，我们可以通过UILayoutConstraintAxis枚举值来查看两种布局方式。
如果初学者来学习UIStackView比较抽象，不太好接触这个新的控件，而且很容易出错，先看一下下面这个GIF来初步了解一下这个控件吧。
动态图
UIStackView
在Interface Builder中使用UIStackView就类似于使用一个UI控件一样，通过让将其他视图成为UIStackView的子视图来进行布局的，UIStackView也可以嵌套多个UIStackView。
值得注意的是，UIStackView虽然继承自UIView，但是并不参与屏幕的渲染，重写drawRect:方法也是无效的。
UIStackView继承链条，自身特性等信息
配图
枚举值
Interface Builder中的UIStackView控件，右侧设置面板中提供了一些选项，这些设置是对应着代码中的枚举值的：
- Axis
Horizontal -> UILayoutConstraintAxisHorizontal
水平方向布局
Vertical -> UILayoutConstraintAxisVertical
垂直方向布局 - Distribution
Fill -> UIStackViewDistributionFill
填充整个UIStackView，并且根据内部子视图尺寸对子视图尺寸进行动态调整。
Fill Equally -> UIStackViewDistributionFillEqually
根据视图大小平均分配UIStackView尺寸，等比例填充UIStackView，过程中会根据分配的大小改变子视图尺寸。
Fill Proportionally -> UIStackViewDistributionFillProportionally
根据之前的比例填充UIStackView。
Equal Spacing -> UIStackViewDistributionEqualSpacing
填充整个UIStackView，子视图没有占满UIStackView将会用空白平均填充子视图中间的间距，超出UIStackView将会根据arrangedSubviews数组下标压缩子视图。
Equal Centering -> UIStackViewDistributionEqualCentering
平均分配子视图得到每个视图的中心点，使用这个中心点来布局每个子视图，并且保持spacing距离，超出将会重新布局子视图，并压缩部分子视图。 - Alignment
Fill -> UIStackViewAlignmentFill
视图纵向填充
Top -> UIStackViewAlignmentTop
视图向上对其(适用于Horizontal模式)
Center -> UIStackViewAlignmentCenter
视图居中对其
Bottom -> UIStackViewAlignmentBottom
视图向下对其(适用于Horizontal模式)
First Baseline -> UIStackViewAlignmentFirstBaseline
根据上方基线布局所有子视图的y值(适用于Horizontal模式)
Last Baseline -> UIStackViewAlignmentLastBaseline
根据下方基线布局所有子视图的y值(适用于Horizontal模式)
trailing -> UIStackViewAlignmentTrailing
视图向左对齐(适用于Vertical模式)
leading -> UIStackViewAlignmentLeading
视图向右对齐(适用于Vertical模式) - spacing
spacing -> CGFloat spacing
子控件之间的最小距离
可以根据下面的图片结合上面的枚举值联系起来比较好理解
布局样式
arrangedSubviews数组
UIStackView使用arrangedSubviews数组来管理子视图。需要注意的是这个数组是一个readonly的属性，我们需要调用方法对arrangedSubviews数组进行操作。
初始化数组:
- (instancetype)initWithArrangedSubviews:(NSArray<__kindof UIView *> *)views;
添加子视图:
- (void)addArrangedSubview:(UIView *)view;
移除子视图:
- (void)removeArrangedSubview:(UIView *)view;
根据下标插入视图:
- (void)insertArrangedSubview:(UIView *)view atIndex:(NSUInteger)stackIndex;
小试牛刀
我们可以从Interface Builder右侧的操作面板中，选择UIStackView控件直接拖到XIB中。可以选择Horizontal和Vertical两个方向的UIStackView，也可以在拖到XIB中之后手动修改。
示例图片
然后将两个View拖到这个UIStackView中，父视图也可以将UIStackView作为子视图来进行多层UIStackView嵌套，这也是苹果推荐的做法。
示例图片
打开右侧设置面板来设置UIStackView的一些属性，达到更好的布局效果。
示例图片
除了上面的方法也可以在XIB中直接选择多个View，然后点击右下方的Stack按钮，系统会自动推断布局方式，帮我们自动布局子视图，我们可以在系统布局之后在手动进行调整。
示例图片
代码布局其实本质上就是对数组进行操作，数组中存储的是UIStackView的子视图。然后通过设置UIStackView的枚举值属性进行页面排布。代码布局的方式这里就不演示了。。。😉
UIStackView和NSLayoutConstraint布局转换
如果你之前的项目中已经有约束，只需要将添加UIStackView管理UI控件约束清除。选中需要添加的UI控件，点击右下方的Stack按钮就可以。
点击按钮
网友评论