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：内部控件自身宽度适配，控件之间的中心距离相等