（点击上方公众号，可快速关注）

来源：CoderLXWang

来源：CoderLXWang

链接：http://www.jianshu.com/p/213702004d0d

链接：http://www.jianshu.com/p/213702004d0d

最近看叶孤城的书，里面提到了UIStackView，说起这种布局，也是很早就知道了，但是一直没有研究过，开发中也没有使用过，周末上网翻看一下了大家的文章，发现大多都是Storyboard讲解的，实际上使用代码或者Storyboard对于UIStackView区别不大，因为UIStackView本身的属性就很少，由于本人开发中从不使用Storyboard或者xib， 本篇demo就用纯代码完成吧， 关键是网上的一些布局给的示例也不是特别清楚，由于开发中也没有实际用过，本文内容仅限交流学习， 大家交流指正。

一，UIStackView是什么？

在iOS9中苹果在UIKit框架中引入了一个新的视图类UIStackView。UIStackView 类提供了一个高效的接口用于平铺一行或一列的视图组合。Stack视图管理着所有在它的 arrangedSubviews 属性中的视图的布局。这些视图根据它们在 arrangedSubviews 数组中的顺序沿着 Stack 视图的轴向排列。

简而言之，即UIStackView，就是一个ContainerView，可以沿横向或纵向按照一定的规则布局内部的子View。

为了避免太过无聊， 先放出demo中实现的一个效果， demo地址

https://github.com/CoderLXWang/UIStackView-Demo

二，一个快速示例

下面用一个很简单的示例快速演示一下，

展开全文

想一下要布局上图中的View，如果用Frame，或者autolayout的过程，都是比较复杂，masonry中有一种相对简单的方式， 可以看这篇文章masonry-等间距布局，以上方式都不演示了， 没什么可说的。

http://www.jianshu.com/p/2c7a5ba73fc2

如果使用UIStackView， 如下为实现代码：

- (void)viewDidLoad{

[superviewDidLoad];

containerView= [[UIStackViewalloc]initWithFrame:CGRectMake(0,100,ScreenWidth,200)];

containerView.axis= UILayoutConstraintAxisHorizontal;

containerView.distribution= UIStackViewDistributionFillEqually;

containerView.spacing= 10;

containerView.alignment= UIStackViewAlignmentFill;

for(NSIntegeri= 0;i< 4;i++){

UIView*view= [[UIViewalloc]init];

view.backgroundColor= [UIColorcolorWithRed:random()%256/255.0green:random()%256/255.0blue:random()%256/255.0alpha:1];

[containerViewaddArrangedSubview:view];

}

[self.viewaddSubview:containerView];

}

- (void)viewDidLoad{

[superviewDidLoad];

containerView= [[UIStackViewalloc]initWithFrame:CGRectMake(0,100,ScreenWidth,200)];

containerView.axis= UILayoutConstraintAxisHorizontal;

containerView.distribution= UIStackViewDistributionFillEqually;

containerView.spacing= 10;

containerView.alignment= UIStackViewAlignmentFill;

for(NSIntegeri= 0;i< 4;i++){

UIView*view= [[UIViewalloc]init];

view.backgroundColor= [UIColorcolorWithRed:random()%256/255.0green:random()%256/255.0blue:random()%256/255.0alpha:1];

[containerViewaddArrangedSubview:view];

}

[self.viewaddSubview:containerView];

}

以上就是所有代码， 是不是看起来异常简单， 前面说过了StackView其实就是一个容器View，可以管理内部子控件的布局， 那么看一下代码， init不用说了， for循环创建子控件不用说了（addArrangedSubview:view见下文）， addSubViews也不用说， 那么久只剩下了四行代码， 这四个也就是UIStackView全部四个属性

[containerViewaddArrangedSubview:view]相关介绍：

UIStackView使用arrangedSubviews数组来管理子视图。

需要注意的是这个数组是一个readonly的属性，我们需要调用方法对arrangedSubviews数组进行操作。

初始化数组:

- (instancetype)initWithArrangedSubviews:(NSArray*)views;

添加子视图:

- (void)addArrangedSubview:(UIView*)view;

移除子视图:

- (void)removeArrangedSubview:(UIView*)view;

根据下标插入视图:

- (void)insertArrangedSubview:(UIView*)viewatIndex:(NSUInteger)stackIndex;

注意：addArrangedSubview和insertArrangedSubview，会把子控件加到arrangedSubviews数组的同时添加到StackView上，

但是removeArrangedSubview，只会把子控件从arrangedSubviews数组中移除，

不会从subviews中移除，如果需要可调用removeFromSuperview

[containerViewaddArrangedSubview:view]相关介绍：

UIStackView使用arrangedSubviews数组来管理子视图。

需要注意的是这个数组是一个readonly的属性，我们需要调用方法对arrangedSubviews数组进行操作。

初始化数组:

- (instancetype)initWithArrangedSubviews:(NSArray*)views;

添加子视图:

- (void)addArrangedSubview:(UIView*)view;

移除子视图:

- (void)removeArrangedSubview:(UIView*)view;

根据下标插入视图:

- (void)insertArrangedSubview:(UIView*)viewatIndex:(NSUInteger)stackIndex;

注意：addArrangedSubview和insertArrangedSubview，会把子控件加到arrangedSubviews数组的同时添加到StackView上，

但是removeArrangedSubview，只会把子控件从arrangedSubviews数组中移除，

不会从subviews中移除，如果需要可调用removeFromSuperview

三，具体讲解StackView的属性

1， axis：子控件的布局方向，水平或垂直， 这个不用过多解释了

2， spacing：子控件之间的最小间距，之所以说是最小间距，因为stackView会根据一定的规则对内部空间布局，有的时候不能满足所有要求，比如stackView 本身宽度100，内部两个控件，宽度都为50，50+50+10就超过了本身宽度， 这时会压缩其中一个子控件的宽度来满足最小间距。

3， distribution：子控件依据何种规则布局， 这个比较抽象， 看示例理解的快一点，以下示例均使用UILabel演示， 原因见插播

插播：先了解一下什么是IntrinsicContentSize（固有尺寸），

因为UIStackView对子控件的布局是建立在Autolayout基础之上的，

会涉及到IntrinsicContentSize

想一下当为一个Label创建约束时，是不是经常只指定上边距和左边距，

相信原因大家都知道，label内部的文字自会撑开宽高，

这个根据内容自己撑开的宽高就是IntrinsicContentSize。

怎样给一个UIView设置IntrinsicContentSize或者改变label的IntrinsicContentSize？

继承然后重写

-(CGSize)intrinsicContentSize

{

CGSizeoriginalSize=[superintrinsicContentSize];

CGSizesize=CGSizeMake(originalSize.width+20,originalSize.height+20)；

returnsize;

}

插播：先了解一下什么是IntrinsicContentSize（固有尺寸），

因为UIStackView对子控件的布局是建立在Autolayout基础之上的，

会涉及到IntrinsicContentSize

想一下当为一个Label创建约束时，是不是经常只指定上边距和左边距，

相信原因大家都知道，label内部的文字自会撑开宽高，

这个根据内容自己撑开的宽高就是IntrinsicContentSize。

怎样给一个UIView设置IntrinsicContentSize或者改变label的IntrinsicContentSize？

继承然后重写

-(CGSize)intrinsicContentSize

{

CGSizeoriginalSize=[superintrinsicContentSize];

CGSizesize=CGSizeMake(originalSize.width+20,originalSize.height+20)；

returnsize;

}

UIStackViewDistribution是个枚举值， 各个值如下， 配有示例图， 看不懂就只能自求多福了：

UIStackViewDistributionFill ：它就是将 arrangedSubviews 填充满整个 StackView ，如果设置了spacing，那么这些 arrangedSubviews 之间的间距就是spacing。如果减去所有的spacing，所有的 arrangedSubview 的固有尺寸( intrinsicContentSize )不能填满或者超出 StackView 的尺寸，那就会按照 Hugging 或者 CompressionResistance 的优先级来拉伸或压缩一些 arrangedSubview 。如果出现优先级相同的情况，就按排列顺序来拉伸或压缩。

UIStackViewDistributionFillEqually ：这种就是 StackView 的尺寸减去所有的spacing之后均分给 arrangedSubviews ，每个 arrangedSubview 的尺寸是相同的。

UIStackViewDistributionFillProportionally ：这种跟FillEqually差不多，只不过这个不是讲尺寸均分给 arrangedSubviews ，而是根据 arrangedSubviews 的 intrinsicContentSize 按比例分配。

UIStackViewDistributionEqualSpacing ：这种是使 arrangedSubview 之间的spacing相等，但是这个spacing是有可能大于 StackView 所设置的spacing，但是绝对不会小于。这个类型的布局可以这样理解，先按所有的 arrangedSubview 的 intrinsicContentSize 布局，然后余下的空间均分为spacing，如果大约 StackView 设置的spacing那这样就OK了，如果小于就按照 StackView 设置的spacing，然后按照 CompressionResistance 的优先级来压缩一个 arrangedSubview 。

UIStackViewDistributionEqualCentering ：这种是使 arrangedSubview 的中心点之间的距离相等，这样没两个 arrangedSubview 之间的spacing就有可能不是相等的，但是这个spacing仍然是大于等于 StackView 设置的spacing的，不会是小于。这个类型布局仍然是如果 StackView 有多余的空间会均分给 arrangedSubviews 之间的spacing，如果空间不够那就按照 CompressionResistance 的优先级压缩 arrangedSubview 。

4，alignment 子控件对其方式，类似UIlabel的textAlignment， 可以做一个类比， UILabel对应UIStackView， label的内容对应StackView的子控件。

UIStackViewDistribution是个枚举值， 各个值如下：

UIStackViewAlignmentFill, 默认方式， 如果子控件水平布局, 则指子控件的垂直方向填充满stackView. 反之亦然

UIStackViewAlignmentLeading, 如果子控件竖直布局, 则指子控件左边对齐stackView左边. 反之亦然, 即 UIStackViewAlignmentTop = UIStackViewAlignmentLeading。

UIStackViewAlignmentTop = UIStackViewAlignmentLeading,

UIStackViewAlignmentFirstBaseline, 根据上方基线布局所有子视图的y值(适用于Horizontal模式)， 这种模式没搞懂， 有知道怎么回事的求教了

UIStackViewAlignmentLastBaseline, 根据下方基线布局所有子视图的y值(适用于Horizontal模式)

UIStackViewAlignmentCenter, 中心对齐

UIStackViewAlignmentTrailing, 如果子控件竖直布局, 则指子控件左边对齐stackView右边. 反之亦然, 即UIStackViewAlignmentBottom = UIStackViewAlignmentTrailing

UIStackViewAlignmentBottom = UIStackViewAlignmentTrailing,

四， 另一个有意思一点的示例， 同时演示stackView的嵌套

即文章开头放出的动态图，

这个效果使用了两个StackView， 一个horizontalView， 一个verticalView，horizontalView即示例下方水平排布的View， 这个horizontalView也添加到verticalView的arrangedSubviews数组中， 具体实现看代码吧， 不多说了

github地址 ： https://github.com/CoderLXWang/UIStackView-Demo

【今日微信公号推荐↓】

更多推荐请看《》

其中推荐了包括技术、设计、极客 和 IT相亲相关的热门公众号。技术涵盖：Python、Web前端、Java、安卓、iOS、PHP、C/C++、.NET、Linux、数据库、运维、大数据、算法、IT职场等。点击《》，发现精彩！