美文网首页
关于 UISCrollView 的 contentSize 计算

关于 UISCrollView 的 contentSize 计算

作者: 人话博客 | 来源:发表于2018-05-02 14:45 被阅读0次

在 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。

相关文章

网友评论

      本文标题:关于 UISCrollView 的 contentSize 计算

      本文链接:https://www.haomeiwen.com/subject/udkcrftx.html