Masonry适配——（4）UIScrollView的设置

github：https://github.com/potato512/SYDemo_Masonry

 

UISCrollView在使用时，若是做为父视图包含多个子视图时，咱们须要设置它的contentSize的大小，不然没法进行滚动显示。使用frame进行设置时，只须要令xxxScrollView.contentSize = CGSizeMake(width,height)便可，且无论是水平方向，仍是垂直方向都方便设置。

而当使用masonry时，应该怎么进行设置呢？由于使用masonry时，没法经过CGSizeMake进行设置它的contentSize，因此须要经过一个过渡视图进行处理。即scrollView做为父视图，添加子视图，即过渡视图A，而后再将其余真正须要添加到scrollView上的子视图a、b、c等添加到过渡视图A中，而后再将a、b、c等中的最后一个子视图的右边距，或底边距设置成过渡视图A的右边距，或底边距，以此来设置scrollView的contentSize在水平方向，或垂直方向的大小。

 

效果以下图所示（水平方向、垂直方向）

 

代码示例：

水平方向

UIScrollView *horizontalScrollView = [[UIScrollView alloc]init];  
horizontalScrollView.backgroundColor = [UIColor orangeColor];  
horizontalScrollView.pagingEnabled =YES;  
// 添加scrollView添加到父视图，并设置其约束  
[self.viewaddSubview:horizontalScrollView];  
[horizontalScrollView mas_makeConstraints:^(MASConstraintMaker *make) {  
        make.top.and.left.mas_equalTo(10);  
        make.right.mas_equalTo(-10);  
        make.height.mas_equalTo(100);  
}];  
// 设置scrollView的子视图，即过渡视图contentSize，并设置其约束  
UIView *horizontalContainerView = [[UIViewalloc]init];  
[horizontalScrollView addSubview:horizontalContainerView];  
[horizontalContainerView mas_makeConstraints:^(MASConstraintMaker *make) {  
        make.edges.equalTo(horizontalScrollView);  
        make.height.equalTo(horizontalScrollView);  
}];  
//过渡视图添加子视图  
UIView *previousView =nil;  
for (int i =0; i <10; i++)  
{  
UILabel *label = [[UILabelalloc]init];  
        label.textAlignment =NSTextAlignmentCenter;  
        label.backgroundColor = [UIColorcolorWithHue:(arc4random() %256 / 256.0)  
                                          saturation:(arc4random() %128 /256.0) +0.5  
                                          brightness:(arc4random() %128 /256.0) +0.5  
                                               alpha:1];  
        label.text = [NSStringstringWithFormat:@"第 %d个视图", i];  
        
       //添加到父视图，并设置过渡视图中子视图的约束  
        [horizontalContainerView addSubview:label];  
        [label mas_makeConstraints:^(MASConstraintMaker *make) {  
            make.top.and.bottom.equalTo(horizontalContainerView);  
            make.width.equalTo(horizontalScrollView);  
              
            if (previousView)  
            {  
                make.left.mas_equalTo(previousView.mas_right);  
            }  
            else  
            {  
                make.left.mas_equalTo(0);  
            }  
        }];  
  
        previousView = label;  
}  
// 设置过渡视图的右距（此设置将影响到scrollView的contentSize）  
[horizontalContainerView mas_makeConstraints:^(MASConstraintMaker *make) {  
        make.right.mas_equalTo(previousView.mas_right);  
}];  

 

垂直方向

UIScrollView *verticalScrollView = [[UIScrollView alloc]init];  
verticalScrollView.backgroundColor = [UIColor greenColor];  
verticalScrollView.pagingEnabled =YES;  
// 添加scrollView添加到父视图，并设置其约束  
[self.viewaddSubview:verticalScrollView];  
[verticalScrollView mas_makeConstraints:^(MASConstraintMaker *make) {  
        make.left.mas_equalTo(10);  
        make.bottom.and.right.mas_equalTo(-10.0);  
        make.height.mas_equalTo(100);  
}];  
// 设置scrollView的子视图，即过渡视图contentSize，并设置其约束  
UIView *verticalContainerView = [[UIViewalloc]init];  
[verticalScrollView addSubview:verticalContainerView];  
[verticalContainerView mas_makeConstraints:^(MASConstraintMaker *make) {  
        make.top.left.bottom.and.right.equalTo(verticalScrollView).with.insets(UIEdgeInsetsZero);  
        make.width.equalTo(verticalScrollView);  
}];  
//过渡视图添加子视图  
UIView *lastView =nil;  
for (NSInteger index =0; index <10; index++)  
{  
        UILabel *label = [[UILabelalloc]init];  
        label.textAlignment =NSTextAlignmentCenter;  
        label.backgroundColor = [UIColorcolorWithHue:(arc4random() %256 / 256.0)  
                                          saturation:(arc4random() %128 /256.0) +0.5  
                                          brightness:(arc4random() %128 /256.0) +0.5  
                                               alpha:1];  
        label.text = [NSStringstringWithFormat:@"第 %ld个视图", index];  
          
          
       //添加到父视图，并设置过渡视图中子视图的约束  
        [verticalContainerView addSubview:label];  
        [label mas_makeConstraints:^(MASConstraintMaker *make) {  
            make.left.and.right.equalTo(verticalContainerView);  
            make.height.mas_equalTo(verticalScrollView.mas_height);  
              
            if (lastView)  
            {  
                make.top.mas_equalTo(lastView.mas_bottom);  
            }  
            else  
            {  
                make.top.mas_equalTo(0);  
            }  
        }];  
          
        lastView = label;  
}  
      
// 设置过渡视图的底边距（此设置将影响到scrollView的contentSize）  
[verticalContainerView mas_makeConstraints:^(MASConstraintMaker *make) {  
        make.bottom.equalTo(lastView.mas_bottom);  
}];