基于duilib的虚拟列表实现

本文由作者邹启文授权网易云社区发布。



在邮箱大师选择duilib作为UI开发库后,我们面临这样一个问题。随着时间的积累,用户数据会越来越多,如何保证我们的软件在展示这些数据时依然保持非常好的体验?

      原生态duilib列表的实现是,数据与控件(列表的每一项)一一对应,即有多少数据,便有多少控件。通过粗略测试,我们发现,当数据量达到10000封邮件时,仅仅是构造这10000个控件就需要花费16s,也就是说在这16s内,用户无法操作软件,这是我们无法接受的。所以,我们决定改进duilib列表,通过虚拟化的方式解决这个问题。

      虚拟化,就是,对于10000封邮件,我们并不需要构造10000个控件,因为真正可以让用户看见的不超过20(根据屏幕高度和控件高度计算)个控件,那么,我们可以通过反复利用这20个控件来达到展示10000封邮件的目的。

      那么,具体如何实现呢?很简单,在鼠标上下滚动的时候,我们对这20个控件重新布局(更改其位置)和更新其内容。

      但是,产品和视觉提出了一个需求,给列表滚动加上动画效果,即用户滚动列表松开鼠标后,列表内容仍要向上或向下以一定的速度前进,之后才停下来。那么,上面的方案便行不通,因为20个控件在滚动时不断重新布局和更新内容比较耗时,会导致列表出现卡顿式的前进,用户体验太差。如何解决这个问题呢?

      我们的解决办法是采用100个控件。这样,在滚动时判断是否需要重新布局,如果不需要,则直接刷新绘制新的邮件内容,如果到了临界条件,那么再重新布局然后绘制新的邮件内容。具体做法如下:

临界条件的判断:

  假设滚动条的位置为yScrollPos,列表的区域为rcList,第一个列表项的位置为rcFirst,最后一个列表项的位置为rcLast。

  当yScrollPos > (rcLast.bottom-rcList.top)-rcList.Height时,为向下滚动的临界条件;


  当yScrollPos < rcFirst.top-rcList.top时,为向上滚动的临界条件。

1,向下滚动到临界条件

特别注意:存在靠近最底部时重新布局的情况,100个列表项的后面不可见的一部分项可以置为无效。

2,向上滚动到临界条件

特别注意:存在靠近顶部时重新布局的情况,此时,与上面图不同的是,大部分项会布局在下面,少部分在上面,但是没有关系,因为此后向上滚动,不会再触发重新布局。


目前邮箱大师中,虚拟列表应用在邮件列表、通讯录列表、写信联系人列表等,极大提高了软件运行性能和体验,而且运行稳定。


免费领取验证码、内容安全、短信发送、直播点播体验包及云服务器等套餐

更多网易技术、产品、运营经验分享请访问网易云社区


相关文章:
【推荐】 实战案例:如何快速打造1000万+播放量的抖音网红?

推荐阅读更多精彩内容

  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 5,512评论 0 17
  • 我要停用朋友圈,没错!不是屏蔽谁,而是拉黑自己,拉黑自己,拉黑自己!停用朋友圈,不再关注别人的生活动态,不再羡慕,...
    风行宇内阅读 206评论 0 1
  • 飞流直下三千尺,疑是银河落九天。这是诗人李白的诗。描写的是黑白相间的瀑布,黑色的是瀑布前凸起的石块,经过长时间的冲...
    沙漠之狐007阅读 314评论 0 0
  • 光阴如此短暂,生活中一些无聊小事,又哪里值得我们花费时间去生气呢?相信我们在生活中都有过为琐事生气的经历,无非是为...
    mahuanfeifei阅读 289评论 0 0
  • 让生活慢下来,让心态慢下来,不着急,不功利。慢,生活。乐,生活。依循自己的节奏,不攀比,不焦虑。静心。
    牛小胖阅读 130评论 0 0
  • 2018.2.24 瑜伽理论知识学习 坚持瑜伽能给身体带来什么? 研究表明: 需要4周,自己才能注意到你身体的变...
    冰柠檬香草阅读 79评论 0 0