天天看點
傳回

iOS9新特性——堆疊視圖UIStackView

iOS9新特性——堆疊視圖UIStackView

一、引言

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

二、在storyBoard上初識StackView

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

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

iOS9新特性——堆疊視圖UIStackView
iOS9新特性——堆疊視圖UIStackView

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

iOS9新特性——堆疊視圖UIStackView

将一些屬性設定如下：

iOS9新特性——堆疊視圖UIStackView

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;

效果圖如下：

iOS9新特性——堆疊視圖UIStackView
iOS9新特性——堆疊視圖UIStackView

我們的布局沒有問題，并且可以動态的改變其中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;

效果如下：

iOS9新特性——堆疊視圖UIStackView
iOS9新特性——堆疊視圖UIStackView

這樣，參差不齊的控件布局我們也可以輕松完成。

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;
iOS9新特性——堆疊視圖UIStackView
iOS9新特性——堆疊視圖UIStackView

4.其他

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

五、UIStackView的嵌套

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

iOS9新特性——堆疊視圖UIStackView

十分輕松就可以實作如下的效果：

iOS9新特性——堆疊視圖UIStackView
iOS9新特性——堆疊視圖UIStackView

看到了吧，通過StackView，我們沒有添加過多的限制，使我們布局起來更加輕松了。如果你常常使用storyBoard進行開發，還有一個小技巧可以友善的将兩個控件整合到一個StackView中，按住command，選中兩個控件，之後點選右下角的如下圖示，系統會自動幫我們生成一個StackView，将選中的兩個控件整合進去，很酷吧！

iOS UIStackView iOS9新特性 堆疊視圖 線性布局
上一篇: JSP+EL+JSTL學習小結
下一篇: day13_Mysql事務與資料庫連接配接池學習筆記

繼續閱讀