UIStackView介绍

ios9之后增加了新的布局神器UIStackView,首先我们先介绍一下UIStackView的常用属性，然后我们根据相应的demo阐述其在实际生产中的作用。
UIStackView有两种形式，一种是横向布局 Horizontal Stack View，一种是竖向布局 Vertical Stack View。

Paste_Image.png

Axis
通过上图，我们看到了第一个属性Axis（控制 stackView的布局）,其值分别为Horizontal,Vertical,从字面意思可以看出，两者主要是控制UIStackView是横向布局还是纵向布局。
Alignment
第二个属性Alignment(控制 stackView中子控件的布局位置)，在不同的布局中其值也是不一样的，在Axis=Horizontal的时候，Alignment的值等于Fill, top, center, bottom, first BaseLine, Last BaseLine, 从字面的意思中我们也可以看出来，分别是填充整个屏幕，顶部对齐，居中对齐，底部对齐，以第一个元素的BaseLine对齐，以最后一个元素的BaseLine对齐

fill.png

top.png

center.png

bottom.png

�first-baseline.png

last-baseline.png

在Axis=Vertical的时候，Alignment的值等于fill, leading, trailing, center,分别为填充，左侧，右边，居中。效果图就是横向布局竖起来就是了，在这里不一一截图了（有兴趣的可以自己试试）
Distribution
第三个属性Distribution，其实它是控制子空间的一些属性的，其值：
Fill Equally 占据相同空间(按最大者)
Fill proportionally 保持比例填充
Equal Spacing
Equal Centering

拖入两个 UIView，此时，我是在 Distribution的选项中，选择了 fill equal。这时，拖入的两个 view均会布局为自动布满。另外，可以看到，其实stackView的原理，应该是根据相关属性，然后自动添加约束。

Paste_Image.png

因此，在 Distribution中选择 fill equal和fill proportionally两个选项时，stackView均会为其自动添加约束。等比例的布局，在很多 UI界面上总是可以碰到的。所以这个还是挺有实用性的。至于 Distribution的选项，那么需要为其额外添加一些高度约束。比如选择 fill（默认），那么需要为其添加一些高度约束，以确定控件的大小。比如九宫格布局的话，可以在 vertical stackView中再嵌入三个 horizontal stackView,之后得到九宫格布局。
Spacing
第三个属性Spacing, 顾名思义就是子控件之间的简介

Spacing.png

ok, 基本的属性我们已经介绍到这里了，这时候，我会问，在实际生产中，有何用处呢？下面我们实现几个常用的功能，就知道UIStackView的简洁性了。

三个单元格横向平分整个屏幕，左右等间距，宽度高度一致

Paste_Image.png

我觉得在我们的实际生产中，这是最常见的一种布局了。在实际的生产场景中，我们也许会选择UICollectionView,但是总觉得用CollectionView是大材小用了，或者用三个UIView,增加各种约束来实现，这也是我们最容易的选择的方案。我们以第二个方案为例：
如果我们实现这样的布局，首先：
1.相对于父 view 的约束。如：距离上边距 10，左边距 10。
2.相对于前一个元素的约束。如：距离上一个元素 20，距离左边的元素 5 等。
3.对齐类约束。如：跟父 view 左对齐，跟上一个元素居中对齐等。
4.相等约束。如：跟父 view等宽高。
这样的话，我们要写很多的约束，这是我不喜欢的。
如果用UIStackView就会简单很多了

定义UIStackView的距离父元素的左右间距
在UIStackView中拖入三个UIView
设置Alignment=fill, Distribution=fill equal（这个是实现的重点所在）
解决战斗。

代码地址：https://github.com/BernardChina/UIStackViewDemo.git

用代码实现大众点评网中一个小布局

Paste_Image.png

实现红色标注的部分

首先需要init UIStackView

UIStackView *stackView = [[UIStackView alloc] init];

设置属性

UIStackView *stackView = [[UIStackView alloc] init];
    stackView.axis = UILayoutConstraintAxisHorizontal;
    stackView.alignment = UIStackViewAlignmentFill;
    stackView.spacing = 10;
    [stackView setFrame:CGRectMake(10, 150, 300, 74)];
    [self.view addSubview:stackView];

添加左侧的图片

UIImageView *leftImageView = [[UIImageView alloc] init];
    [leftImageView setImage:[UIImage imageNamed:@"2.png"]];
    [leftImageView setFrame:CGRectMake(10, 10, 100, 74)];
    [stackView addArrangedSubview:leftImageView];

当把imageView加入到StackView的时候，不是使用的addSubview而是addArrangedSubview

下面定义右边的部分，直接上代码

UIStackView *secondStackView = [[UIStackView alloc] init];
    secondStackView.axis = UILayoutConstraintAxisVertical;
    secondStackView.alignment = UIStackViewAlignmentFill;
    secondStackView.distribution = UIStackViewDistributionFill;
    [secondStackView setFrame:CGRectMake(0, 0, 184, 74)];
    [stackView addArrangedSubview:secondStackView];
    
    UILabel *lable = [[UILabel alloc] init];
    lable.text = @"煲宫(龙阳店)";
    
    UIImageView *secondImage = [[UIImageView alloc] init];
    [secondImage setImage:[UIImage imageNamed:@"1.png"]];
    
    UILabel *lable2 = [[UILabel alloc] init];
    lable2.text = @"世纪公园 更多火锅";
    
    [secondStackView addArrangedSubview:lable];
    [secondStackView addArrangedSubview:secondImage];
    [secondStackView addArrangedSubview:lable2];
    
    [stackView addArrangedSubview:secondStackView];

UIStackView暂时先介绍到这里。

上面的代码：https://github.com/BernardChina/UIStackViewDemo.git
请各位看官多多指教，目前代码有些布局有些小调整。

UIStackView介绍

推荐阅读更多精彩内容