一、引言
隨著autolayout的推廣開來，更多的app開始使用自動布局的方式來構(gòu)建自己的UI系統(tǒng)，autolayout配合storyBoard和一些第三方的框架，對于創(chuàng)建約束來說，已經(jīng)十分方便，但是對于一些動態(tài)的線性布局的視圖，我們需要手動添加的約束不僅非常多，而且如果我們需要插入或者移除其中的一些UI元素的時候，我們又要做大量的修改約束的工作，UIStackView正好可以解決這樣的問題。

二、在storyBoard上初識StackView
UIStackView是一個管理一組堆疊視圖的控制器類視圖，所謂堆疊視圖時一種平鋪式的線性布局方式，不可重疊，布局方向也不可交錯，如果你做過watchOS的開發(fā)，你會發(fā)現(xiàn)，其實(shí)StackView與watchOS中的group十分能相似。
例如，我們?nèi)绻枰粋€如下效果的布局，在屏幕的中間擺放幾個大小一致的色塊，無論屏幕朝向如何，其位置都不會變化，并且可以向其中添加和移除色塊的數(shù)量：

首先，我們在ViewController中拉入一個stackView：

將一些屬性設(shè)置如下：

Axis是設(shè)置布局的方向，有水平和垂直兩種方式，一個StackView只能選擇一種布局模式。
Alignment是選擇其管理視圖的對齊模式，我們這里選擇充滿。
Distribution是設(shè)置其管理視圖的排列方式，我們選擇等寬充滿。
Spacing是設(shè)置視圖之間的間距，設(shè)置為10.
之后有一點(diǎn)需要注意，stackView用于布局其內(nèi)部管理的視圖，對于它本身，我們還需要添加一些約束，將它約束在屏幕的中間。
我們向其中拖入任意數(shù)量的view，設(shè)置不同的顏色，就實(shí)現(xiàn)了我們想要的效果，并且可以隨意動態(tài)刪除和添加其中的view數(shù)量，不需要改變約束。

三、從代碼學(xué)習(xí)UIStackView
通過代碼創(chuàng)建一個UIStackView也非常簡單，首先，我們先通過代碼實(shí)現(xiàn)上面的效果：
NSMutableArray * array = [[NSMutableArray alloc]init];
    for (int i =0 ; i<5; i++) {
        UIView * view = [[UIView alloc]init];
        view.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1];
        [array addObject:view];
    }
    UIStackView * stackView = [[UIStackView alloc]initWithArrangedSubviews:array];
    [self.view addSubview:stackView];
    [stackView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(self.view.mas_centerX);
        make.centerY.equalTo(self.view.mas_centerY);
        make.leading.equalTo(self.view.mas_leading).offset(20);
        make.trailing.equalTo(self.view.mas_trailing).offset(-20);
        make.size.height.equalTo(@100);
    }];
    stackView.axis = UILayoutConstraintAxisHorizontal;
    stackView.distribution = UIStackViewDistributionFillEqually;
    stackView.alignment = UIStackViewAlignmentFill;
效果圖如下：

我們的布局沒有問題，并且可以動態(tài)的改變其中view的個數(shù)，使用如下方法添加一個view：
    UIView * newView = [[UIView alloc]init];
    newView.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1];
    [stackView addArrangedSubview:newView];
與之相對，我們可以使用下面的方法移除一個view：
    UIView * view = [stackView arrangedSubviews].lastObject;
    [stackView removeArrangedSubview:view];
特別注意：addArrangedSubview和addSubview有很大的區(qū)別，使用前者是將試圖添加進(jìn)StackView的布局管理，后者只是簡單的加在試圖的層級上，并不接受StackView的布局管理。
技巧：因?yàn)镾tackView繼承于UIView，因此在布局改變的時候，我們可以使用UIView層的動畫，如下：
        //在添加view的時候會有動畫效果，移除的時候沒有
        [stackView addArrangedSubview:newView];
        [UIView animateWithDuration:1 animations:^{
            [stackView layoutIfNeeded];
        }];
       
四、再來深入理解下UIStackView
通過上面的介紹，我們已經(jīng)基本了解了StackView的使用和特點(diǎn)，下面我們再來仔細(xì)介紹一下與其相關(guān)的屬性和方法的使用，使我們能夠更加得心應(yīng)手。
有關(guān)被管理視圖的添加與移除：
//初始化方法，通過數(shù)組傳入被管理的視圖
- (instancetype)initWithArrangedSubviews:(NSArray<__kindof UIView *> *)views;
//獲取被管理的所有視圖
@property(nonatomic,readonly,copy) NSArray<__kindof UIView *> *arrangedSubviews;
//添加一個視圖進(jìn)行管理
- (void)addArrangedSubview:(UIView *)view;
//移除一個被管理的視圖
- (void)removeArrangedSubview:(UIView *)view;
//在指定位置插入一個被管理的視圖
- (void)insertArrangedSubview:(UIView *)view atIndex:(NSUInteger)stackIndex;
與StackView布局設(shè)置相關(guān)：
1.布局模式：
@property(nonatomic) UILayoutConstraintAxis axis;
上面這個屬性用于設(shè)置布局的模型，枚舉如下：
//stackView只有兩種布局模式 水平和豎直
typedef NS_ENUM(NSInteger, UILayoutConstraintAxis) {
    //水平布局
    UILayoutConstraintAxisHorizontal = 0,
    //豎直布局
    UILayoutConstraintAxisVertical = 1
};
2.對齊模式：
@property(nonatomic) UIStackViewAlignment alignment;
這個屬性用于設(shè)置控件的對其模式，枚舉如下：
typedef NS_ENUM(NSInteger, UIStackViewAlignment) {
   //水平布局時為高度充滿，豎直布局時為寬度充滿
    UIStackViewAlignmentFill,
    //前邊對其
    UIStackViewAlignmentLeading,
    //頂部對其
    UIStackViewAlignmentTop = UIStackViewAlignmentLeading,
    //第一個控件文字的基線對其 水平布局有效
    UIStackViewAlignmentFirstBaseline,
    //中心對其
    UIStackViewAlignmentCenter,
    //后邊對其
    UIStackViewAlignmentTrailing,
    //底部對其
    UIStackViewAlignmentBottom = UIStackViewAlignmentTrailing,
    //基線對其，水平布局有效
    UIStackViewAlignmentLastBaseline,
} NS_ENUM_AVAILABLE_IOS(9_0);
在上面的例子中，我們設(shè)置了對其方式為充滿，這樣的話，我們就不需要再做過多控件尺寸的約束，如果我們被管理的控件高度或者寬度不一，我們可以設(shè)置中心對其，這樣的話，我們還需要為每個控件添加一個寬度或者高度的約束，如下：
    NSMutableArray * array = [[NSMutableArray alloc]init];
    for (int i =0 ; i<5; i++) {
        UIView * view = [[UIView alloc]init];
        view.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1];
        float height = arc4random()%90+10;
        [view mas_makeConstraints:^(MASConstraintMaker *make) {
            make.height.equalTo([NSNumber numberWithFloat:height]);
        }];
        [array addObject:view];
    }
    stackView = [[UIStackView alloc]initWithArrangedSubviews:array];
    [self.view addSubview:stackView];
    [stackView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(self.view.mas_centerX);
        make.centerY.equalTo(self.view.mas_centerY);
        make.leading.equalTo(self.view.mas_leading).offset(20);
        make.trailing.equalTo(self.view.mas_trailing).offset(-20);
        make.size.height.equalTo(@100);
    }];
    stackView.axis = UILayoutConstraintAxisHorizontal;
    stackView.distribution = UIStackViewDistributionFillEqually;
    stackView.alignment = UIStackViewAlignmentCenter;
效果如下：

這樣，參差不齊的控件布局我們也可以輕松完成。
3.排列方式
@property(nonatomic) UIStackViewDistribution distribution;
排列方式的枚舉如下：
typedef NS_ENUM(NSInteger, UIStackViewDistribution) {
    //充滿，當(dāng)只有一個控件時可以使用
    UIStackViewDistributionFill = 0,
    //平分充滿，每個控件占據(jù)相同尺寸排列充滿
    UIStackViewDistributionFillEqually,
    //會優(yōu)先按照約束的尺寸進(jìn)行排列，如果沒有充滿，會拉伸最后一個排列的控件充滿
    UIStackViewDistributionFillProportionally,
    //等間距排列
    UIStackViewDistributionEqualSpacing,
    //中心距離相等
    UIStackViewDistributionEqualCentering,
} NS_ENUM_AVAILABLE_IOS(9_0);
注意，除了我們選擇fill屬性時不需約束控件視圖的尺寸，其他都需要進(jìn)行約束，例如如果我們選擇等間距，我把改成如下代碼：
     [view mas_makeConstraints:^(MASConstraintMaker *make) {
            make.height.equalTo([NSNumber numberWithFloat:height]);
            make.width.equalTo(@50);
           
        }];
     stackView.distribution = UIStackViewDistributionEqualSpacing;
效果如下：

4.其他
//設(shè)置最小間距
@property(nonatomic) CGFloat spacing;
//設(shè)置布局時是否參照基線
@property(nonatomic,getter=isBaselineRelativeArrangement) BOOL baselineRelativeArrangement;
//設(shè)置布局時是否以控件的LayoutMargins為標(biāo)準(zhǔn)，默認(rèn)為NO，是以控件的bounds為標(biāo)準(zhǔn)
@property(nonatomic,getter=isLayoutMarginsRelativeArrangement) BOOL layoutMarginsRelativeArrangement;


五、UIStackView的嵌套
一個StackView不允許我們進(jìn)行水平和豎直的交叉布局，但是我們可以通過嵌套的方式來實(shí)現(xiàn)復(fù)雜的布局效果，比如我們實(shí)現(xiàn)一個類似電影表標(biāo)簽，可以使用水平布局的StackView中嵌套一個豎直布局的StackView：

十分輕松就可以實(shí)現(xiàn)如下的效果：

看到了吧，通過StackView，我們沒有添加過多的約束，使我們布局起來更加輕松了。如果你常常使用storyBoard進(jìn)行開發(fā)，還有一個小技巧可以方便的將兩個控件整合到一個StackView中，按住command，選中兩個控件，之后點(diǎn)擊右下角的如下圖標(biāo)，系統(tǒng)會自動幫我們生成一個StackView，將選中的兩個控件整合進(jìn)去，很酷吧！

六、總結(jié)
UIStackView 雖然小巧靈活，但是要想更精致的效果，最終還得靠 UICollectionView，看到微博上有人說這個類可能是脫胎于 Apple Watch，很可能，在那么小的屏幕上，還要拖各種約束來進(jìn)行對齊和調(diào)整位置真是要煩死。弄了一通，覺得用處不大吧。在推上，看見很多開發(fā)者對這個類很是興奮：
來自 twitter 上的看法：

因?yàn)?UIStackView 可以嵌套，實(shí)現(xiàn)以上的有絲分裂很方便，要是用 UICollectionView 簡直要命。還有一位開發(fā)者說，這么多年了，終于有可以不滑動的 UITableView 了。由于我經(jīng)驗(yàn)尚淺，不知道這些需求怎么產(chǎn)生的，或者我的腦洞還太小，不知道這個可以方便實(shí)現(xiàn)什么效果。
總體而言，UIStackView 實(shí)現(xiàn)有對齊要求的視圖布局非常非常得簡單，而使用 UICollectionView 和 UITableView 來實(shí)現(xiàn)就比較麻煩；還可以實(shí)時在 IB 里預(yù)覽效果。最后有點(diǎn)很不方便的是，因?yàn)?UIStackView 是利用 UIView 類的 intrinsicContentSize 屬性來計(jì)算布局，對不同長寬比以及分辨率的圖片進(jìn)行對齊和位置調(diào)整不是很給力，即使用 UIView 來進(jìn)行封裝來一層也基本無效，除了對原圖片進(jìn)行縮放，暫時還沒有找到好的解決方案。

最新評論