UIScrollView的AutoLayout约束

  首先UIScrollview包含自身的frame和contentSize二个部分。frame决定其展示给用户的可见区域，contentSize决定其整个内容的大小。如果frame的宽高小于contentSize，则UIScrollview可以在相应的方向滚动。UIScrollView中有个contentSize属性，如果内容大小是固定的，你可以直接设置contentSize。但是在自动布局约束中我们往往不知道其具体的大小，或者不想计算其大小，在这种情况下我们怎么实现UIScrollView的约束呢？

  关于UIScroolView的AutoLayout约束，首先得明白一点，UIScrollView上面的subviews与UIScrollView的top，bottom，left、right约束都是相对于UIScrollview的contentsize,而contentsize大小是不确定的，为了明白的说明这一点，我们看下面代码：

 

    
    UIScrollView *verticalScrollView = [[UIScrollView alloc]init];
    verticalScrollView.backgroundColor = [UIColor greenColor];
    verticalScrollView.pagingEnabled =YES;
    // 添加scrollView添加到父视图，并设置其约束
    [self.view addSubview:verticalScrollView];
    [verticalScrollView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(10);
        make.right.mas_equalTo(-10.0);
        make.centerY.equalTo(0);
        make.height.mas_equalTo(100);
    }];
    // 设置scrollView的子视图，即过渡视图contentSize，并设置其约束
    UIView *verticalContainerView = [[UIView alloc]init];
    [verticalScrollView addSubview:verticalContainerView];
    [verticalContainerView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.left.bottom.and.right.equalTo(verticalScrollView).with.insets(UIEdgeInsetsZero);

    }];
    verticalContainerView.backgroundColor = [UIColor redColor];

      您觉得最后在屏幕上的verticalScrollView显示的是什么颜色呢？我们先来看答案!

      你没眼花，就是绿色的。具体原因是verticalContainerView是verticalScrollView上的一个subView，其相对于verticalScrollView的top，bottom，left、right的约束都是相对于verticalScrollView的contentSize，而contentSize的默认大小为CGSizeZero，因此红色verticalContainerView是完全不能显示的。那么我们怎么让红色的部分显示出来？很简单，我们只需重新约束verticalContainerView，具体代码如下:

    [verticalContainerView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.left.bottom.and.right.equalTo(verticalScrollView).with.insets(UIEdgeInsetsZero);

        make.width.equalTo(verticalScrollView);
        make.height.equalTo(50);
    }];

      运行结果：

 

     当然，在实际编程中，这样约束，并没有什么实际意义，既然我大小都知道了，直接用frame和contentSize就可以了。其强大性体现在其contentSize会根据verticalContainerView的大小变化而变化，因此我可以在verticalContainerView增加很多subViews，用subViews的内容大小扩充contentSize。具体可见如下的垂直滚动的UIScroolView代码:

    UIScrollView *verticalScrollView = [[UIScrollView alloc]init];
    verticalScrollView.backgroundColor = [UIColor greenColor];
    verticalScrollView.pagingEnabled =YES;
    // 添加scrollView添加到父视图，并设置其约束
    [self.view addSubview:verticalScrollView];
    [verticalScrollView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(10);
        make.right.mas_equalTo(-10.0);
        make.centerY.equalTo(0);
        make.height.mas_equalTo(100);
    }];
    // 设置scrollView的子视图，即过渡视图contentSize，并设置其约束
    UIView *verticalContainerView = [[UIView alloc]init];
    [verticalScrollView addSubview:verticalContainerView];
    [verticalContainerView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.left.bottom.and.right.equalTo(verticalScrollView).with.insets(UIEdgeInsetsZero);

        make.width.equalTo(verticalScrollView);
    }];
    verticalContainerView.backgroundColor = [UIColor redColor];
    
    UIView *lastView =nil;
    for (NSInteger index =0; index <8; index++)
    {
        UILabel *label = [[UILabel alloc]init];
        label.textAlignment =NSTextAlignmentCenter;
        label.backgroundColor = [UIColor colorWithHue:(arc4random() %256 / 256.0)
                                          saturation:(arc4random() %128 /256.0) +0.5
                                          brightness:(arc4random() %128 /256.0) +0.5
                                               alpha:1];
        label.text = [NSString stringWithFormat:@"第 %ld个视图", index];


        //添加到父视图，并设置过渡视图中子视图的约束
        [verticalContainerView addSubview:label];
        [label mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.and.right.equalTo(verticalContainerView);
            make.height.mas_equalTo(60);

            if (lastView)
            {
                make.top.mas_equalTo(lastView.mas_bottom);
            }
            else
            {
                make.top.mas_equalTo(0);
            }
        }];

        lastView = label;
    }
    

    [verticalContainerView mas_updateConstraints:^(MASConstraintMaker *make) {
        make.bottom.equalTo(lastView.mas_bottom);
    }];