美文网首页程序员
ScrollView使用Masonry布局

ScrollView使用Masonry布局

作者: 鄂北 | 来源:发表于2019-03-21 13:43 被阅读0次
  • 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属性是在所有控件都约束好了后再添加的,具体看代码)

  • 解决左右滑动
    左右滑动原理跟上下滑动是一样的。就是固定内容视图的高,然后设置内容视图的宽

相关文章

网友评论

    本文标题:ScrollView使用Masonry布局

    本文链接:https://www.haomeiwen.com/subject/srfqvqtx.html