使用Masonry过程中设置ScrollView的滑动范围

很多时候,我们需要使用ScrollView来作为底层View,来使整个界面能够滑动显示.使用Frame来设置各控件的坐标时,很简单,直接用ScrollView的ContentSize属性就可以设置其滑动范围,但是使用Masonry的时候 ,这个方法就不行了,此时,我们需要给ScrollView上加一层containerView,将各个控件都加在containerView上,然后根据最后一个控件的的位置来设置containerView的底部约束就可以了.废话不多说,贴一下代码:

1.先创建一个ScrollView

self.baseView = [[UIScrollView alloc] init];
self.baseView.backgroundColor = [UIColor clearColor];
self.baseView.delegate = self;
self.baseView.showsVerticalScrollIndicator = NO;
[self.view addSubview:self.baseView];
[self.baseView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.mas_equalTo(self.view);
}];

2.在ScrollView上添加一个containerView

UIView *containerView = [UIView new];
[self.baseView addSubview:containerView];
[containerView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.mas_equalTo(self.baseView);
    make.width.mas_equalTo(self.baseView);
}];

3.将需要展示的控件添加在containerView上(此处只是示例代码)

UIView *segementView1 = [[UIView alloc] init];
segementView1.backgroundColor = COLOR_BACKVIEW_GRAY;
[containerView addSubview:segementView1];
[segementView1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.mas_equalTo(containerView.mas_top).offset(topHeight);
    make.left.mas_equalTo(containerView.mas_left).offset(0);
    make.right.mas_equalTo(containerView.mas_right).offset(0);
    make.height.mas_equalTo(8);
}];

UILabel *paytimeTipLab = [[UILabel alloc] init];
paytimeTipLab.textColor = COLOR_FONT_BLACK;
paytimeTipLab.text = @"支付剩余时间";
paytimeTipLab.textAlignment = NSTextAlignmentCenter;
paytimeTipLab.font = FONT_12;
[containerView addSubview:paytimeTipLab];
[paytimeTipLab mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.mas_equalTo(segementView1.mas_bottom).offset(34);
    make.left.mas_equalTo(containerView.mas_left).offset(0);
    make.right.mas_equalTo(containerView.mas_right).offset(0);
    make.height.mas_equalTo(20);
}];

UILabel *paytimeLab = [[UILabel alloc] init];
paytimeLab.textAlignment = NSTextAlignmentCenter;
paytimeLab.textColor = COLOR_FONT_GRAY;
paytimeLab.font = FONT_20;
paytimeLab.text = format_time;
[containerView addSubview:paytimeLab];
self.paytimeLab = paytimeLab;
[paytimeLab mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.mas_equalTo(paytimeTipLab.mas_bottom).offset(20);
    make.left.mas_equalTo(containerView.mas_left).offset(0);
    make.right.mas_equalTo(containerView.mas_right).offset(0);
    make.height.mas_equalTo(30);
}];

UIView *segementView2 = [[UIView alloc] init];
segementView2.backgroundColor = COLOR_BACKVIEW_GRAY;
[containerView addSubview:segementView2];
[segementView2 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.mas_equalTo(paytimeLab.mas_bottom).offset(34);
    make.left.mas_equalTo(containerView.mas_left).offset(0);
    make.right.mas_equalTo(containerView.mas_right).offset(0);
    make.height.mas_equalTo(8);
}];

4.最后一步,设置一下containerView的底部约束即可(这里放最后一个控件的底部)

[containerView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.bottom.mas_equalTo(segementView2.mas_bottom).offset(200);
}];

好了,这样就可以确定ScrollView的滑动范围了,希望可以给初始使用Masonry的同学一些帮助.测试的时候可以在containerView上多添加一些控件,这样会效果会更直观.