项目中经常使用到 UIScrollView，在使用 Masonry 添加约束时，经常会出现奇怪的问题，比如 UIScrollView 添加视图后不能滚动，或 UIScrollView 可以滚动，但是看不到添加的子视图 等等。简单记录下如何正常添加约束，以及自己的一些体会。如有错误，欢迎指正。
UIScrollView 的特殊之处是有一个 contentSize 属性，决定了可以滚动的范围。那么能够使 UIScrollView 滚动的核心也就是设置 contentSize 属性的值。在使用 frame 设置时，比较简单。使用 Masonry 不能直接设置 contentSize，不过可以通过其他方式来变相的设置 contentSize。
--------------------------- 正文 ---------------------------
大部分做法是 UIScrollView 先添加一个过渡视图，充作原本的 contentView 来达到设置 contentSize 的目的，当然也可以直接对 UIScrollView 进行添加约束。
下面是个简单的例子：
UIScrollView 设置为灰色背景，添加三个不同颜色的子视图（便于查看滚动效果，虽然有点丑）。添加了竖向滚动和横向滚动两个方式，分别如图1、图2：。
效果图
图1 竖向滚动效果
竖向滚动.gif
图2 横向滚动效果
横向滚动.gif
代码实现：
使用过渡视图和直接对 UIScrollView 约束两种方法都有实现。
涉及到添加约束时需要的注意点，代码中有部分注释。
竖向滚动
1. 直接对 UIScrollView 进行约束
- (void)addVerticalScrollView {
// 添加 UIScrollView
UIScrollView *scrollView = [[UIScrollView alloc] init];
scrollView.backgroundColor = [UIColor lightGrayColor];
[self.view addSubview:scrollView];
// 子视图1
UIView *view1 = [[UIView alloc] init];
view1.backgroundColor = [UIColor redColor];
[scrollView addSubview:view1];
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(scrollView.mas_top);
// 注意点1：
make.left.and.right.equalTo(self.view);
make.height.mas_equalTo(200);
}];
// 子视图2
UIView *view2 = [[UIView alloc] init];
view2.backgroundColor = [UIColor blueColor];
[scrollView addSubview:view2];
[view2 mas_makeConstraints:^(MASConstraintMaker *make) {
// 左右、高 同 view1
make.left.and.right.equalTo(view1);
make.top.equalTo(view1.mas_bottom);
make.height.equalTo(view1);
}];
// 子视图3
UIView *view3 = [[UIView alloc] init];
view3.backgroundColor = [UIColor yellowColor];
[scrollView addSubview:view3];
[view3 mas_makeConstraints:^(MASConstraintMaker *make) {
// 左右、高 同 view2
make.left.and.right.equalTo(view2);
make.top.equalTo(view2.mas_bottom);
make.height.equalTo(view2);
}];
// 对 UIScrollView 添加约束，达到设置 contentSize 的目的
[scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.and.right.equalTo(self.view);
make.top.equalTo(self.view).offset(80);
make.height.mas_equalTo(300);
// 注意点2：
make.bottom.equalTo(view3.mas_bottom);
}];
}
对 View1 添加约束时，需要几点注意
make.top.equalTo(scrollView.mas_top); top 约束需要相对于 scrollView。因为是竖向滚动，如果相对于 self.view（make.top.equalTo(self.view.mas_top);）添加约束，会出现子视图无法滚动滚动，但滚动指示变化的情况，如图3。
make.left.and.right.equalTo(scrollView) 和 make.left.and.right.equalTo(self.view) 的区别
- make.left.and.right.equalTo(scrollView)
相当于 相对于 UIScrollView 的 contentView 添加约束，但 contentView 由 contentSize 确定，contentSize 未确定，View1 的约束结果为 0。会出现可以滚动，但看不到子视图的情况。如图4。- make.left.and.right.equalTo(self.view) 或 make.width.equalTo(scrollView)
可以确定 View1 的宽度，达到设置 contentSize 的目的。
对 scrollView 添加约束
除了正常的上下左右（或左右宽高）之外，再加上 make.bottom.equalTo(view3.mas_bottom); 以达到设置 contentSize 的目的。
图3 不能滚动
不能滚动.gif
图4 子视图不显示
子视图不显示.gif
总结： 对子视图添加约束时，不要相对于 UIScrollView 的 contentView 添加约束，最好给定确定值，比如相对于 self.view 或者直接使用 width/height 相对于 UIScrollView 添加约束。
下面的几个例子都是按照这个思想来实现的。
2. 使用过渡视图
使用过渡视图即在 UIScrollView 上添加一个过渡的 contentView。添加约束的思想和上面总结的一样。代码如下：
- (void)addVerticalScrollViewWithContentView {
UIScrollView *scrollView = [[UIScrollView alloc] init];
scrollView.backgroundColor = [UIColor lightGrayColor];
[self.view addSubview:scrollView];
[scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.and.right.equalTo(self.view);
make.top.equalTo(self.view).offset(80);
make.height.mas_equalTo(300);
}];
UIView *scrollContentView = [[UIView alloc] init];
scrollContentView.backgroundColor = [UIColor whiteColor];
[scrollView addSubview:scrollContentView];
[scrollContentView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.mas_equalTo(UIEdgeInsetsZero);
}];
UIView *view1 = [[UIView alloc] init];
view1.backgroundColor = [UIColor redColor];
[scrollView addSubview:view1];
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
// 此处针对 scrollContentView 或者 scrollView 做约束的话，都不能显示视图。contentSize 的 width 需要明确的值
make.left.and.right.equalTo(self.view);
make.top.equalTo(scrollView.mas_top);
make.height.mas_equalTo(200);
}];
UIView *view2 = [[UIView alloc] init];
view2.backgroundColor = [UIColor blueColor];
[scrollView addSubview:view2];
[view2 mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.and.right.equalTo(view1);
make.top.equalTo(view1.mas_bottom);
make.height.mas_equalTo(200);
}];
UIView *view3 = [[UIView alloc] init];
view3.backgroundColor = [UIColor yellowColor];
[scrollView addSubview:view3];
[view3 mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.and.right.equalTo(view2);
make.top.equalTo(view2.mas_bottom);
make.height.mas_equalTo(200);
}];
[scrollContentView mas_makeConstraints:^(MASConstraintMaker *make) {
make.bottom.equalTo(view3.mas_bottom);
}];
}
子视图不管是添加到 scrollContentView 或是 scrollView 都可以。
横向滚动
1. 直接对 UIScrollView 进行约束
把竖向的示例调整一下，scrollView 相对最后一个视图的 right 属性做约束。代码如下：
- (void)addHorizontalScrollView {
UIScrollView *scrollView = [[UIScrollView alloc] init];
scrollView.backgroundColor = [UIColor lightGrayColor];
[self.view addSubview:scrollView];
UIView *view1 = [[UIView alloc] init];
view1.backgroundColor = [UIColor redColor];
[scrollView addSubview:view1];
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(scrollView.mas_left);
// 之所以不能使用这句，是因为 scrollView 的 contentSize 中的 width 或 height 总要一个是确定值。
// make.top.and.bottom.equalTo(scrollView);
make.width.equalTo(scrollView);
make.top.equalTo(scrollView);
// make.height.mas_equalTo(300);
make.height.equalTo(scrollView);
}];
UIView *view2 = [[UIView alloc] init];
view2.backgroundColor = [UIColor blueColor];
[scrollView addSubview:view2];
[view2 mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(view1.mas_right);
make.top.and.bottom.equalTo(view1);
make.width.equalTo(view1);
}];
UIView *view3 = [[UIView alloc] init];
view3.backgroundColor = [UIColor yellowColor];
[scrollView addSubview:view3];
[view3 mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(view2.mas_right);
make.top.and.bottom.equalTo(view2);
make.width.equalTo(view2);
}];
[scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.and.right.equalTo(self.view);
make.top.equalTo(self.view).offset(80);
make.height.mas_equalTo(300);
make.right.equalTo(view3.mas_right);
}];
}
网友评论