UIScrollView实现原理

在iOS开发中我们会大量用到UIScrollView这个控件,我们使用的UITableView/UICollectionView/UITextView都继承自它。UIScrollView的频繁使用让我对它的底层实现产生了兴趣,它到底是如何工作的?如何实现一个UIScrollView?读完本篇文章,相信你一定也可以自己实现一个简易的UIScrollView。源代码

1.frame与bounds

这部分请参考我之前的文章——iOS frame与bounds的区别详解

2.UIScrollView实现

UIScrollView其实就是bounds.origin != (0,0)的特殊情况。而ContentOffset、ContentSize和ContentInset作为UIScrollView三个基本的属性,其实都是跟origin相关,下面详细讨论。

2.1 ContentOffset

ContentOffset是UIScrollView当前显示区域顶点相对于frame顶点的偏移量,比如你把视图上拉了100个点,也就是y偏移了100,ContentOffset就是(0,100)。

前文可以得知,当修改SuperView.bounds.origin时,会变相的修改SubView的实际坐标,从而影响SubView在SuperView中的位置。如果我们修改SuperView.bounds.origin从(0,0)变为(0,100),SubViews的frame并不会产生变化,产生变化的实际是SubViews的真实坐标点。SubViews的真实坐标点会减小100点,也就是上移100点,而对应到SubView在视图的效果就是上移了100个点,也就是ContentOffset为(0,100)。所以如下:

ContentOffset = bounds.origin;
复制代码

这样,理解了ContentOffset之后我们就可以实现一个简单的UIScrollView,代码如下:

- (void)addGestureAndViews {
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(handlePanGesture:)];
    [self.view addGestureRecognizer:pan];

    UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(0, 20, 100, 100)];
    [view1 setBackgroundColor:[UIColor blueColor]];
    [self.view addSubview:view1];

    UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(SCREEN_WIDTH - 100, SCREEN_HEIGHT - 100, 100, 100)];
    [view2 setBackgroundColor:[UIColor brownColor]];
    [self.view addSubview:view2];
}

- (void)handlePanGesture:(UIPanGestureRecognizer *)panGestureRecognizer {

    //ContentOffset
    CGPoint touchPoint = [panGestureRecognizer translationInView:self.view];//获取手势位置
    CGFloat newOriginY = self.view.bounds.origin.y - touchPoint.y;//根据手势位置计算新的origin值
    CGFloat newOriginX = self.view.bounds.origin.x - touchPoint.x;
    CGRect viewBounds = self.view.bounds;
    viewBounds.origin.y = newOriginY;//赋值
    viewBounds.origin.x = newOriginX;
    self.view.bounds = viewBounds;
    [panGestureRecognizer setTranslation:CGPointZero inView:self.view];

}
复制代码
自定义简单UIScrollView

每当我们拖动SuperView的时候:

  • SuperView.bounds.origin会根据我们拖动的坐标,生成新的origin。
  • SuperView发现自己bounds被修改,会调用layoutSubviews方法,此方法会使Subviews根据SuperView.bounds.origin和自身的Frame.origin重新计算出自身的实际坐标。
  • 重新计算位置的SubViews显示在SuperView中。

其实,从上面可以看出来,当我们拖动的时候,动的并不是ScrollView,而是SubViews。

2.2 ContentSize

ContentSize其实就是UIScrollView可以滚动的区域,比如frame = (0,0,320,480) ,contentSize = (320,960),代表你的scrollview可以上下滚动,滚动区域为frame大小的两倍。这个东西其实是抽象的。抽象的目的是为了让大家更好地运用UIScrollView,而不用去理解其背后的实现原理(其实就是修改bounds.origin这一点而已)。

看上面的运行图,小伙伴们会发现,拖动起来无边无界啊,于是ContentSize横空出世,其本质就是对bounds.origin的变化约束一个范围,使其在规定的范围内拖动。

我们修改代码如下:

- (void)handlePanGesture:(UIPanGestureRecognizer *)panGestureRecognizer {

    //ContentSize
    CGPoint touchPoint = [panGestureRecognizer translationInView:self.view];
    CGFloat newOriginY = self.view.bounds.origin.y - touchPoint.y;
    CGFloat newOriginX = self.view.bounds.origin.x - touchPoint.x;

    CGFloat minOriginY = 0.0;
    CGFloat minOriginX = 0.0;
    CGFloat maxOriginY = 20.0;
    CGFloat maxOriginX = 20.0;

    CGRect viewBounds = self.view.bounds;
    viewBounds.origin.y = fmax(minOriginY, fmin(newOriginY, maxOriginY));//比最大值小的同时比最小值大:min<=newOriginY<=maxOriginY
    viewBounds.origin.x = fmax(minOriginX, fmin(newOriginX, maxOriginX));
    self.view.bounds = viewBounds;
    [panGestureRecognizer setTranslation:CGPointZero inView:self.view];

}
复制代码
设置origin范围之后

这样,只要修改minOriginY、minOriginX、maxOriginY、maxOriginX四个值就能确定UIScrollView的滚动范围,由此,ContentSize也能推到得出,如下:

ContentSize.height = view.bounds.size.height + maxOriginY;
ContentSize.width = view.bounds.size.width + maxOriginX;
复制代码

2.3 ContentInset

ContentInset是UIScrollView的contentView的顶点相对于UIScrollView的位置,例如你的ContentInset = (0,100),那么你的contentView就是从UIScrollView的(0,100)开始显示。

这个属性能够在UIScrollView的4周增加额外的滚动区域,以此可以实现下拉刷新,键盘弹出的同时抬高View等等。

修改代码如下:

- (void)handlePanGesture:(UIPanGestureRecognizer *)panGestureRecognizer {

    //ContentInset
    CGPoint touchPoint = [panGestureRecognizer translationInView:self.view];//获取手势位置
    CGFloat newOriginY = self.view.bounds.origin.y - touchPoint.y;//根据手势位置计算新的origin值
    CGFloat newOriginX = self.view.bounds.origin.x - touchPoint.x;

    CGFloat min = 0.0;
    CGFloat maxOriginY = 600.0;
    CGFloat maxOriginX = 0;

    if (panGestureRecognizer.state == UIGestureRecognizerStateEnded) {
            min = 0.0;
            maxOriginY = 600.0;
    } else {
            min = -50.0;
            maxOriginY = 650.0;
    }

    CGRect viewBounds = self.view.bounds;
    viewBounds.origin.y = fmax(min, fmin(newOriginY, maxOriginY));//比最大值小的同时比最小值大:min<=newOriginY<=maxOriginY
    viewBounds.origin.x = fmax(0, fmin(newOriginX, maxOriginX));
    self.view.bounds = viewBounds;
    [panGestureRecognizer setTranslation:CGPointZero inView:self.view];

}
复制代码
设置Inset之后

所以,ContentInset其实只是在不同状态下修改了maxOriginY、maxOriginX等等的值,从而实现了在不改变ContentSize的情况下使滚动区域得到了扩展。

3.总结

回顾一下,其实ContentOffset、ContentSize、ContentInset还是Bounces效果本质都是在跟origin玩耍:Offset直接是origin的别称,而Size、Inset都是修改了origin的改变范围。但是各个属性又有自己专有的作用,Size可以确定滚动的范围,而Inset可以在不修改原有滚动范围的同时,扩大总体滚动范围。实现了这三个属性,也就能实现最基本的UIScrollView。

4.参考

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

推荐阅读更多精彩内容