如何手动实现一个 UIScrollView

UIKit 坐标系每一个 View 都定义了他自己的坐标系,如下图所示,x 轴指向右方,y 轴指向下方:

image.png

注意:
这个逻辑坐标系并不关注包含在其中 View 的宽度和高度,整个坐标系没有边界向四周无限延伸。
我们在坐标系中放置四个子 View,每一次色块代表一个 View

image.png
UIView *redView = [[UIView alloc] initWithFrame:CGRectMake(20, 20, 100, 100)];
redView.backgroundColor = [UIColor colorWithRed:0.815 green:0.007
blue:0.105 alpha:1];

UIView *greenView = [[UIView alloc] initWithFrame:CGRectMake(150, 160, 150, 200)];
greenView.backgroundColor = [UIColor colorWithRed:0.494 green:0.827
blue:0.129 alpha:1];

UIView *blueView = [[UIView alloc] initWithFrame:CGRectMake(40, 400, 200, 150)];
blueView.backgroundColor = [UIColor colorWithRed:0.29 green:0.564
blue:0.886 alpha:1];

UIView *yellowView = [[UIView alloc] initWithFrame:CGRectMake(100, 600, 180, 150)];
yellowView.backgroundColor = [UIColor colorWithRed:0.972 green:0.905
blue:0.109 alpha:1];

[mainView addSubview:redView];
[mainView addSubview:greenView];
[mainView addSubview:blueView];
[mainView addSubview:yellowView];

bounds

Apple 关于 UIView 的文档中是这样描述 bounds 属性的:

bounds矩形…描述了该视图在其自身坐标系中的位置和大小。

一个 View 可以被看作是定义在其所在坐标系平面上的一个矩形的可视区域,View 的边界表明了这个矩形可视区域的位置和大小。

假设我们的 View 宽320像素,高480像素,原点在(0,0)。那么这个 View 就变成了整个坐标系平面的观察口,它展示的只是整个平面的一小部分。位于该 View 边界外的区域依然存在,只是被隐藏起来了。

image.png

一个 View 提供了其所在平面的一个观察口,Viewbounds 矩形描述了这个可是区域的位置和大小。

接下来我们来试着修改 bounds 的原点坐标:

CGRect bounds = mainView.bounds;
bounds.origin = CGPointMake(0, 100);
mainView.bounds = bounds;

当我们把 bound 原点设为(0,100)后,整个画面看起来就像这样:

image.png

修改 bounds 的原点就相当与在平面上移动这个可视区域。

看起来好像是这个 View 向下移动了100像素,在这个 View 自己的坐标系中这确实没错。不过这个 View 真正位于屏幕上的位置(更准确的说在其父 View 上的位置)其实没有改变,因为这是由 Viewframe 属性决定的,它并没有改变:

frame矩形…定义了这个View在其父View坐标系中的位置和大小。

由于 View 的位置是相对固定的,你可以把整个坐标平面想象成我们可以上下拖动的透明幕布,把这个 View 想象成我们观察坐标平面的窗口。调整 ViewBounds 属性就相当于拖动这个幕布,那么下方的内容就能在我们 View 中被观察到:

image.png

修改 bounds 的原点坐标也相当于把整个坐标系向上拖动,因为 Viewframe 没由变过,所以它相对于父 View 的位置没有变化过。

其实这就是 UIScrollView 滑动时所发生的事情。注意从一个用户的角度来看,他以为时这个 View 中的子 View 在移动,其实他们的在坐标系中位置(他们的 frame )没有发生过变化。

一个 scroll view 并不需要其中子 View 的坐标来使他们滚动,唯一要做的就是改变他的 bounds 属性。知道了这一点,实现一个简单的 scroll view 就没什么困难了。我们用一个 gesture recognizer 来识别用户的拖动操作,根据用户拖动的偏移量来改变 bounds 的原点:

和真正的 UIScrollView 一样,我们的类也有一个 contentSize 属性,你必须从外部来设置这个值来指定可以滚动的区域,当我们改变 bounds 的大小时我们要确保设置的值是有效的。

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

推荐阅读更多精彩内容