iOS 滚动视图的复用问题解决方案
##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。
@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 ,这是个什么东西呢?我们看一下代码:
@interface TMMuiRectModel:NSObject
//转换后的绝对值rect
@property (nonatomic,assign) CGRect absRect;
//业务下标
@property (nonatomic,copy) NSString *muiID;
这里有两个属性,absRect是LazyScroll中的View相对LazyScrollView的绝对坐标,muiID是这个View在LazyScrollView中唯一的标识符,可赋值也可不赋值。 第三个方法,返回View。
@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。
- (UIView *)scrollView:(TMMuiLazyScrollView *)scrollView itemByMuiID:(NSString *)muiID;
复用还是不复用,是由datasource决定的。如果要复用,需要datasource方法内调用,即:
- (UIView *)dequeueReusableItemWithIdentifier:(NSString *)identifier
获取复用的View,这个方法取出来的View就是在上一段所说的Dictionary中拿的。 最后我们看一下LazyScrollView的使用流程:找到所有View将要显示的位置 – 排序 – 查找应该显示的View – 回收 – 创建/复用。
- 精妙JS代码段搜集
- Backbone事件模块及其用法
- IOS 8 Safari JIT bug影响jQuery和underscore
- linux服务器开发三(网络编程) --二
- JavaScript字符串间的比较
- Html<a>标签href的困惑记载
- SublimeText下写作利器之MarkdownEditing
- Go 语言的基本数据类型
- c语言客户端与go语言服务端通信(网络字节序)
- (译)Go 语言的内存、指针详解
- Redis之并发写入
- Python超过R,成为数据科学和机器学习的最常用语言
- JavaScript 之 this 详解
- Golang 中 for-loop 和 goroutine 的问题
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释
- Pwn-EXP模板
- Linux学习随手记
- PHP session用法其实很简单
- 爬虫代理适合的业务和场景
- Flutter基础widgets教程-OverflowBox篇
- iOS音视频接入- TRTC语音聊天室
- vscode使用COS作为图床编写markdown文档
- 一文爱上可视化神器Plotly_express
- 神策大数据用户行为分析
- 3分钟短文:为了你少跳坑,Laravel写好了用户授权
- 巧用ingest pipeline实现Elasticsearch索引的重定向
- leetcode之错误的集合
- vue-element怎么给select下拉框赋值?
- vue 怎么将Checkbox 多选框选中的值提交
- Chrome的小恐龙游戏自动躲避障碍物