在使用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可以滚动。
