iOS9新特性——堆疊視圖UIStackView

標籤：

iOS9新特性——堆疊視圖UIStackView一、引言

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

二、在storyBoard上初識StackView

        UIStackView是一個管理一組堆疊視圖的控制器類別檢視，所謂堆疊視圖時一種平鋪式的線性布局方式，不可重疊，布局方向也不可交錯，如果你做過watchOS的開發，你會發現，其實StackView與watchOS中的group十分能相似。

例如，我們如果需要一個如下效果的布局，在螢幕的中間擺放幾個大小一致的色塊，無論螢幕朝向如何，其位置都不會變化，並且可以向其中添加和移除色塊的數量：

       

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

將一些屬性設定如下：

Axis是設定布局的方向，有水平和垂直兩種方式，一個StackView只能選擇一種配置模式。

Alignment是選擇其管理檢視的對齊模式，我們這裡選擇充滿。

Distribution是設定其管理檢視的相片順序，我們選擇等寬充滿。

Spacing是設定視圖之間的間距，設定為10.

之後有一點需要注意，stackView用於布局其內部管理的視圖，對於它本身，我們還需要添加一些約束，將它約束在螢幕的中間。

我們向其中拖入任意數量的view，設定不同的顏色，就實現了我們想要的效果，並且可以隨意動態刪除和添加其中的view數量，不需要改變約束。

三、從代碼學習UIStackView

        通過代碼建立一個UIStackView也非常簡單，首先，我們先通過代碼實現上面的效果：

 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;

如下：

   

我們的布局沒有問題，並且可以動態改變其中view的個數，使用如下方法添加一個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有很大的區別，使用前者是將試圖添加進StackView的布局管理，後者只是簡單的加在試圖的層級上，並不接受StackView的布局管理。

技巧：因為StackView繼承於UIView，因此在布局改變的時候，我們可以使用UIView層的動畫，如下：

        //在添加view的時候會有動畫效果，移除的時候沒有        [stackView addArrangedSubview:newView];        [UIView animateWithDuration:1 animations:^{            [stackView layoutIfNeeded];        }];

四、再來深入理解下UIStackView

        通過上面的介紹，我們已經基本瞭解了StackView的使用和特點，下面我們再來仔細介紹一下與其相關的屬性和方法的使用，使我們能夠更加得心應手。

有關被管理檢視的添加與移除：

//初始化方法，通過數組傳入被管理的視圖- (instancetype)initWithArrangedSubviews:(NSArray<__kindof UIView *> *)views; //擷取被管理的所有視圖@property(nonatomic,readonly,copy) NSArray<__kindof UIView *> *arrangedSubviews;//添加一個視圖進行管理- (void)addArrangedSubview:(UIView *)view;//移除一個被管理的視圖- (void)removeArrangedSubview:(UIView *)view;//在指定位置插入一個被管理的視圖- (void)insertArrangedSubview:(UIView *)view atIndex:(NSUInteger)stackIndex;

與StackView布局設定相關：

1.配置模式：

@property(nonatomic) UILayoutConstraintAxis axis;

上面這個屬性用於設定布局的模型，枚舉如下：

//stackView只有兩種配置模式 水平和豎直typedef NS_ENUM(NSInteger, UILayoutConstraintAxis) {    //水平布局    UILayoutConstraintAxisHorizontal = 0,    //豎直布局    UILayoutConstraintAxisVertical = 1};

2.對齊模式： 

@property(nonatomic) UIStackViewAlignment alignment;

這個屬性用於設定控制項的對其模式，枚舉如下：

typedef NS_ENUM(NSInteger, UIStackViewAlignment) {   //水平布局時為高度充滿，豎直布局時為寬度充滿    UIStackViewAlignmentFill,    //前邊對其    UIStackViewAlignmentLeading,    //頂部對其    UIStackViewAlignmentTop = UIStackViewAlignmentLeading,    //第一個控制項文字的基準對其 水平布局有效    UIStackViewAlignmentFirstBaseline,     //中心對其    UIStackViewAlignmentCenter,    //後邊對其    UIStackViewAlignmentTrailing,    //底部對其    UIStackViewAlignmentBottom = UIStackViewAlignmentTrailing,    //基準對其，水平布局有效    UIStackViewAlignmentLastBaseline, } NS_ENUM_AVAILABLE_IOS(9_0);

在上面的例子中，我們設定了對其方式為充滿，這樣的話，我們就不需要再做過多控制項尺寸的約束，如果我們被管理的控制項高度或者寬度不一，我們可以設定中心對其，這樣的話，我們還需要為每個控制項添加一個寬度或者高度的約束，如下：

    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) {    //充滿，當只有一個控制項時可以使用    UIStackViewDistributionFill = 0,    //平分充滿，每個控制項佔據相同尺寸排列充滿    UIStackViewDistributionFillEqually,    //會優先按照約束的尺寸進行排列，如果沒有充滿，會展開最後一個排列的控制項充滿    UIStackViewDistributionFillProportionally,    //等間距排列    UIStackViewDistributionEqualSpacing,    //中心距離相等    UIStackViewDistributionEqualCentering,} NS_ENUM_AVAILABLE_IOS(9_0);

注意，除了我們選擇fill屬性時不需約束控制項視圖的尺寸，其他都需要進行約束，例如如果我們選擇等間距，我把改成如下代碼：

     [view mas_makeConstraints:^(MASConstraintMaker *make) {            make.height.equalTo([NSNumber numberWithFloat:height]);            make.width.equalTo(@50);                    }];     stackView.distribution = UIStackViewDistributionEqualSpacing;

效果如下：

4.其他

//設定最小間距@property(nonatomic) CGFloat spacing;//設定布局時是否參照基準@property(nonatomic,getter=isBaselineRelativeArrangement) BOOL baselineRelativeArrangement;//設定布局時是否以控制項的LayoutMargins為標準，預設為NO，是以控制項的bounds為標準@property(nonatomic,getter=isLayoutMarginsRelativeArrangement) BOOL layoutMarginsRelativeArrangement;

五、UIStackView的嵌套

        一個StackView不允許我們進行水平和豎直的交叉布局，但是我們可以通過嵌套的方式來實現複雜的布局效果，比如我們實現一個類似電影表標籤，可以使用水平布局的StackView中嵌套一個豎直布局的StackView：

十分輕鬆就可以實現如下的效果：

  

看到了吧，通過StackView，我們沒有添加過多的約束，使我們布局起來更加輕鬆了。如果你常常使用storyBoard進行開發，還有一個小技巧可以方便的將兩個控制項整合到一個StackView中，按住command，選中兩個控制項，之後點擊右下角的如標，系統會自動幫我們產生一個StackView，將選中的兩個控制項整合進去，很酷吧！

   

iOS9新特性——堆疊視圖UIStackView