前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >iOS 滚动视图的复用问题解决方案

iOS 滚动视图的复用问题解决方案

作者头像
xiangzhihong
发布2018-02-05 16:59:35
1.4K0
发布2018-02-05 16:59:35
举报
文章被收录于专栏:向治洪

LazyScroll是什么

LazyScrollView 继承自ScrollView,目标是解决异构(与TableView的同构对比)滚动视图的复用回收问题。它可以支持跨View层的复用,用易用方式来生成一个高性能的滚动视图。

为什么要用LazyScrollView

我们在做首页的时候,往往展示的东西会很多,随着View数量逐渐膨胀,没有一套复用回收机制的ScrollView已经影响到性能了,迫切需要处理对ScrollView中View的复用和回收。使用TableView只能用来解决同类Cell的展示,然而在实际的场景中在ScrollView里面,View的种类往往会比较多,所以使用TableView不适合我们的场景。 而UICollectionView本身的布局和复用回收机制不够灵活,用起来也较为繁琐。所以诞生了LazyScrollView去解决这个问题。这也是天猫iOS客户端的首页落地方案。

LazyScroll使用

LazyScrollView的使用和TableView很像,不过多了一个需要实现的方法:返回对应index的View 相对LazyScrollView的绝对坐标。

实现LazyScrollViewDatasource

类似TableView的用法,我们需要使用方实现LazyScrollViewDatasource的Delegate。

代码语言:javascript
复制
@protocol TMMuiLazyScrollViewDataSource <NSObject>
@required
//ScrollView展示item个数
- (NSUInteger)numberOfItemInScrollView:(TMMuiLazyScrollView *)scrollView;
//要求根据index直接返回RectModel
- (TMMuiRectModel *)scrollView:(TMMuiLazyScrollView *)scrollView rectModelAtIndex:(NSUInteger)index;
//返回下标所对应的view
- (UIView *)scrollView:(TMMuiLazyScrollView *)scrollView itemByMuiID:(NSString *)muiID;

LazyScrollView的核心是在初始状态就得知所有View应该显示的位置。第一个方法很简单,获取LazyScrollView中item的个数。第二个方法需要按照Index返回TMMuiRectModel ,它会携带对应index的View 相对LazyScrollView的绝对坐标。 这里出现了一个TMMuiRectModel ,这是个什么东西呢?我们看一下代码:

代码语言:javascript
复制
@interface TMMuiRectModel:NSObject
//转换后的绝对值rect
@property (nonatomic,assign) CGRect absRect;
//业务下标
@property (nonatomic,copy) NSString *muiID;

这里有两个属性,absRect是LazyScroll中的View相对LazyScrollView的绝对坐标,muiID是这个View在LazyScrollView中唯一的标识符,可赋值也可不赋值。 第三个方法,返回View。

代码语言:javascript
复制
@interface UIView(TMMui)

//索引过的标识,在LazyScrollView范围内唯一
@property (nonatomic, copy) NSString  *muiID;
//重用的ID
@property (nonatomic, copy) NSString *reuseIdentifier;

首先,我们在UIView之外加了一个Category,这个category可以让View携带muiID和reuseIdentifier,对于返回的View来说,只需要在乎对View的reuseIdentifier赋值,muiID的赋值会在lazyScrollView中处理掉。reuseIdentifier相同的View会被复用,如果这个View的reuseIdentifier是nil或者空字符串,则不会被复用。

LazyScrollView内部原理分析

首先来看一个简单的案例:

根据DataSource获取所有的TMMuiRectModel

根据DataSource的Delegate,拿到所有的View应该被显示的位置。这一步,核心是拿到的位置是确定的。根据Demo,我们观察从 0/1 - 2/3 之间这些View,这个时候LazyScrollView拿到的Rect如下:

Index

标号(MUIID)

Rect

0

0/0

origin = (x = 25, y = 15), size = (width = 156, height = 150

1

0/1

origin = (x = 194, y = 15), size = (width = 156, height = 150)

2

0/2

origin = (x = 25, y = 180), size = (width = 156, height = 150)

3

0/3

origin = (x = 194, y = 180), size = (width = 156, height = 150

4

1/0

origin = (x = 5, y = 360), size = (width = 177.5, height = 150)

5

1/1

origin = (x = 192.5, y = 426), size = (width = 84, height = 84)

6

1/2

origin = (x = 192.5, y = 360), size = (width = 177.5, height = 56)

7

1/3

origin = (x = 286.5, y = 426), size = (width = 83.5, height = 84)

8

2/0

origin = (x = 25, y = 530), size = (width = 325, height = 150)

9

2/1

origin = (x = 25, y = 695), size = (width = 325, height = 150)

10

2/2

origin = (x = 25, y = 860), size = (width = 325, height = 150)

排序

拿到了这些位置之后,接下来做的事情就是排序。排序生成的索引会有两个:根据顶边(y)升序排序的索引和根据底边(y+height)降序排序的索引。 根据顶边(y)升序排序的索引

Index

标号(MUIID)

Rect

0

0/0

origin = (x = 25, y = 15), size = (width = 156, height = 150

1

0/1

origin = (x = 194, y = 15), size = (width = 156, height = 150)

2

0/2

origin = (x = 25, y = 180), size = (width = 156, height = 150)

3

0/3

origin = (x = 194, y = 180), size = (width = 156, height = 150

4

1/0

origin = (x = 5, y = 360), size = (width = 177.5, height = 150)

5

1/1

origin = (x = 192.5, y = 360), size = (width = 177.5, height = 56)

6

1/2

origin = (x = 192.5, y = 360), size = (width = 177.5, height = 56)

7

1/3

origin = (x = 286.5, y = 426), size = (width = 83.5, height = 84)

8

2/0

origin = (x = 25, y = 530), size = (width = 325, height = 150)

9

2/1

origin = (x = 25, y = 695), size = (width = 325, height = 150)

10

2/2

origin = (x = 25, y = 860), size = (width = 325, height = 150)

根据底边(y+height)降序排序的索引

Index

标号(MUIID)

Rect

0

2/2

origin = (x = 25, y = 860), size = (width = 325, height = 150)

1

2/1

origin = (x = 25, y = 695), size = (width = 325, height = 150)

2

2/0

origin = (x = 25, y = 530), size = (width = 325, height = 150)

3

1/0

origin = (x = 5, y = 360), size = (width = 177.5, height = 150)

4

1/2

origin = (x = 192.5, y = 360), size = (width = 177.5, height = 56)

5

1/3

origin = (x = 286.5, y = 426), size = (width = 83.5, height = 84)

6

1/1

origin = (x = 192.5, y = 426), size = (width = 84, height = 84)

7

0/2

origin = (x = 25, y = 180), size = (width = 156, height = 150)

8

0/3

origin = (x = 194, y = 180), size = (width = 156, height = 150

9

0/0

origin = (x = 25, y = 15), size = (width = 156, height = 150

10

0/1

origin = (x = 194, y = 15), size = (width = 156, height = 150)

查找

前两步是在执行完reload,在视图还没有生成的时候就开始做了,而接下来的步骤在要生成视图(初始化或滚动的时候)才会去做。 我们设定了Buffer为上下各20,滚动超过20个像素后才会指定查找视图并显示的动作。举个例子,如下图,红圈是应该显示的区域。

如上图所示,现在已知的是红圈顶边y是242,底边y是949,加上缓冲区Buffer,应该是找222 - 969 之间的View。我们要做的是,找到底边y小于969的Model和顶边y大于222的Model,取交集,就是我们要显示的View。 采用的方法为二分查找,在根据顶边升序排序的索引中找949,找到的index为0(MUIID为2/2),我们使用一个Set,把根据顶边排序中index >= 0 的元素先放在这里。获取的Set中包含的muiID为 0/0,0/1,0/2,0/3,1/0,1/1,1/2,1/3,2/0,2/1,2/2。 根据底边排序的索引中找222,找到的index为2,我们把index >= 2的元素放在另一个Set,获取的Set中包含的muiID为0/2,0/3,1/0,1/1,1/2,1/3,2/0,2/1,2/2 两个Set取交集,得到的就是我们的ResultSet,这里面都是我们要显示View的Model,它们的muiID是0/2,0/3,1/0,1/1,1/2,1/3,2/0,2/1,2/2。

回收、复用、生成

我们知道了应该显示哪些View,但是我们之后做的第一步是把不需要显示的View加入到复用池中。LazyScroll可以取到当前显示了的View,拿当前显示的View的muiID和将要显示view的Model的muiID做对比,可以知道当前显示的View哪些应该被回收。 LazyScrollView中有一个Dictionary,key是reuseIdentifier,Value是对应reuseIdentifier被回收的View,当LazyScrollView得知这个View不该再出现了,会把View放在这里,并且把这个View hidden掉。 然后,用LazyScrollView会去调用datasource。

代码语言:javascript
复制
- (UIView *)scrollView:(TMMuiLazyScrollView *)scrollView itemByMuiID:(NSString *)muiID;

复用还是不复用,是由datasource决定的。如果要复用,需要datasource方法内调用,即:

代码语言:javascript
复制
- (UIView *)dequeueReusableItemWithIdentifier:(NSString *)identifier

获取复用的View,这个方法取出来的View就是在上一段所说的Dictionary中拿的。 最后我们看一下LazyScrollView的使用流程:找到所有View将要显示的位置 – 排序 – 查找应该显示的View – 回收 – 创建/复用。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016-12-27 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • LazyScroll是什么
  • 为什么要用LazyScrollView
  • LazyScroll使用
    • 实现LazyScrollViewDatasource
    • LazyScrollView内部原理分析
      • 根据DataSource获取所有的TMMuiRectModel
        • 排序
          • 查找
            • 回收、复用、生成
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档