在 App 开发中,基本上只要能滑动的 UI 都是 scrollView。
有时候感觉,苹果这点做的非常不友好。为什么搞的这么麻烦?
在其他的比如 HTML 中,滑动无非就是超过了某个容器的可视范围,于是就给了一个滑动条。
很自然的一件事情。
到了苹果这不光需要自己去注意这点。在使用纯的 UISCrollView 的时候,我们还需要自己去手动计算可以滚动动的范围。
吐槽归吐槽,但 UIScrollView 的 contentSize 还是需要去计算的。
情况一
我们知道 UIScrollView 里面每一个子元素的大小以及子元素的个数。
比如:新特性界面
UIScrollView *sv = [[UIScrollView alloc] init];
sv.contentSize = CGSizeMake(图片数量 * 图片的宽, 图片的高);
这种情况也非常简单,数字和大小都是确定的。只需要带入计算即可。
情况二
每一个子视图的高度固定,但是子视图的个数不确定。
在这里有就两种做法了。
第一种,申明一个 height 属性,每次添加一个视图的时候,都根据前视图的高度 & 边距信息来记录累加高度。
最后设置成 scrollView 的 contentSize.
UIScrollView *sv1 = [[UIScrollView alloc] init];
CGFloat height2 = 0;
UIView *c1 = [UIView new];
[sv1 addSubview:c1];
sv1.top = 20;
sv1.height = 300;
height2 += 300;
UIView *c2 = [UIView new];
c2.top = 40;
c2.height = 700;
height += 740;
// .........
sv1.contentSize = CGSizeMake(self.view.bounds.size.width, height2);
第二种情况,利用约束。
- 在 scrollView 中添加一个内容容器 containerView。只设置约束 left ,top ,width。
- 然后再这个 containerView 中,添加各种子视图,并设置子视图的位置和大小约束。
- 第一个子视图必须设置 top 约束。
- 最后一个子视图,必须设置一个 bottom 约束,用来计算 containerView 的 height 属性。
- 当约束计算完毕之后,containerView 的 大小和位置就确定好了。就可以间接的利用它来设置 scrollView 的 contentSize 了。
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
[self.view addSubview:scrollView];
scrollView.showsHorizontalScrollIndicator = NO;
scrollView.alwaysBounceVertical = YES;
scrollView.backgroundColor = [UIColor whiteColor];
// 先不设置 contentSize.毕竟子视图有多长还不知道
//scrollView.contentSize = CGSizeMake([UIScreen mainScreen].bounds.size.width, xxxx);
/**
不把 scrollView 的 contentSize 写死,.
而是在其内部放一个uiview.
在 uiview 内部添加子视图,用约束设置.
根据内部约束的子视图计算 uiview 的大小.
然后根据 uiview 的大小设置 scrollView 的 contentSize.
*/
/**
现在的做法:
记录每一个子视图的高度记忆边距数据,然后累加起来.
*/
UIView *containerView = [[UIView alloc] init];
// 容器,只设置 x,y,w 高度 h 先不设置,用子视图的约束去计算
[scrollView addSubview:containerView];
[containerView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.top.offset(0);
make.width.equalTo(scrollView.mas_width);
}];
UIView *childView1 = [[UIView alloc] init];
[containerView addSubview:childView1];
childView1.backgroundColor = [UIColor blueColor];
[childView1 mas_makeConstraints:^(MASConstraintMaker *make) {
// 头部约束
make.top.offset(20);
make.left.offset(0);
make.width.equalTo(containerView.mas_width);
make.height.offset(300);
}];
UIView *childView2 = [[UIView alloc] init];
[containerView addSubview:childView2];
childView2.backgroundColor = [UIColor greenColor];
[childView2 mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.offset(0);
make.top.equalTo(childView1.mas_bottom).offset(50);
make.height.offset(400);
make.width.equalTo(containerView.mas_width);
}];
UIView *childView3 = [[UIView alloc] init];
[containerView addSubview:childView3];
childView3.backgroundColor = [UIColor greenColor];
[childView3 mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.offset(0);
make.top.equalTo(childView2.mas_bottom).offset(100);
make.width.equalTo(containerView.mas_width);
make.height.offset(700);
// 底部约束,用于计算containerView 的 height
make.bottom.offset(-50);
}];
// 不用去调用约束立即计算的代码,有个小技巧,使用 dispatch_after 即可拿到约束计算完毕之后的 containerView 的height 值.
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
NSLog(@"%.f",containerView.height);
scrollView.contentSize = CGSizeMake(self.view.width, containerView.height);
});
效果如下:
利用约束计算 scrollView 的 contentSize.gif一个问题?
为什么要在 scrollView 中添加一个 containerView? 而不是直接往 scrollView 中直接添加子视图?
因为 scrollView 本身的大小已经确定了。它不具备扩展和延伸性。
能够延伸的是它内部的 contentSize 尺寸下的子视图。
如果把 子视图直接添加到 scrollView ,并添加约束,那么大小范围,之后 scrollView 的 frame 那么大。
且子视图可能会重叠在一起,甚至会出现约束冲突。
但是如果,在scrollView 内部添加一个 containerView 那么,它的大小就可以不确定了。只用约束设置 left top width 。高度则是由其内部的第一个子视图的 top 约束以及最后一个子视图的 bottom 约束计算得出即可。
最后在使用 dispatch_after 小技巧,不需要提前计算约束,就可以把 containerView 的 height 赋值给 scrollView 的 contentSize。
网友评论