ScrollView使用Masonry布局

2019-03-21 本文已影响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布局

猜你喜欢

热点阅读