应用场景
对于背包界面,排行榜列表,聊天消息,等有大量的UI列表的界面,常规做法是为每一条数据生成一个格子,在数据量越大的情况下,会生成越来越多的Gameobject,引起卡顿。
这篇文章讲述的就是解决UI列表卡顿的方法,在列表中只生成指定数量的Gameobject,滑动时进行数据更新,保证性能。
LoopScrollRect(无限滑动不卡顿)
插件地址:https://github.com/qiankanglai/LoopScrollRect
中文文档:http://qiankanglai.me/2015/08/15/LoopScrollRect/
适用于UGUI,支持UGUI原生的GridLayout,ScrollBar
原理分析
在UGUI的ScrollRect基础上作的修改
两者的差异部分使用//==========LoopScrollRect==========
标识出来了,源代码对比:
UGUI的ScrollRect:https://bitbucket.org/Unity-Technologies/ui/src/5.2/UnityEngine.UI/UI/Core/ScrollRect.cs?fileviewer=file-view-default
LoopScrollRect:https://github.com/qiankanglai/LoopScrollRect/blob/master/Assets/Scripts/LoopScrollRect.cs
使用示例
可以参考demo的示例
如果在lua中使用,逻辑和C#的一样,步骤如下:
1.注册事件、取消注册
2.在刷新函数根据数据更新列表
3.调用逻辑
注册事件
注册列表滑动事件,在OnInit中注册一次,用来刷新列表
此事件在C#中触发,Lua中注册回调,事件有两个参数
self.chatScrollRect.dataSource:ScrollToTextEvent("+", handler(self, UIChat.OnScrollChat, self, cellTrans, idx))
取消注册
取消注册的列表滑动事件,在OnClose中取消
self.chatScrollRect.dataSource:ScrollToTextEvent("-", UIChat.OnScrollChat)
触发滑动事件(刷新每一项)
在以下情况事件会被触发:
- 如果列表的值已全部生成出来,在滑动过程中不会触发,否则会触发
- 调用RefreshCells或RefillCellsFromEnd时,会触发
function UIRewardResources:OnScrollEvent(cellTrans, idx)
if (not cellTrans or not idx) then
return
end
idx = idx + 1 -- Lua的索引从1开始,而scrollRect是从0开始
local data = DataCenter.resource.data[idx]
--执行你的刷新逻辑
self:DoRenderItem(cellTrans, data)
end
手动刷新列表
--设置列表的总数,并刷新cell
self.chatScrollRect.totalCount = 10
self.chatScrollRect:RefreshCells()
刷新并让列表滑动到底部
self.chatScrollRect:RefillCellsFromEnd()
两个刷新函数区别
RefreshCells:列表刷新
RefillCellsFromEnd:从最底部的消息开始刷新,并滑动到底部
列表滑动到底部的事件
和UGUI的ScrollRect的做法一样,为scrollRect添加一个scrollbar,捕捉OnEndDrag事件,示例如下:
self.chatScrollRect.onEndDrag = function(data)
if self.chatScrollbar.value >= 1 then
print("scroll to bottom")
end
end
如果你的数据量特别大,在滑动到底部事件时进行分页请求数据
如果是做分页:建议在滑动到某个数量级且滑动到底部时,设置一次数据,保证滑动的流畅性
prefabSource为nil
如果在热更新的包中报prefabSource为nil,是因为热更新dll之后,prefabSource会丢失,需要在lua对prefabSource重新赋值,示例:
self.scrollRect.prefabSource = CS.UnityEngine.UI.XLoopScrollPrefabSource(self.itemCell.gameObject)
技巧和事项
Cell指:每一个格子,或每一项列表
为每一个Cell都绑定LayoutElement组件,并勾选Preferred Width 和Preferred Height,且给它们赋合适值,保证列表自适应。
跳转到指定的index/Item:https://github.com/qiankanglai/LoopScrollRect/issues/14
查找某一项的取巧做法:可以用id做为Cell的名字,当在查找时,根据FindChild(id)找到这一项,进行刷新。