使用Masonry對UIScrollView自動佈局

以前使用Masonry對UIScrollView進行過約束，當時是遇到了問題的，怎麼約束都不對，由於趕進度直接改用frame了也沒有對問題深究。就這樣過了好久.........，直到前一段換工做的時候面試官問到，使用Masonry對UIScrollView自動佈局應該注意些什麼？額....，猶豫了一段時間我只能搪塞說我通常都是用frame進行設置的，暫時沒有遇到什麼問題。雖然這麼回答也沒什麼，可是感受終歸不是很好。出來混早晚是要還的！恰好最近公司不忙，想起了這個問題，那麼就研究記錄一下吧！

對UIScrollView的約束有不少方式，我只講其中一種易懂、直觀的方式
UIScrollView約束的關鍵是設置它的contentSize的大小，不然沒法進行滾動顯示。

給UIScrollView添加一個過渡視圖containerView，這個containerView做爲全部子控件的父視圖，而後再設置containerView相對於UIScrollView的約束constraint和子控件相對於containerView的約束constraint。
最後再將最後一個子視圖的右邊距，或底邊距設置成containerView的右邊距，或底邊距，以此來設置scrollView的contentSize在水平方向，或垂直方向的大小。

UIScrollView豎向滑動時，就把containerView的width固定
UIScrollView橫向滑動時，就把containerView的height固定

若是看完上面的描述尚未明白，那直接看下面的代碼，UIScrollView的約束其實都是同樣的，記住便可

 

水平方向

UIScrollView *horizontalScrollView = [[UIScrollView alloc] init];
horizontalScrollView.backgroundColor = [UIColor orangeColor];
horizontalScrollView.pagingEnabled =YES;
// 添加scrollView添加到父視圖，並設置其約束
[self.view addSubview:horizontalScrollView];
[horizontalScrollView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.and.left.mas_equalTo(10);
        make.right.mas_equalTo(-10);
        make.height.mas_equalTo(100);
}];
// 建立過渡視圖並設置contentSize和其約束
UIView *horizontalContainerView = [[UIView alloc] 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.view addSubview: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 = [[UIView alloc] init];
[verticalScrollView addSubview:verticalContainerView];
[verticalContainerView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.left.bottom.and.right.equalTo(verticalScrollView);
        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);
}];

 

xib對UIScrollerView的佈局能夠參考下面的文章
https://www.jianshu.com/p/1d3bb3cf7ee5
https://blog.csdn.net/dreams_deng/article/details/80523485