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

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

首先，我們在ViewController中拉入一個(gè)stackView：

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

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

三、從代碼學(xué)習(xí)UIStackView
通過代碼創(chuàng)建一個(gè)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;
效果圖如下：

我們的布局沒有問題，并且可以動(dòng)態(tài)的改變其中view的個(gè)數(shù)，使用如下方法添加一個(gè)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];
與之相對，我們可以使用下面的方法移除一個(gè)view：
    UIView * view = [stackView arrangedSubviews].lastObject;
    [stackView removeArrangedSubview:view];
特別注意：addArrangedSubview和addSubview有很大的區(qū)別，使用前者是將試圖添加進(jìn)StackView的布局管理，后者只是簡單的加在試圖的層級上，并不接受StackView的布局管理。
技巧：因?yàn)镾tackView繼承于UIView，因此在布局改變的時(shí)候，我們可以使用UIView層的動(dòng)畫，如下：
        //在添加view的時(shí)候會(huì)有動(dòng)畫效果，移除的時(shí)候沒有
        [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;
//添加一個(gè)視圖進(jìn)行管理
- (void)addArrangedSubview:(UIView *)view;
//移除一個(gè)被管理的視圖
- (void)removeArrangedSubview:(UIView *)view;
//在指定位置插入一個(gè)被管理的視圖
- (void)insertArrangedSubview:(UIView *)view atIndex:(NSUInteger)stackIndex;
與StackView布局設(shè)置相關(guān)：
1.布局模式：
@property(nonatomic) UILayoutConstraintAxis axis;
上面這個(gè)屬性用于設(shè)置布局的模型，枚舉如下：
//stackView只有兩種布局模式 水平和豎直
typedef NS_ENUM(NSInteger, UILayoutConstraintAxis) {
    //水平布局
    UILayoutConstraintAxisHorizontal = 0,
    //豎直布局
    UILayoutConstraintAxisVertical = 1
};
2.對齊模式：
@property(nonatomic) UIStackViewAlignment alignment;
這個(gè)屬性用于設(shè)置控件的對其模式，枚舉如下：
typedef NS_ENUM(NSInteger, UIStackViewAlignment) {
   //水平布局時(shí)為高度充滿，豎直布局時(shí)為寬度充滿
    UIStackViewAlignmentFill,
    //前邊對其
    UIStackViewAlignmentLeading,
    //頂部對其
    UIStackViewAlignmentTop = UIStackViewAlignmentLeading,
    //第一個(gè)控件文字的基線對其 水平布局有效
    UIStackViewAlignmentFirstBaseline,
    //中心對其
    UIStackViewAlignmentCenter,
    //后邊對其
    UIStackViewAlignmentTrailing,
    //底部對其
    UIStackViewAlignmentBottom = UIStackViewAlignmentTrailing,
    //基線對其，水平布局有效
    UIStackViewAlignmentLastBaseline,
} NS_ENUM_AVAILABLE_IOS(9_0);
在上面的例子中，我們設(shè)置了對其方式為充滿，這樣的話，我們就不需要再做過多控件尺寸的約束，如果我們被管理的控件高度或者寬度不一，我們可以設(shè)置中心對其，這樣的話，我們還需要為每個(gè)控件添加一個(gè)寬度或者高度的約束，如下：
    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)只有一個(gè)控件時(shí)可以使用
    UIStackViewDistributionFill = 0,
    //平分充滿，每個(gè)控件占據(jù)相同尺寸排列充滿
    UIStackViewDistributionFillEqually,
    //會(huì)優(yōu)先按照約束的尺寸進(jìn)行排列，如果沒有充滿，會(huì)拉伸最后一個(gè)排列的控件充滿
    UIStackViewDistributionFillProportionally,
    //等間距排列
    UIStackViewDistributionEqualSpacing,
    //中心距離相等
    UIStackViewDistributionEqualCentering,
} NS_ENUM_AVAILABLE_IOS(9_0);
注意，除了我們選擇fill屬性時(shí)不需約束控件視圖的尺寸，其他都需要進(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è)置布局時(shí)是否參照基線
@property(nonatomic,getter=isBaselineRelativeArrangement) BOOL baselineRelativeArrangement;
//設(shè)置布局時(shí)是否以控件的LayoutMargins為標(biāo)準(zhǔn)，默認(rèn)為NO，是以控件的bounds為標(biāo)準(zhǔn)
@property(nonatomic,getter=isLayoutMarginsRelativeArrangement) BOOL layoutMarginsRelativeArrangement;


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

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

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

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

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

最新評論