iOS UIStackView详解

谁知我知你，我知你之深。

前言

说出来不怕你们笑话，UIStackView这玩意儿iOS 9.0就出来了，到现在我还没有用过它，稍微看了一下，其核心属性也就四个：axis、distribution、alignment、spacing，使用得当的话，还是很香的。

正文

先上Demo

我想大多数都遇到这种需求：

1.png

用户名字前面可能会有多个icon，也可能一个没有。没有用UIStackView的时候，你就要一个一个判断，2个还好，要是多个呢，想想都刺激！

如果使用UIStackView，只需要设置好间距，以及一些简单的布局，剩下的只要设置控件的Hidden属性，系统会自动帮你排版好，美里很~

核心代码：

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = UIColor.whiteColor;
    [self.view addSubview:self.stackView];
    [self.stackView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(HEIGHT_TOP + 100);
        make.left.equalTo(20);
        make.height.equalTo(50);
    }];
    [self.oneView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.width.height.equalTo(50);
    }];
    [self.twoView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.width.height.equalTo(50);
    }];
    [self.threeView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.width.height.equalTo(50);
    }];
    [self.fourView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.width.height.equalTo(50);
    }];
}

- (UIStackView *)stackView {
    if (!_stackView) {
        _stackView = [[UIStackView alloc] initWithArrangedSubviews:@[self.oneView, self.twoView, self.threeView, self.fourView]];
        _stackView.backgroundColor = UIColor.cyanColor;
        _stackView.spacing = 20;
    }
    return _stackView;
}

看下效果：

AutoLayout.gif

重要属性

axis

typedef NS_ENUM(NSInteger, UILayoutConstraintAxis) {
    //水平
    UILayoutConstraintAxisHorizontal = 0,
    //垂直
    UILayoutConstraintAxisVertical = 1
};

就是布局方向，这个不再赘述，demo里面有。

distribution （水平方向的对齐方式，垂直方向自动填满）

typedef NS_ENUM(NSInteger, UIStackViewDistribution) {
    //StackView大小约束确定：设置其他子元素的高度，留下一个子元素的高度自适应填充StackView空间
    //StackView大小约束不确定： 所有的子元素指定高度
    UIStackViewDistributionFill = 0,
    //StackView的大小约束确定：子元素自动调整高度。
    //StackView的大小约束不确定：指定一个子元素的高度，其他的子元素自动调整相同高度
    UIStackViewDistributionFillEqually,
    //StackView大小约束确定：子元素会等比例适配
    //StackView大小不确定：StackView的大小会根据子元素在主轴上大小，自定适配。
    UIStackViewDistributionFillProportionally,
    //StackView的大小约束确定的情况下使用
    UIStackViewDistributionEqualSpacing,
    //StackView的大小约束确定的情况下使用
    UIStackViewDistributionEqualCentering,
} API_AVAILABLE(ios(9.0));

效果如下：

Distribution.gif

特别的

• UIStackViewDistributionEqualSpacing 不设置StackView大小会更好
  
  UIStackViewDistributionEqualSpacing.png
• UIStackViewDistributionEqualCentering 不设置StackView大小会更好
  
  UIStackViewDistributionEqualCentering.png

alignment（Demo默认是水平布局）

typedef NS_ENUM(NSInteger, UIStackViewAlignment) {
    //铺满：当前是水平布局，就是垂直铺满。当前是垂直，就水平铺满
    UIStackViewAlignmentFill,
    //子视图顶部对齐，且在UIStackView顶部
    UIStackViewAlignmentLeading,
    //子视图顶部对齐
    UIStackViewAlignmentTop = UIStackViewAlignmentLeading,
    //水平布局有效，所有子视图居中对齐，且在StackView中部
    UIStackViewAlignmentFirstBaseline, // Valid for horizontal axis only
    //将项目在垂直堆栈中水平居中或垂直堆叠的物品（翻译的，不是很理解）
    UIStackViewAlignmentCenter,
    //对齐垂直堆叠物品的后缘或水平堆叠物品的底部边缘紧贴相关容器的边缘
    UIStackViewAlignmentTrailing,
    UIStackViewAlignmentBottom = UIStackViewAlignmentTrailing,
    //基线对其，水平布局有效
    UIStackViewAlignmentLastBaseline, // Valid for horizontal axis only
} API_AVAILABLE(ios(9.0));

效果如下：

UIStackViewAlignment.gif

后记

讲真的，UIStackViewAlignment里面的我还是有点迷，知道详细的大佬请留言，万分感谢。