UIStackView使用
什么是UIStackView？
UIStackView是在iOS9中才出现的，它可以帮助我们布局UI控件，从而减少我们的约束代码。
注1：UIStackView虽然继承自UIView，但是并不参与屏幕的渲染，所以设置背景颜色和重写drawRect:方法无效。
注2：UIStackView用于管理其内部视图布局，其本身，我们需要添加一些约束，将它约束在屏幕中。
UIStackView的属性
axis ：布局方向（UILayoutConstraintAxis），包括2个值
水平布局（UILayoutConstraintAxisHorizontal）
垂直布局（UILayoutConstraintAxisVertical）
spacing：设置视图之间的间距
alignment：管理视图的对齐模式
typedef NS_ENUM(NSInteger, UIStackViewAlignment) {
UIStackViewAlignmentFill, //水平布局时为高度充满，竖直布局时为宽度充满
UIStackViewAlignmentLeading, //前边对其
UIStackViewAlignmentTop = UIStackViewAlignmentLeading, //顶部对其
UIStackViewAlignmentFirstBaseline, //第一个控件文字的基线对其 水平布局有效
UIStackViewAlignmentCenter, //中心对其
UIStackViewAlignmentTrailing, //后边对其
UIStackViewAlignmentBottom = UIStackViewAlignmentTrailing, //底部对其
UIStackViewAlignmentLastBaseline, //基线对其，水平布局有效
} NS_ENUM_AVAILABLE_IOS(9_0);
distribution：管理视图的排序方式
typedef NS_ENUM(NSInteger, UIStackViewDistribution) {
UIStackViewDistributionFill = 0, //充满，并且根据内部子视图尺寸对子视图尺寸进行动态调整
UIStackViewDistributionFillEqually, //平分充满，每个控件占据相同尺寸排列充满
UIStackViewDistributionFillProportionally, //根据之前的比例填充
UIStackViewDistributionEqualSpacing, //等间距排列
UIStackViewDistributionEqualCentering, //所有子视图的中心之间的距离保持一致
} NS_ENUM_AVAILABLE_IOS(9_0);
UIStackView实战使用
1、UIStackView的水平和垂直布局，先来看一张效果图：
隐藏前后对比图.png
上图中有2个UIStackView，一个垂直布局一个水平布局（因为UIStackView无法设置背景颜色，这里UIStackView和背景之间有10的内边距）。
注：UIStackView不会对通过- (void)addSubview:(UIView *)view方法添加的view进行内部视图布局，如上图中的背景view。需要通过- (void)addArrangedSubview:(UIView *)view方法进行添加视图，如上图中的view1、view2、view3。
垂直布局中可以看到，隐藏一个view2后，UIStackView高度也会跟着变化，而且view1和view3间距也变化了，不需要改变view3的约束就已经达到了效果。
布局代码如下：
UIStackView *vStackView = [[UIStackView alloc] init];
[self.view addSubview:vStackView];
self.vStackView = vStackView;
/// 设置vStackView属性
// 设置放心垂直
vStackView.axis = UILayoutConstraintAxisVertical;
vStackView.spacing = 10;
[vStackView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(@100);
make.leading.equalTo(@10);
make.trailing.equalTo(@-10);
// 高度未给
// make.height.equalTo(@200);
}];
/// 内部view的布局
NSArray *array = @[view0, view1, view2];
[array mas_makeConstraints:^(MASConstraintMaker *make) {
make.height.equalTo(@60);
}];
/// 隐藏事件
- (void)clickVBtn:(UIButton *)sender {
sender.selected = !sender.selected;
NSArray *array = self.vStackView.arrangedSubviews;
UIView *view = array[1];
//view.hidden = sender.selected;
/// 动画
[UIView animateWithDuration:1 animations:^{
view.hidden = sender.selected;
[self.vStackView layoutIfNeeded];
}];
}
水平布局中看到，隐藏中间的view后，前后2个view的间距也变化了，而且进行了拉伸，拉伸是因为内部view没有设置宽度，是根据UIStackView进行等宽内部填充满。
布局代码如下：
/// 创建UIStackView
UIStackView *hStackView = [[UIStackView alloc] init];
[self.view addSubview:hStackView];
self.hStackView = hStackView;
/// 设置vStackView属性
// 设置放心垂直
hStackView.axis = UILayoutConstraintAxisHorizontal;
hStackView.spacing = 10;
/// 内部控件等宽填充满
hStackView.distribution = UIStackViewDistributionFillEqually;
[hStackView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(vStackView.mas_bottom).offset(50);
make.leading.equalTo(@10);
make.trailing.equalTo(@-10);
make.height.equalTo(@60);
}];
/// 这里子控件不需要约束代码
/// 隐藏事件
- (void)clickHBtn:(UIButton *)sender {
sender.selected = !sender.selected;
NSArray *array = self.hStackView.arrangedSubviews;
UIView *view = array[1];
view.hidden = sender.selected;
}
2、UIStackView的对齐方式，先来看两张效果图：
distribution.gif
alignment.gif
注：这里只看拉伸的情况
先看alignment，这个属性设置比较好理解。
UIStackViewAlignmentFill：填充满UIStackView
UIStackViewAlignmentTop： 和UIStackView顶部对齐
UIStackViewAlignmentCenter： 和UIStackView居中
UIStackViewAlignmentBottom： 和UIStackView底部对齐
再看distribution属性。
UIStackViewDistributionFill：填充满UIStackView
UIStackViewDistributionFillEqually：控件等宽填充满UIStackView
UIStackViewDistributionFillProportionally：会根据内部控件的宽等比例拉伸进而填充满UIStackView
UIStackViewDistributionEqualSpacing：内部控件自身宽度适配，间距相等
UIStackViewDistributionEqualCentering：内部控件自身宽度适配，控件之间的中心距离相等
