一级遭、UIStackView簡(jiǎn)介
UIStackView是iOS9中新增的API，類似于Android中的線性布局。UIStackView提供了一個(gè)高效的接口用于平鋪一行或一列的視圖組合。對(duì)于嵌入到StackView的視圖餐抢，你不用再添加自動(dòng)布局的約束了。Stack View管理這些子視圖的布局玲献，并幫你自動(dòng)布局約束廓啊。也就是說(shuō)，這些子視圖能夠適應(yīng)不同的屏幕尺寸乾胶。此外抖剿，你可以嵌入一個(gè)stack View到另一個(gè)stack view中來(lái)創(chuàng)建更為復(fù)雜的用戶界面朽寞。不要誤解我的意思，這并不意味著你就不需要處理自動(dòng)布局了斩郎。你仍舊要定義一些布局約束來(lái)約束stack view脑融。它只是幫你節(jié)約了為每個(gè)UI元素創(chuàng)建約束的時(shí)間，同時(shí)它更容易的從布局中添加/刪除一個(gè)視圖缩宜。
UIStackView *stackView = [[UIStackView alloc] init];
[self.view addSubview:stackView];
stackView.frame = CGRectMake(100, 100, 200, 50);
stackView.backgroundColor = [UIColor redColor];
UILabel *lable = [[UILabel alloc] init];
lable.text = @“測(cè)試”;
lable.backgroundColor = [UIColor colorWithRed:random()%256/255.0 green:random()%256/255.0 blue:random()%256/255.0 alpha:1];
[stackView addArrangedSubview:lable];
- 1肘迎、 UIStackView是UIView的子類，但backgroundColor 設(shè)置是無(wú)效的
- 2锻煌、UIStackView是通過(guò)它的 arrangedSubviews屬性列表來(lái)管理view的妓布， 而通過(guò)- (void)addArrangedSubview:(UIView *)view就可以將view添加到arrangedSubviews中
- 3、 stack view 用自動(dòng)布局的方式來(lái)確定其子view的大小和位置宋梧。
-
4匣沼、在水平方向上，第一個(gè)view的左邊緣和stack view的左邊緣是對(duì)齊的捂龄，最后一個(gè)view的右邊緣和stack view的右邊
邊緣是對(duì)齊的释涛，
截屏2020-08-20 上午10.22.14.png
截屏2020-08-20 上午10.23.50.png
如果你再去這樣給子view設(shè)置左邊的約束，自然是無(wú)效的
[lable mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(stackView).offset(20);
}];
控制臺(tái)也會(huì)打印這樣約束沖突的錯(cuò)誤
Unable to simultaneously satisfy constraints.
Probably at least one of the constraints in the following list is one you don't want.
因此需要注意的是倦沧，UIStackview內(nèi)部也是通過(guò)約束來(lái)實(shí)現(xiàn)的唇撬，因此，必須提供足夠的且正確的約束才能使用好它刀脏。
二局荚、axis
@property(nonatomic) UILayoutConstraintAxis axis;
typedef NS_ENUM(NSInteger, UILayoutConstraintAxis) {
UILayoutConstraintAxisHorizontal = 0,
UILayoutConstraintAxisVertical = 1
};
管理子view的布局方向，屬性值決定了子view的排布是按水平方向依次排布愈污，還是沿著豎直方向依次排布耀态。默認(rèn)是UILayoutConstraintAxisHorizontal
stackView.axis = UILayoutConstraintAxisHorizontal;
截屏2020-08-20 下午1.50.54.png
stackView.axis = UILayoutConstraintAxisVertical;
截屏2020-08-20 下午1.51.38.png
三、distribution
property(nonatomic) UIStackViewDistribution distribution;
typedef NS_ENUM(NSInteger, UIStackViewDistribution) {
UIStackViewDistributionFill = 0,
UIStackViewDistributionFillEqually,
UIStackViewDistributionFillProportionally,
UIStackViewDistributionEqualSpacing,
UIStackViewDistributionEqualCentering,
} ;
決定著在軸線方向上是怎么樣布局的暂雹，默認(rèn)值是UIStackViewDistributionFill
- 1首装、UIStackViewDistributionFill:子view填滿主軸方向StackView空間。
- 2杭跪、 UIStackViewDistributionFillEqually：使所有子視圖在軸方向上等寬或等高
- 3仙逻、UIStackViewDistributionFillProportionally：根據(jù)原先子視圖的比例來(lái)拉伸或壓縮子視圖的寬或高
- 4、UIStackViewDistributionEqualSpacing：所有子視圖中間的間隔保持一致
- 5涧尿、UIStackViewDistributionEqualCentering： 所有子視圖的中心之間的距離保持一致
3.1系奉、UIStackViewDistributionFill
1、stackView 大小約束確定
UIStackView *stackView = [[UIStackView alloc] init];
[self.view addSubview:stackView];
stackView.axis = UILayoutConstraintAxisHorizontal;
stackView.distribution = UIStackViewDistributionFill;
stackView.frame = CGRectMake(30, 100, 300, 300);
for (int i=0; i<4; i++) {
UIView *view =[[UIView alloc]init];
[stackView addArrangedSubview:view];
view.backgroundColor = [UIColor colorWithRed:random()%256/255.0 green:random()%256/255.0 blue:random()%256/255.0 alpha:1];
if (i<3) {
[view mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.equalTo(@90);
}];
}
}
- stackView大小約束確定：通過(guò)指定子元素的大小約束或者固有大小來(lái)布局子元素姑廉，當(dāng)所有子元素超出stackView或者沒(méi)有充滿stackView缺亮，會(huì)自動(dòng)根據(jù)約束的優(yōu)先級(jí)對(duì)某一個(gè)子view拉伸或者壓縮；當(dāng)約束優(yōu)先級(jí)不能確定時(shí)桥言，就按照排布的順序萌踱，對(duì)最后一個(gè)view拉伸或者壓縮;
2葵礼、stackView 大小不確定
UIStackView *stackView = [[UIStackView alloc] init];
[self.view addSubview:stackView];
stackView.axis = UILayoutConstraintAxisHorizontal;
stackView.distribution = UIStackViewDistributionFill;
[stackView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.left.offset(10);
}];
for (int i=0; i<4; i++) {
UIView *view =[[UIView alloc]init];
[stackView addArrangedSubview:view];
view.backgroundColor = [UIColor colorWithRed:random()%256/255.0 green:random()%256/255.0 blue:random()%256/255.0 alpha:1];
[view mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.height.equalTo(@90);
}];
stackView 大小不確定:所有的子元素指定大小約束，會(huì)自動(dòng)根據(jù)子元素調(diào)整stackView的大小并鸵。
3.2鸳粉、 UIStackViewDistributionFillEqually
1、stackView 大小約束確定
UIStackView *stackView = [[UIStackView alloc] init];
[self.view addSubview:stackView];
stackView.axis = UILayoutConstraintAxisHorizontal;
stackView.distribution = UIStackViewDistributionFillEqually;
[stackView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.left.offset(10);
make.height.equalTo(@200);
make.width.equalTo(@300);
}];
for (int i=0; i<4; i++) {
UIView *view =[[UIView alloc]init];
[stackView addArrangedSubview:view];
view.backgroundColor = [UIColor colorWithRed:random()%256/255.0 green:random()%256/255.0 blue:random()%256/255.0 alpha:1];
}
2园担、stackView 大小約束不確定
UIStackView *stackView = [[UIStackView alloc] init];
[self.view addSubview:stackView];
stackView.axis = UILayoutConstraintAxisHorizontal;
stackView.distribution = UIStackViewDistributionFillEqually;
[stackView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.left.offset(10);
}];
for (int i=0; i<4; i++) {
UIView *view =[[UIView alloc]init];
[stackView addArrangedSubview:view];
view.backgroundColor = [UIColor colorWithRed:random()%256/255.0 green:random()%256/255.0 blue:random()%256/255.0 alpha:1];
[view mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.equalTo(@60);
make.height.equalTo(@300);
}];
}
3届谈、 UIStackViewDistributionEqualSpacing
1、stackView 大小約束確定
UIStackView *stackView = [[UIStackView alloc] init];
[self.view addSubview:stackView];
stackView.axis = UILayoutConstraintAxisHorizontal;
stackView.distribution = UIStackViewDistributionEqualSpacing;
[stackView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.left.offset(10);
make.width.equalTo(@300);
make.height.equalTo(@100);
}];
for (int i=0; i<4; i++) {
UIView *view =[[UIView alloc]init];
[stackView addArrangedSubview:view];
view.backgroundColor = [UIColor colorWithRed:random()%256/255.0 green:random()%256/255.0 blue:random()%256/255.0 alpha:1];
[view mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.equalTo(@30);
}];
}
2粉铐、stackView 大小約束不確定
UIStackView *stackView = [[UIStackView alloc] init];
[self.view addSubview:stackView];
stackView.spacing = 20;
stackView.axis = UILayoutConstraintAxisHorizontal;
stackView.distribution = UIStackViewDistributionEqualSpacing;
[stackView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.left.offset(10);
make.height.equalTo(@100);
}];
for (int i=0; i<4; i++) {
UIView *view =[[UIView alloc]init];
[stackView addArrangedSubview:view];
view.backgroundColor = [UIColor colorWithRed:random()%256/255.0 green:random()%256/255.0 blue:random()%256/255.0 alpha:1];
[view mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.equalTo(@30);
}];
}
4疼约、 spacing
- 1、Fill distributions( UIStackViewDistributionFill 蝙泼、 UIStackViewDistributionFillEqually程剥、 UIStackViewDistributionFillProportionally)： spacing確定了子view的嚴(yán)格間距
- 2、other(UIStackViewDistributionEqualSpacing汤踏、 UIStackViewDistributionEqualCentering)：spacing作為了 最小間距织鲸，可能子view之間的間距會(huì)更大一些。
四溪胶、alignment
@property(nonatomic) UIStackViewAlignment alignment;
typedef NS_ENUM(NSInteger, UIStackViewAlignment) {
UIStackViewAlignmentFill,子視圖填充StackView
UIStackViewAlignmentLeading,子視圖左對(duì)齊（axis為垂直方向而言）
UIStackViewAlignmentTop = UIStackViewAlignmentLeading,子視圖頂部對(duì)齊（axis為水平方向而言）
UIStackViewAlignmentFirstBaseline, 按照第一個(gè)子視圖的文字的第一行對(duì)齊搂擦，同時(shí)保證高度最大的子視圖底部對(duì)齊（只在axis為水平方向有效）
UIStackViewAlignmentCenter,子視圖居中對(duì)齊
UIStackViewAlignmentTrailing,子視圖右對(duì)齊(axis為垂直方向而言）
UIStackViewAlignmentBottom = UIStackViewAlignmentTrailing,子視圖底部對(duì)齊（axis為水平方向而言）
UIStackViewAlignmentLastBaseline, 按照最后一個(gè)子視圖的文字的最后一行對(duì)齊，同時(shí)保證高度最大的子視圖頂部對(duì)齊（只在axis為水平方向有效）
} ;
決定了垂直軸方向的布局
截屏2020-08-20 下午5.03.34.png
UIStackView *containerView = [[UIStackView alloc] init];
containerView.axis = UILayoutConstraintAxisHorizontal;
containerView.alignment = UIStackViewAlignmentTop ;
containerView.spacing = 10;
NSMutableString *testString =[[NSMutableString alloc]init];
for (int i=0; i<5; i++) {
UILabel *lable = [[UILabel alloc] init];
lable.backgroundColor = [UIColor colorWithRed:random()%256/255.0 green:random()%256/255.0 blue:random()%256/255.0 alpha:1];
[containerView addArrangedSubview:lable];
NSString *str = [NSString stringWithFormat:@"%d",I];
[testString appendString:str];
lable.text = testString;
}
[self.view addSubview:containerView];
[containerView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.offset(100);
make.centerX.equalTo(self.view);
make.height.equalTo(@100);
}];
截屏2020-08-20 下午5.24.44.png
五哗脖、實(shí)戰(zhàn)應(yīng)用
一瀑踢、封裝一個(gè)圖文位置上、下才避、左橱夭、右調(diào)整的按鈕
http://www.reibang.com/p/72882fded55a
