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);  
}];