iOS開發——線性布局神器UIStackView

今天，為大家介紹iOS9推出的一個線性布局神器UIStackView，如果你的項目最低适配iOS9以上的話，就可以愉快地使用了。

在AutoLayout的布局中，我們需要為subview設定各種依賴，當我們需要從其中插入一個view或者删除一個view時，就要在裡面更改大量的限制。在純代碼方面，還有Mansonry等架構可以支援，但是如果是xib或者storyboard的話，就隻能是在需要修改限制的地方一個個地去修改限制了。而UIStackView隻需要預先設定好布局的方式，之後無論是添加還是删除subview，它都會自動地幫我們調整好限制。

下面我為大家介紹一下常用的布局如何使用UIStackView（我用的是代碼，xib或者storyboard其實原理也是一樣，設定好UIStackView的屬性就行）

基礎屬性

axis：布局的方向，有UILayoutConstraintAxisHorizontal（橫向）和UILayoutConstraintAxisVertical（縱向）

alignment：位置，常用的有UIStackViewAlignmentLeading（居左）、UIStackViewAlignmentTop（居上）、UIStackViewAlignmentCenter（居中）、UIStackViewAlignmentTrailing（居右）

distribution：填充方式，常用的有UIStackViewDistributionFillEqually（平均鋪滿）、UIStackViewDistributionEqualSpacing（等間距）

執行個體

1、橫向平均分布

UIStackView *stackView = [[UIStackView alloc] init];
    stackView.axis = UILayoutConstraintAxisHorizontal;
    stackView.alignment = UIStackViewAlignmentCenter;
    stackView.distribution = UIStackViewDistributionFillEqually;//平均鋪滿
    [self.view addSubview:stackView];
    [stackView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.right.mas_equalTo(0);
        make.top.mas_equalTo(100);
    }];
    
    for (int i=0;i<4;i++) {
        UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
        [button setTitle:[NSString stringWithFormat:@"按鈕%d",i] forState:0];
        [button setTitleColor:[UIColor whiteColor] forState:0];
        button.backgroundColor = [UIColor blueColor];
        [stackView addArrangedSubview:button];//注意，不是addSubview
        [button mas_makeConstraints:^(MASConstraintMaker *make) {
            make.width.height.mas_equalTo(50);
        }];
    }
           

效果圖

修改distribution為等間距UIStackViewDistributionEqualSpacing，則會根據設定的subview的大小顯示，效果圖如下

修改一下stackView左右間距，讓subview居中顯示

[stackView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(40);
        make.right.mas_equalTo(-40);
        make.top.mas_equalTo(100);
    }];
           

效果圖如下：

這樣就可以實作一些像分享那樣的布局了。

2、縱向布局

UIStackView *stackView = [[UIStackView alloc] init];
    stackView.axis = UILayoutConstraintAxisVertical;
    stackView.alignment = UIStackViewAlignmentLeading;
    stackView.distribution = UIStackViewDistributionFill;
    stackView.spacing = 10;//subview的間距(橫向布局指橫向之間的間距，縱向布局則指縱向之間的間距)
    stackView.backgroundColor = [UIColor greenColor];
    [self.view addSubview:stackView];
    [stackView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(10);
        make.right.mas_equalTo(-10);
        make.top.mas_equalTo(100);
    }];
    
    for (int i=0;i<4;i++) {
        UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
        [button setTitle:[NSString stringWithFormat:@"按鈕%d",i] forState:0];
        [button setTitleColor:[UIColor whiteColor] forState:0];
        button.backgroundColor = [UIColor blueColor];
        [stackView addArrangedSubview:button];//注意，不是addSubview
        [button mas_makeConstraints:^(MASConstraintMaker *make) {
            make.width.height.mas_equalTo(50);
        }];
    }
           

效果圖如下：

上面的是居左顯示的，把alignment改成UIStackViewAlignmentCenter，效果圖如下：

此外，UIStackView還可以嵌套使用，下面是一個橫向的UIStackView嵌套了一個縱向的UIStackView

UIStackView *verticalStackView = [[UIStackView alloc] init];
    verticalStackView.axis = UILayoutConstraintAxisHorizontal;
    verticalStackView.alignment = UIStackViewAlignmentLeading;
    verticalStackView.distribution = UIStackViewDistributionFill;
    verticalStackView.backgroundColor = [UIColor greenColor];
    verticalStackView.spacing = 10;
    [self.view addSubview:verticalStackView];
    [verticalStackView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(10);
        make.right.mas_equalTo(-10);
        make.top.mas_equalTo(100);
    }];
    
    
    UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
    [button setTitle:@"按鈕" forState:0];
    [button setTitleColor:[UIColor whiteColor] forState:0];
    button.backgroundColor = [UIColor blueColor];
    [verticalStackView addArrangedSubview:button];//注意，不是addSubview
    [button mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(10);
        make.width.height.mas_equalTo(50);
    }];
    
    
    
    UIStackView *horizontalStackView = [[UIStackView alloc] init];
    horizontalStackView.axis = UILayoutConstraintAxisVertical;
    horizontalStackView.alignment = UIStackViewAlignmentLeading;
    horizontalStackView.distribution = UIStackViewDistributionFill;
    horizontalStackView.backgroundColor = [UIColor grayColor];
    horizontalStackView.spacing = 10;
    [verticalStackView addArrangedSubview:horizontalStackView];
    
    for (int i=0;i<3;i++) {
        UILabel *label = [[UILabel alloc] init];
        label.numberOfLines = 0;
        label.text = @"開發中常遇到UI要求文本均勻分布，兩端對齊，開始使用在文字中手動打空格的方式，但常常會碰到相同文字有時三個字，有時四個字，五個字，這個時候用打空格的";
        label.textColor = [UIColor blackColor];
        [horizontalStackView addArrangedSubview:label];
        [label mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.mas_equalTo(10);
        }];
    }
           

效果圖如下：

可以看出，UIStackView還會根據subview的高度，自動調整高度（因為最外層的UIStackView我并沒有設定高度）

還有更多的用法，大家可以自己嘗試用一下，當你熟悉了以後，你會發現，某些地方（比如橫向平均分布）比Mansonry還好用。當然，一般的限制還是要用Mansonry，UIStackView隻是線上性布局方面比較簡潔。