关于 UISCrollView 的 contentSize 计算的两种方法。

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,997评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,603评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,359评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,309评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,346评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,258评论 1 300
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,122评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,970评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,403评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,596评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,769评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,464评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,075评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,705评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,848评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,831评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,678评论 2 354

推荐阅读更多精彩内容