我的博客, 各位看官有时间赏光

UIStackView

UIStackView介绍

随着autolayout的推广开来，更多的app开始使用自动布局的方式来构建自己的UI系统，autolayout配合storyBoard和一些第三方的框架，对于创建约束来说，已经十分方便，但是对于一些动态的线性布局的视图，我们需要手动添加的约束不仅非常多，而且如果我们需要插入或者移除其中的一些UI元素的时候，我们又要做大量的修改约束的工作，UIStackView正好可以解决这样的问题。

UIStackView 是 iOS 9 中新增的一个控件，它继承于UIView，用来管理一行或一列视图的布局(堆叠视图的控制器类视图，所谓堆叠视图时一种平铺式的线性布局方式，不可重叠，布局方向也不可交错)。UIStackView新增了几个属性，这些属性就是子视图布局规则。一旦UIStackView的这些属性发生变化，它的arrangedSubviews就会按照规则重新排布。只要我们掌握这些规则，就可以管理视图布局了。如果能再稍加灵活运用，有时候我们甚至能轻松实现一些精妙布局。 UIStackView可以帮助开发者更加简单的使用layout而不必手动添加太多布局约束.

属性	作用
Axis	属性决定了 stack 的朝向，只有垂直或水平
distribution	属性决定了其管理的视图在沿着其轴向上的布局
Alignment	属性决定了其管理的视图在垂直于其轴向上的布局
Spacing	属性决定了其管理的视图间的最小间隙
layoutMarginsRelativeArrangement	属性决定了 stack 视图平铺其管理的视图时是否要参照它的布局边距
baselineRelativeArrangement	属性决定了 stack 视图平铺其管理的视图时是否要参照它的布局边距

![Uploading 19_081418.png . . .]
](http://upload-images.jianshu.io/upload_images/1129706-a300c78a3ddc0cdb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

UIStackViewDistribution

axis、spacing、distribution和alignment是比较重要的4个属性，他们都能给布局带来明显的变化。axis和spacing属性作用单一，通过属性解释或者通过视图简单观察我们就能理解他们的作用。distribution和alignment这两个属性相对而言更具灵活性，也更具有难度，尤其是二者的结合使用。

public enum UIStackViewDistribution : Int {
  case fill
  case fillEqually
  case fillProportionally
  case equalSpacing
  case equalCentering
}

public enum UIStackViewAlignment : Int {
  case fill   
  case leading
  public static var top: UIStackViewAlignment { get }
  case firstBaseline
  case center
  case trailing
  public static var bottom: UIStackViewAlignment { get }
  case lastBaseline 
}

UIStackViewDistributionFill

将arrangedSubviews填充满整个StackView，他们之间的间隙等于spacing大小

如果减去所有的spacing，所有arrangedSubview的固有尺寸(intrinsicContentSize)之和不能填满StackView，那么就按照Hugging的优先级将其拉伸。反之，如果超出StackView的尺寸则按CompressionResistance的优先级压缩。如果优先级相同，就按排列顺序来拉伸或压缩。

Hugging/CompressionResistance.png

UIStackViewDistributionFill.png

UIStackViewDistributionFillEqually

每个arrangedSubview沿axis方向的长度相等，等于StackView沿axis长度减去spacing之和除以arrangedSubviews个数。

UIStackViewDistributionFillEqually.png

UIStackViewDistributionFillProportionally

根据arrangedSubview的intrinsicContentSize，将StackView沿axis方向的长度减去spacing之和按比例分配给arrangedSubviews。

UIStackViewDistributionFillProportionally.png

UIStackViewDistributionEqualSpacing

先按arrangedSubviews的intrinsicContentSize布局，然后余下的空间均分为spacing

如果spacing小于StackView设置的spacing，则按照CompressionResistance的优先级来压缩arrangedSubviews。

UIStackViewDistributionEqualSpacing.png

UIStackViewDistributionEqualCentering

令arrangedSubviews的中心点之间的距离相等，且spacing大于等于StackView设置的spacing（每两个arrangedSubview之间的spacing可能不相等）

如果spacing小于StackView设置的spacing，则按照CompressionResistance的优先级来压缩arrangedSubviews。

UIStackViewDistributionEqualCentering.png

UIStackViewalignment

UIStackViewAlignmentFill

在StackView轴向的垂直方向上拉伸所有子view来填充StackView

UIStackViewAlignmentFill.png

UIStackViewAlignmentLeading

用于stackview是垂直轴向时，所有子view靠左对齐

UIStackViewAlignmentLeading.png

UIStackViewAlignmentTop

用于stackview是水平轴向时，所有子view靠顶部对齐

UIStackViewAlignmentTop.png

UIStackViewAlignmentCenter

在StackView轴向的垂直方向上子视图以中线为基准对齐

UIStackViewAlignmentCenter.png

UIStackViewAlignmentTrailing

用于stackview是垂直轴向时，所有子view靠右对齐

UIStackViewAlignmentTrailing.png

UIStackViewAlignmentBottom

用于stackview是水平轴向时，所有子view靠底部对齐

UIStackViewAlignmentBottom.png

UIStackViewAlignmentFirstBaseline

用于stackview是水平轴向时，按照第一个子视图中文字的第一行对齐

UIStackViewAlignmentFirstBaseline.png

UIStackViewAlignmentLastBaseline

用于stackview是水平轴向时，按照最后一个子视图中文字的最后一行对齐

UIStackViewAlignmentLastBaseline.png

storyboard添加StackView

从对象库中拖拽UIStackView到storyboard中，然后往内部扔控件（UIView或其子类）就可以了。
选择storyboard中的控件，可以用“command键 + 单击”进行多选，然后点击下方的stack按钮，这样选中的控件就会被放入一个StackView中。

storyboard.png

代码添加StackView

创建UIStackView

    UIStackView *stackView = [[UIStackView alloc] initWithArrangedSubviews:@[forkingLabel, logoImageView, dogLabel]];
    stackView.translatesAutoresizingMaskIntoConstraints = NO;
    stackView.axis = UILayoutConstraintAxisHorizontal;
    stackView.distribution = UIStackViewDistributionFill;
    stackView.alignment = UIStackViewAlignmentCenter;
    stackView.spacing = 0;
   [self.view addSubview:stackView];

动态的改变其中view的个数

UIView * newView = [[UIView alloc]init];
[stackView addArrangedSubview:newView];

特别注意：addArrangedSubview和addSubview有很大的区别，使用前者是将视图添加进StackView的布局管理，后者只是简单的加在视图的层级上，并不接受StackView的布局管理。

与之相对，我们可以使用下面的方法移除一个view

UIView * view = [stackView arrangedSubviews].lastObject;
[stackView removeArrangedSubview:view];

StackView使用技巧

嵌套只要嵌套好UIStackView，就可以用很少的约束达到自动布局界面的目的

使用StackView 嵌套模仿同程首页布局

嵌套_TC.png

嵌套.png

结合sizeClass 多屏幕适配

查看SatckView的Attributes Inspector，我们会发现StackView的几个主要属性都是可以设置sizeclass模式的，
这对我们的屏幕适配将会大有助益。再加上约束的sizeClass，灵活性可以想象。

多屏幕适配.png

因为StackView继承于UIView，因此在布局改变的时候，我们可以使用UIView层的动画添加view的时候会有动画效果，移除的时候没有

[stackView addArrangedSubview:newView];
[UIView animateWithDuration:1 animations:^{
[stackView layoutIfNeeded];
}];

stackView_gif.gif

FDStackView

UIStackView是在iOS9才推出的，最低支持的系统也是iOS9, FDStackView出现了，它就是为了解决UIStackView在低于iOS9的系统下无法使用的问题
在FDStackView之前也已经有了一些类似的开源项目，比如OAStackView和TZStackView，然而他们都不能满足我们的需求，局限性还是比较大的，比如不支持IB，某些功能还没有实现，类名需要使用非UIStackView，在我们看来这些对开发者来说都是不友好的，开发者需要的是一款功能完善，支持IB，使用时完全无感，在Xcode7上直接使用UIStackView即可，接下来的事情交给FDStackView就好，它负责将UIStackView在低于iOS9的系统上运行。

需要注意如果使用IB的话，那么IB的Builds for属性需要设置为iOS 9.0 and later

FDStackView.png

forkingdog开源小组的成员实现原理介绍

FDStackView —— Downward Compatible UIStackView (Part 1)
FDStackView —— Downward Compatible UIStackView (Part 2)
FDStackView —— Downward Compatible UIStackView (Part 3)

Stay Hungry. Stay Foolish

StackView