文档章节

CocosCreator之分层管理的ListView

陈广文
 陈广文
发布于 07/16 22:06
字数 1681
阅读 44
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

前言

进入公众号回复listview即可获得demo的git地址。

  1. 之前写的一篇文章《Creator之ScrollView那些事》中提到了官方Demo中提供的ListViewCtl,只是实现了纵向滑动,没有实现横向滑动。并且建议官方可以把功能做全然后放入组件库中供开发者使用。
  2. 然后有个牛逼大神说这个ListView不ok。要我对自己的公众号内容负责。我还以为有什么严重的bug,其实是打断了合批操作。对于官方提供的ListViewCtr的操作方式肯定会打断合批的 !不过对于一些简单的需求,比如我上次文章中的这个截图。 image.png 这样的列表需要合批吗?我的需求就是少创建几个节点就可以了。所以我觉得ok不ok还是要看需求吧!为什么tableview呼声那么高,而Laya也在官方组件中支持了ListView,已经是很好的说明了。

ListView的局限

  1. 首先,这个ListView是有局限的,它直接将Item放入了content中,肯定会打断合批操作; image.png 如果你有一个多列多行,并且item非常复杂的需求,那么用这个ListView肯定是不合适的。就好比你用一把杀鸡的刀去杀一头牛,不悲剧才怪!所以大家在看到别人分享东西的时候建议最好不要拿来主义,而是经过分析后决定用还是不用,我相信作为程序猿,这点判断能力还是有的!

  2. 其次 ,这个ListView不支持网格显示。如果想要多行或者多列显示,需要自己在一个Item中排列好。然后自己设置每个道具的显示与隐藏,所以对于有多列显示需求的情况还是比较复杂的。

那么我先说说ListView采用的原理,然后再说说如何改进吧。

ListView采用的原理

  1. 根据可显示区域的宽或者高计算出需要创建的道具的数量。然后多加一行或者一列,避免滑动的时候显示不自然。 image.png
  2. 滑动时,将离开可见区域的道具放到与滑动方向相反的一端重复使用。 image.png
  3. 原理其实就这么两点,目的就是少创建节点。

支持网格显示的ListView——GridListView

  1. 首先我为之前的ListView增加了网格显示能力,代码中通过给定的spaceX和spaceY 结合可显示区域的宽或者高计算可显示的列数或者行数 image.png
  2. 如果只是做了网格显示能力而不做分层管理其实一样有局限1。虽然比你直接把道具放入content中好很多,但是dc依然很高。

支持分层管理的ListView——GridLayerListView

  1. GridLayerListView 是继承了GridListView,重写了设置坐标和添加节点的方法。 image.png image.png
  2. 这里的item依然被添加到了content中,只是此时的它已经没有子节点了,只是用来判断是否离开显示区域而存在的。
  3. 同时在添加item的时候给item自定义了一个LIST属性,用于保存子节点的引用,因为已经不能通过item的children数组获得子节点了。
  4. 为每个子节点自定义一个属性INIT_POS,保存本地坐标,更新位置的时候会用到。 image.png
  5. 为了保证所有节点显示位置的正确性,代码中直接移除节点中存在的widget组件。 image.png
  6. 当你将一个ScrollView拖到界面上时,只需要调整ScrollView和view的宽高,代码中直接删除了默认的item节点 image.png
  7. GridLayerListView并没有使用对象池,如果确实有需要可以在getItem函数中自己通过对象池获取道具。 image.png
  8. 通过设置ScrollView的Horizontal 和 Vertical 改变滚动方向,同时只支持一个方向滚动。 image.png

使用方式

  1. 将一个ScrollView拖到界面中,挂上GridLayerListView组件 image.png
  2. 定义一个处理逻辑的组件挂到界面上,并在逻辑组件中声明好使用的变量和函数,设置好GridLayerListView的参数。(其实跟ListViiew的使用方式是一样的) image.png
  3. 设置ScrollView 和View 的宽高,注意尤其是View的宽高,因为View大小就是可见区域,代码中会根据View的宽高判断应该显示的列数或者行数。注意列数或者行数等于宽度或者高度/(item的宽度或者高度+横向间距或者纵向间距) image.png

使用效果

为了看优化的效果,用到的两个纹理都去掉了Packable选项 image.png

  1. 不分层的GridListView dc=64 image.png 在不分层管理的情况下,道具中的label是否设置为Char模式dc都是一样的。
  2. 分层+Label不为Char模式 dc=23 image.png
  3. 分层+Label为Char模式 dc=9 image.png
  4. 道具的预制体结构 image.png
  5. 道具使用情况 image.png 根据后台输出可以看出,一共有35个需要显示的道具,实际上只创建了3 x5 = 15个道具就搞定了。
  6. dc 从64 减少到9,依然用上了ListView少创建,重复利用的原理,只是加上分层管,达到了这样的效果,还算过得去吧。

结语

  1. 以上是我在之前的ListView基础上添加了网格显示,分层管理等能力后写出来的新组件,我给它起名叫GridLayerListView,是因为它是一个支持网格显示,分层管理节点的ListView。一个既可以杀鸡也可以杀牛的刀。就是对ListView情有独钟,没办法了。
  2. 我并没有说这个是最优的方案,也不保证没有bug(我还不是一个敢说自己写的东西没bug的牛人),思想仅供参考,大神可以绕道。如果你想将dc降到更低,那么你还需要做一些其他的优化。建议阅读文弱书生陈皮皮的《Cocos Creator 性能优化:DrawCall》

进入公众号回复listview即可获得demo的git地址。

欢迎扫码关注公众号《微笑游戏》,浏览更多内容。如果您觉得文章还可以,点赞、在看、分享、赞助都是对我最大的鼓励,在下将感激不尽。

微信图片_20190904220029.jpg

欢迎扫码关注公众号《微笑游戏》,浏览更多内容。

陈广文
粉丝 1
博文 20
码字总数 23375
作品 0
私信 提问
加载中
请先登录后再评论。
DNS 管理系统--NamedManager

NamedManager 是一个基于 Web 的 DNS 管理系统,可用来添加、调整和删除 DNS 的 zones/records 数据,支持 Bind 作为后端的 DNS 服务,支持 IPv4 和 IPv6。...

匿名
2013/01/23
8.5K
0
工作流管理系统--Pegasus WMS

Pegasus (飞马座)工作流管理系统包括一套技术标准工作流程应用程序中执行帮助许多不同的环境中,包括桌面、校园集群、网格、云。它弥补了科学领域和执行环境通过自 动映射到分布式资源的高层工...

匿名
2013/02/24
5.2K
0
密码管理程序--pwgrep

为了管理我的密码,我写了一个小的 bash/awk 脚本用来管理一个密码数据库并使用 GnuPG 进行加密。使用 pwgrep 的好处是: 密码加密 密码版本化,不用担心丢失老密码 Since a versioning sys...

匿名
2013/03/11
1.3K
0
网络设备管理和监控软件--Spiceworks

Spiceworks是一款针对中小型企业的网络设备管理和监控软件。它由广告商提供支持,是一款免费软件。根据Spiceworks公司的介绍,这款软件适合雇员人数在250人以下的中小型企业,其产品功能和特...

匿名
2012/10/22
1W
0
Linux 多屏幕管理软件--XRandR

XRandR是X Rotate and Reflect Extension(改变大小与旋转扩充)的缩写,用来在命令行界面中对linux系统中的 X窗口系统的多屏幕做出一些设定的软件,能更改外接屏幕的大小、分辨率等...

匿名
2012/10/22
3K
0

没有更多内容

加载失败,请刷新页面

加载更多

在后CoVID-19世界中,网络安全将如何变化?

随着世界向云迁移,围绕企业如何解决钓鱼***和勒索软件***的争论不断。 作者:Cassie 编译来源:千家网|2020-08-03 11:13 收藏 分享 随着世界向云迁移,围绕企业如何解决钓鱼***和勒索软件*...

osc_56801rv0
10分钟前
0
0
2020黑帽大会的11大网络安全工具

在8月1日至8月6日举行的线上虚拟活动上,将有130多位安全大咖展示数十种新工具、框架和方法,以保护软件、固件、硬件和移动系统免受各种威胁的侵害,以下是我们精选出的十一大安全工具。 作者...

osc_flwkfqx5
11分钟前
0
0
课程表1(广度搜索之拓扑排序)

你这个学期必须选修 numCourse 门课程,记为 0 到 numCourse-1 。 在选修某些课程之前需要一些先修课程。 例如,想要学习课程 0 ,你需要先完成课程 1 ,我们用一个匹配来表示他们:[0,1] 给...

osc_yf4y1952
12分钟前
0
0
如何检查SQL Server表中是否存在列? - How to check if a column exists in a SQL Server table?

问题: I need to add a specific column if it does not exist. 如果它不存在,我需要添加一个特定的列。 I have something like the following, but it always returns false: 我有类似以下......

javail
13分钟前
0
0
NB-IOT覆盖范围有多大 NB-IOT的强覆盖是怎么实现的

  NB-IoT技术自出现以来就以其强大的覆盖范围和通讯距离长而受到广泛的欢迎,发展到现在已经成为万物互联网络中的一个重要分支。那么NB-IoT覆盖范围到底有多大,是怎么来衡量其覆盖能力?  ...

osc_yozufu01
13分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部