iOS9中,Apple又為開發者提供了一個新的布局視圖,UIStackView可以幫助開發者更加簡單的使用layout而不必手動添加太多布局約束。
一、引言
隨著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];
}];
更多詳情見請繼續閱讀下一頁的精彩內容: http://www.linuxidc.com/Linux/2015-12/126155p2.htm