iOS9新特性－UIStackView

2015-11-19 本文已影响8877人刘小壮

该文章属于<简书 — 刘小壮>原创，转载请注明：

<简书 — 刘小壮> 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;