[UI列表]LoopScrollRect无限滑动不卡顿

应用场景

对于背包界面,排行榜列表,聊天消息,等有大量的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)

触发滑动事件(刷新每一项)

在以下情况事件会被触发:

  1. 如果列表的值已全部生成出来,在滑动过程中不会触发,否则会触发
  2. 调用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)找到这一项,进行刷新。

时间: 2024-10-14 08:20:04

[UI列表]LoopScrollRect无限滑动不卡顿的相关文章

Android 开发中踩过的坑之二: 16ms的UI线程时间才不会卡顿

AndroidUI卡顿, 是总会遇到的问题, 这个坑经常遇到, 通常在优化时才会重点关注. 通常在Adapter.getView()方法中比较突出. 人眼的原因, 1秒24帧的动画才能感到顺畅. 所以每帧的时间大概有41ms多一点点(1000ms/24). 但是但是, 注意了, 这41ms不是全都留给你java代码, 而是所有java native 屏幕等等的, 最后留给我们用java级别发挥的时间, 只有16~17ms了. 所以,当你优化视觉效果时, 留意UI线程的时间, 超过16ms, 就需

android中listview滑动卡顿的原因

导致Android界面滑动卡顿主要有两个原因: 1.UI线程(main)有耗时操作 2.视图渲染时间过长,导致卡顿 http://www.tuicool.com/articles/fm2IFfU

【凯子哥带你学Android】Andriod性能优化之列表卡顿——以“简书”APP为例

这几天闲得无聊,就打开手机上的开发者模式里面的"GPU过度绘制"功能,看看别家的App做的咋样,然后很偶然的打开了"简书",然后就被它的过度绘制惊呆了,于是写了这篇性能分析的文章,从一个只有APK文件的角度,说下如何寻找布局中可能存在的性能问题,以及解决方案.本文章以简书Android最新版本1.9.1进行分析. GPU过度绘制 Hierarchy View SysTrace TraceView 总结 分析资源下载 GPU过度绘制 首先打开下面两个功能开关 开发者模

Android Scrollview嵌套RecyclerView导致滑动卡顿问题解决

一个比较长的界面一般都是Scrollview嵌套RecyclerView来解决.不过这样的UI并不是我们开发人员想看到的,实际上嵌套之后.因为Scrollview和RecyclerView都是滑动控件.会有一点滑动上的冲突.导致滑动起来有些卡顿.这个时候.我们重写一下LayoutManager就行了 例如: [java] view plain copy LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getAct

横向滑动的listview效果的实现方法,scrollview嵌套水平滑动的listview卡顿的解决方法

很多时候,界面需要实现横向滑动的listview效果.网络上有一种方法,自定义了HorizontalListView,用法同正常的listview,可实现水平滑动效果. 但是如果一个界面 为垂直滑动的scrollview嵌套水平滑动的listview的时候,滑动水平listview的时候,会很卡.我最近就遇到了这样的问题,一直把思路放在监听水平和垂直滑动手势,想实现滑动角度小于45的时候 垂直的scrollview 滑动效果被禁止.但是一直没有研究出来. 于是一个偶然的机会,灵光一闪,想到用Ho

Android ListView只加载当前屏幕内的图片(解决list滑动时加载卡顿)

最近在做ListView分页显示,其中包括图片 和文字(先下载解析文字内容,再异步加载图片)发现每次点击下一页后,文字内容加载完毕,马上向下滑动,由于这时后台在用线程池异步下载图片,我每页有20条,也就是20张图片,会导致listview滑动卡顿! 这是用户不想看到的,我参考了网易新闻和电子市场等应用,发现它们都是只加载屏幕内的图片,不现实的不加载,于是我也仿照做了一个.我是菜鸟,我承认 呵呵,虽然不见得完全和他们的一样,但是确实解决了翻页时那一刻的卡顿现象. 因为未发现网上有相关文章,希望对朋

解决:ScrollView中嵌套ListView,使得listview上下滑动卡顿现象

效果图就是上面的那样!实现方式:上面是一个ViewPager实现的左右无限循环并带有自动轮播的banner.在banner图的下面是一个listview实现上拉加载的功能:但是在我实现的过程中我遇到了一个问题,就是整个页面的展示效果都已经实现,但是banner图连带下面的listview在上下滑动的时候出现卡顿的现象:当然之前也遇到了一个问题,就是我的banner图和listview一起放在了父控件ScrollView中,是的listview不能完全显示:那么就来解决这两个问题. 解决问题一:<

一次优化列表页卡顿的经历

写下这篇文章的日期是2016年4月初.当时来到公司,项目之前是外包出去的,代码乱糟糟的,需要重构掉, 摆在面前的问题不是重构项目,而是一些列表页的紧急的性能优化. 1.先优化item的层级 其实层级只要不是太深的话,比如5层,6层,对性能的差别在中等性能的机器上几乎看不出来的,但是想要做到 极致, 我就得死扣细节,原来代码是有4层的,其实有一点点接近可优化的范围了,我把原来的4层降到1层. 1层的话在item的话,在cpu进行计算测量的时候就速度很快了. 下面是我用DDMS去查看某台和我台的列表

android ListView使用软引用解决加载网络图片快速滑动卡顿

前段时间做了一个新闻类的项目,新闻列表中的图片都是网络图片,刚开始是自定义ImageView(等于是在其中加了一个异步下载然后设置背景)虽然可以加载网络图片,不过当快速滑动的时候会很卡顿,而且前期没有对Bitmap做回收,导致OOM(内存溢出),后来上网查了各种资料,大概有两种思路: 1.滑动的时候不加载图片,等滑动停止之后再加载,这样就需要对ListView进行OnScrollListener监听,得到屏幕上显示的开始和结束的位置(当有headView和footerView时需要换算)然后下载