scrollView自动布局,自适应contentSize (x

在使用scrollView进行自动布局时发现,scrollView的自动布局是相对来说比较复杂的,在设置完上下左右的约束后发现仍然会报错,查找发现这是因为contentSize无法确定,导致爆红.

网友给出了一些答案.但是好像需要设置contentView的高度约束,觉得不方便,尝试后发现可以通过下面的方法在scrollView中使用autolayout,同时实现自适应contentSize,做下记录.

只使用xib的方法实现下面界面的自适应.

先看效果

使用scrollView时分以下几步

1.在控制器View中拖入scrollView,设置上下左右约束距super为0

2.在scrollView中拖入一个view作为contentView,方便之后在contentView中进行布局,设置contentView上下左右约束距scrollView为0.这样完成后,会报错,就是因为contentSize没有确定.

3.设置contentView和scrollView水平居中对齐,确定x方向上scrollView的位置

设置完成仍然报错(先不管),但是出现水平方向上对齐的标示

4.开始在scrollView上面进行自由布局

5.要实现自动布局,重点在于contentView中的子控件能够上下左右撑开contentView,此时效果如下

可以看出,没写一句代码,已经实现了scrollView 中的自动布局(contentsize自适应子控件高度,可滚动).

接下来再实现在下一个视图中再添加一个label,使scrollView 自适应label文字高度

1.首先取消下方红色View的bottom约束

2.添加一个有很多文字的label

3.添加label之后

4.大招,可以看到把label的底部约束拖到与contentView的约束相等后,不再爆红,完成,运行起来,就是开始时的效果

*************************************

总结:可以看到从上到下,所有的控件撑起了整个contentView,实现自适应最关键的一点是,最下面的一个控件作为参考控件,把它的底部约束拖到contentView的底部相等.这样contentView就被正确的撑起来了.

希望这个小总结能给看到的朋友在开发中带来灵感.

不专业分割线**************************************纯代码部分

- (void)viewDidLoad {

[super viewDidLoad];

UIScrollView * scrollView = [[UIScrollView alloc]init];

[self.view addSubview:scrollView];

[scrollView mas_makeConstraints:^(MASConstraintMaker *make) {

make.edges.equalTo(self.view);

}];

UIView * container = [UIView new];

[scrollView addSubview:container];

[container mas_makeConstraints:^(MASConstraintMaker *make) {

make.edges.equalTo(scrollView);

make.width.equalTo(scrollView);

}];

UIView * redView = [UIView new];

redView.backgroundColor = [UIColor redColor];

[scrollView addSubview:redView];

[redView mas_makeConstraints:^(MASConstraintMaker *make) {

make.left.right.top.equalTo(scrollView);

make.height.mas_equalTo(600);

}];

UIView * blueView = [UIView new];

blueView.backgroundColor = [UIColor blueColor];

[scrollView addSubview:blueView];

[blueView mas_makeConstraints:^(MASConstraintMaker *make) {

make.top.equalTo(redView.mas_bottom);

make.left.right.equalTo(scrollView);

make.height.mas_equalTo(400);

make.bottom.equalTo(container);

}];

}

要注意的是，一定要用一个container，在container中进行布局，container的上下左右和scrollView相同，通过设置height或者width和scrollView相同，控制scrollView水平还是垂直滚动。在container中，从上往下布局，最后一个控件一定要和container的bottom设置相同，这样才能撑开container，使得scrollView可以滚动。