-
ScrollView使用Masonry布局是个很常见的问题了,网上也有很多的资料,但是大部分没说清楚,而且布局也是有很多问题,这里小编提供一份详细的解决方案,大家只需要看这一篇文章就够了。
-
解决上下滑动
大家都知道scrollview想要上下滑动,那么就得设置scrollview的contentSize(内容)大小,如果contentSize(内容)的高大于scrollview的高,那么就能上下滑动,否则就不能。使用masonry布局也是一样的原理,也是设置内容的高大于scrollview的高。
大家先看下代码
// 先设置scrollview的布局,然后在scrollview里添加一个子视图(相当于内容视图),此视图就相当于scrollview的contentSize
UIScrollView * scrollview = [[UIScrollView alloc] init];
[self.view addSubview:scrollview];
[scrollview mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right.bottom.top.equalTo(self.view);
}];
//内容视图相当于scrollview的contentSize
UIView * content_view = [[UIView alloc] init];
content_view.backgroundColor = [UIColor redColor];
[scrollview addSubview:content_view];
[content_view mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(scrollview);
//如果是上下滑动就得把内容视图的宽固定,高不固定。如果是左右滑动就得把内容视图的高固定,宽不固定
//这里是上下滑动,所以将宽固定了(固定成了跟scrollview一样宽)
make.width.equalTo(scrollview);
}];
//scrollview上的内容就直接添加在内容视图(content_view)上就可以了,然后再设置内容视图的bottom的约束就可以了(相当于设置内容视图的高)
//例如我想在scrollview上添加一个view
UIView * view1 = [[UIView alloc] init];
view1.backgroundColor = [UIColor whiteColor];
view1.clipsToBounds = YES;
view1.layer.cornerRadius = 10;
[content_view addSubview: view1];
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
//这个view的高很明显就超出了scrollview的高
make.height.equalTo(@2400);
make.top.equalTo(content_view).offset(10);
make.left.equalTo(content_view).offset(15);
make.right.equalTo(content_view).offset(-15);
}];
//代码到了这里虽然view1的高超出了scrollview的高,但是scrollview还不能上下滑动,因为scrollview的内容视图(content_view)宽固定了,但是高还没确定
//这里必须再把scrollview的内容视图(content_view)的高确定
//为什么一开始不确定内容视图(content_view)的高呢
//因为一开始我们并不知道view1有多高,所以一开始不好确定
//在这里我们只要设置内容视图的bottom的约束就可以了
//这样内容视图(content_view)就能自动计算高了,而不用自己去计算了
[content_view mas_makeConstraints:^(MASConstraintMaker *make) {
make.bottom.equalTo(view1).offset(20);
}];
- 大家可以直接复制代码测试
还有个问题,我这里只在内容视图上放了一个view,但是在实际需求上会很复杂,不可能只有一个view,可能会有多个控件。如果是多个控件那该如何让scrollview上下滑动呢。原理是一样的,其他的不变只需更改scrollview的内容的高就可以了,也就是修改内容视图的bottom的约束,一定得让内容视图的bottom要在最后控件的bottom下面。
-
总结
上下滑动的原理:在scrollview上添加一个子视图作为scrollview的内容视图(相当于scrollview的contentSize),scrollview上的内容(各种控件,就是你想在展示的东西)就添加在内容视图上,如果想要上下滑动,则固定内容视图的宽,设置内容视图的bottom低于最后控件的bottom(一般内容视图的bottom属性是在所有控件都约束好了后再添加的,具体看代码) -
解决左右滑动
左右滑动原理跟上下滑动是一样的。就是固定内容视图的高,然后设置内容视图的宽
网友评论