UIStackView

UIStackView共四个属性：
1、axis 排列
2、distribution 填充
3、alignment 对齐
4、spacing 间距

• Axis

typedef NS_ENUM(NSInteger, UILayoutConstraintAxis) {
    UILayoutConstraintAxisHorizontal = 0 ,    //水平方向布局 （默认）
    UILayoutConstraintAxisVertical = 1         //垂直方向布局
};

• Distribution
  Fill -> UIStackViewDistributionFill
  填充整个UIStackView，并且根据内部子视图尺寸对子视图尺寸进行动态调整。
  Fill Equally -> UIStackViewDistributionFillEqually
  根据视图大小平均分配UIStackView尺寸，等比例填充UIStackView，过程中会根据分配的大小改变子视图尺寸。
  Fill Proportionally -> UIStackViewDistributionFillProportionally
  根据之前的比例填充UIStackView。
  Equal Spacing -> UIStackViewDistributionEqualSpacing
  填充整个UIStackView，子视图没有占满UIStackView将会用空白平均填充子视图中间的间距，超出UIStackView将会根据arrangedSubviews数组下标压缩子视图。
  Equal Centering -> UIStackViewDistributionEqualCentering
  平均分配子视图得到每个视图的中心点，使用这个中心点来布局每个子视图，并且保持spacing距离，超出将会重新布局子视图，并压缩部分子视图。

• Alignment
  Fill -> UIStackViewAlignmentFill
  视图纵向填充
  Top -> UIStackViewAlignmentTop
  视图向上对其(适用于Horizontal模式)
  Center -> UIStackViewAlignmentCenter
  视图居中对其
  Bottom -> UIStackViewAlignmentBottom
  视图向下对其(适用于Horizontal模式)
  First Baseline -> UIStackViewAlignmentFirstBaseline
  根据上方基线布局所有子视图的y值(适用于Horizontal模式)
  Last Baseline -> UIStackViewAlignmentLastBaseline
  根据下方基线布局所有子视图的y值(适用于Horizontal模式)
  trailing -> UIStackViewAlignmentTrailing
  视图向左对齐(适用于Vertical模式)
  leading -> UIStackViewAlignmentLeading
  视图向右对齐(适用于Vertical模式)

• spacing
  spacing -> CGFloat spacing
  子控件之间的最小距离

• isBaselineRelativeArrangement（默认 false）
  决定了垂直轴如果是文本的话，是否按照 baseline 来参与布局。

• isLayoutMarginsRelativeArrangement （默认 false）
  如果打开则通过 layout margins 布局，关闭则通过 bounds

演示如图：

image.png

arrangedSubviews数组
UIStackView使用arrangedSubviews数组来管理子视图。需要注意的是这个数组是一个readonly的属性，我们需要调用方法对arrangedSubviews数组进行操作。
初始化数组:
- (instancetype)initWithArrangedSubviews:(NSArray<__kindof UIView *> *)views;
添加子视图:
- (void)addArrangedSubview:(UIView *)view;
移除子视图:
- (void)removeArrangedSubview:(UIView *)view;
根据下标插入视图:
- (void)insertArrangedSubview:(UIView *)view atIndex:(NSUInteger)stackIndex;

编码添加约束:
UIStackView 的布局使用frame是没有任何效果的。
可以与其他约束框架Masonry混合使用，仅能约束宽高,不能约束边界。

- (void) setup {

    //View 1
    UIView *view1 = [[UIView alloc] init];
    view1.backgroundColor = [UIColor blueColor];
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(CGSizeMake(50, 100));
    }];
//    [view1.heightAnchor constraintEqualToConstant:100].active = true;
//    [view1.widthAnchor constraintEqualToConstant:120].active = true;


    //View 2
    UIView *view2 = [[UIView alloc] init];
    view2.backgroundColor = [UIColor greenColor];
    [view2 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(CGSizeMake(300, 20));
    }];
//    [view2.heightAnchor constraintEqualToConstant:100].active = true;
//    [view2.widthAnchor constraintEqualToConstant:70].active = true;

    //View 3
    UIView *view3 = [[UIView alloc] init];
    view3.backgroundColor = [UIColor magentaColor];
    [view3.heightAnchor constraintEqualToConstant:100].active = true;
    [view3.widthAnchor constraintEqualToConstant:180].active = true;

    //Stack View
    UIStackView *stackView = [[UIStackView alloc] init];

    stackView.axis = UILayoutConstraintAxisVertical;
    stackView.distribution = UIStackViewDistributionEqualSpacing;
    stackView.alignment = UIStackViewAlignmentCenter;
    stackView.spacing = 30;

    [stackView addArrangedSubview:view1];
    [stackView addArrangedSubview:view2];
    [stackView addArrangedSubview:view3];

    stackView.translatesAutoresizingMaskIntoConstraints = false;
    [self.view addSubview:stackView];


    //Layout for Stack View
    [stackView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor].active = true;
    [stackView.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor].active = true;
}

效果如图：

6.png