i 3:scrollview

内容来自于objc.io

可以说scroll view是iOS 生动特性的一个非常重要的注脚,而在完全掌握它之前,你甚至会有一种夜不能寐的感觉,接下来,让我们细细剖析scrollview

由于scrollview的特性其实只是来自于UIView 特性的叠加,所以对scrollview的理解更多来自对UIView的理解,如下是两过程的view渲染的细节:

Rasterization and Composition

第一个步骤称为光栅化,它只是执行一些绘制指令并产生一份图像。比如按钮只是绘制一个圆角矩形,并在中间绘制文字,这些内容由view持有,等待交由第二个步骤使用。一旦每个view均执行得到了光栅化图像,则会使用称为 合成 的过程将它们组合成屏幕大小的图片。view层级在合成过程中起到了很重要的作用:子view会覆盖在父view之上。最顶层的view是window,而其合成的内容是用户最终看到的内容。

这个时候重点来了,大家都知道view均有frame和bounds属性,它们有相同的size(除了transform属性所带来的影响之外),但orgin通常不一样,理解这两个属性的原理就可以理解scrollView的原理。

在光栅化的过程中,view并不关心它的frame(决定view的位置和大小)和在view层级中的位置(决定其合成的顺序),而只关心自己的绘制内容,绘制发生在每个view的drawRect方法中。

在drawRect调用之前,会为view创建一个空白的image以供绘制。这个image的坐标系统是其bounds,如果在bounds之外绘制,那这份绘制并不会成为光栅化图像的一部分,并会被废弃。虽然ios底层的绘制过程使得可以将子view在superview的bounds之外渲染出来,但在光栅化的过程中,在bounds之外绘制的内容是会被废弃的。

Scroll View’s Content Offset

以上这些跟scrollview有什么关系呢?答案是关系大发啦。想象一下滚动的时候发生的事情:在拖拽过程中,我们改变了view的frame,如果往右拽,会增加origin.x

之前在合成的时候计算子View在父view中的位置时,父view的bounds.origin 通常是{0,0},所以子view.frame.origin即对应父view中对应坐标的点。但如果父view的bounds.origin不为0的时候,则需要将子view.frame.origin+父view.bounds.origin。

所以更改bounds的origin可以调整子View在父view中显示的位置,而且实际上,scrollview的contentOffset属性即是通过调整bounds.origin完成滚动的。

Content Size

有了关于contentOffset的理解,接下来关注下contentSize

contentSize并不会更改scrollview 的bounds,所以不会影响Scrollview合成子view。scroll view的默认contentSize是{w:0,h:0},由于没有可滚动的区域,用户不可以滚动,但scrollview仍然会在其bounds中显示所有子view。

当contentSize比Scrollview大的时候,才允许滚动

上图中visible area的bounds应当是{80,40,200,300}

当contentOffset为{0,0}时,可见窗口的左上角正好是可滚动区域的左上角,这也是contentOffset的最小值,最大 contentOffset 是contentSize与Scrollview.bounds的差值。

Tweaking the Window with Content Insets

contentInset可以改变contentOffset的最大和最小值(显示上而已,因为contentOffset的最小值仍是{0,0},最大值亦不变)

contentInset看起来很有用,但为什么不直接更改contentSize呢,以UITableView为例,它已经精准地根据各Cell的情况算出了contentSize。考虑使用UIRefreshControl的情况:不能将UIRefreshControl放在可滚动区域中,因为这样会使得用户可以滚动经过UIRefreshControl并停留在UIRefreshControl的上方,并无法主动弹回到第一个Cell的上边界。所以需要将UIRefreshControl放置在可滚动区域的上方,这样使得contentOffset可以弹回第一行,而不是停留在UIRefreshControl上。

等一下,当滚动得够远以致于触发了refresh时,这时tableview并没有弹回第一行隐藏refreshControl是因为使用了contentInset。而当刷新结束时,会恢复contentInset,此时contentOffset保持原值,且不需要对contentSize做新的计算,维持原值即可,此时view恢复到将refreshControl隐藏。

那么在代码中什么时候应该用到contentInset呢:一个极佳的例子是键盘出现的时候。

当然还有zooming,今天不会讨论这个,但有一个有趣的地方可以注意下:从viewForZoomingInScrollView:返回的时候,检查transform属性,可以发现scrollview巧妙地运用了UIView现存的属性。

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

推荐阅读更多精彩内容