前言

進(jìn)入公眾號(hào)回復(fù)listview即可獲得demo的git地址。

之前寫(xiě)的一篇文章《Creator之ScrollView那些事》中提到了官方Demo中提供的ListViewCtl,只是實(shí)現(xiàn)了縱向滑動(dòng)，沒(méi)有實(shí)現(xiàn)橫向滑動(dòng)。并且建議官方可以把功能做全然后放入組件庫(kù)中供開(kāi)發(fā)者使用。

然后有個(gè)牛逼大神說(shuō)這個(gè)ListView不ok。要我對(duì)自己的公眾號(hào)內(nèi)容負(fù)責(zé)。我還以為有什么嚴(yán)重的bug，其實(shí)是打斷了合批操作。對(duì)于官方提供的ListViewCtr的操作方式肯定會(huì)打斷合批的 !不過(guò)對(duì)于一些簡(jiǎn)單的需求，比如我上次文章中的這個(gè)截圖。這樣的列表需要合批嗎？我的需求就是少創(chuàng)建幾個(gè)節(jié)點(diǎn)就可以了。所以我覺(jué)得ok不ok還是要看需求吧！為什么tableview呼聲那么高，而Laya也在官方組件中支持了ListView，已經(jīng)是很好的說(shuō)明了。

ListView的局限

首先，這個(gè)ListView是有局限的，它直接將Item放入了content中，肯定會(huì)打斷合批操作；如果你有一個(gè)多列多行，并且item非常復(fù)雜的需求，那么用這個(gè)ListView肯定是不合適的。就好比你用一把殺雞的刀去殺一頭牛，不悲劇才怪！所以大家在看到別人分享東西的時(shí)候建議最好不要拿來(lái)主義，而是經(jīng)過(guò)分析后決定用還是不用，我相信作為程序猿，這點(diǎn)判斷能力還是有的！

其次 ，這個(gè)ListView不支持網(wǎng)格顯示。如果想要多行或者多列顯示，需要自己在一個(gè)Item中排列好。然后自己設(shè)置每個(gè)道具的顯示與隱藏，所以對(duì)于有多列顯示需求的情況還是比較復(fù)雜的。

那么我先說(shuō)說(shuō)ListView采用的原理，然后再說(shuō)說(shuō)如何改進(jìn)吧。

ListView采用的原理

根據(jù)可顯示區(qū)域的寬或者高計(jì)算出需要?jiǎng)?chuàng)建的道具的數(shù)量。然后多加一行或者一列，避免滑動(dòng)的時(shí)候顯示不自然。

滑動(dòng)時(shí)，將離開(kāi)可見(jiàn)區(qū)域的道具放到與滑動(dòng)方向相反的一端重復(fù)使用。

原理其實(shí)就這么兩點(diǎn)，目的就是少創(chuàng)建節(jié)點(diǎn)。

支持網(wǎng)格顯示的ListView——GridListView

首先我為之前的ListView增加了網(wǎng)格顯示能力，代碼中通過(guò)給定的spaceX和spaceY 結(jié)合可顯示區(qū)域的寬或者高計(jì)算可顯示的列數(shù)或者行數(shù)

如果只是做了網(wǎng)格顯示能力而不做分層管理其實(shí)一樣有局限1。雖然比你直接把道具放入content中好很多，但是dc依然很高。

支持分層管理的ListView——GridLayerListView

GridLayerListView 是繼承了GridListView，重寫(xiě)了設(shè)置坐標(biāo)和添加節(jié)點(diǎn)的方法。

這里的item依然被添加到了content中，只是此時(shí)的它已經(jīng)沒(méi)有子節(jié)點(diǎn)了，只是用來(lái)判斷是否離開(kāi)顯示區(qū)域而存在的。

同時(shí)在添加item的時(shí)候給item自定義了一個(gè)LIST屬性，用于保存子節(jié)點(diǎn)的引用，因?yàn)橐呀?jīng)不能通過(guò)item的children數(shù)組獲得子節(jié)點(diǎn)了。

為每個(gè)子節(jié)點(diǎn)自定義一個(gè)屬性INIT_POS，保存本地坐標(biāo)，更新位置的時(shí)候會(huì)用到。

為了保證所有節(jié)點(diǎn)顯示位置的正確性，代碼中直接移除節(jié)點(diǎn)中存在的widget組件。

當(dāng)你將一個(gè)ScrollView拖到界面上時(shí)，只需要調(diào)整ScrollView和view的寬高，代碼中直接刪除了默認(rèn)的item節(jié)點(diǎn)

GridLayerListView并沒(méi)有使用對(duì)象池，如果確實(shí)有需要可以在getItem函數(shù)中自己通過(guò)對(duì)象池獲取道具。

通過(guò)設(shè)置ScrollView的Horizontal 和 Vertical 改變滾動(dòng)方向，同時(shí)只支持一個(gè)方向滾動(dòng)。

使用方式

將一個(gè)ScrollView拖到界面中，掛上GridLayerListView組件

定義一個(gè)處理邏輯的組件掛到界面上，并在邏輯組件中聲明好使用的變量和函數(shù)，設(shè)置好GridLayerListView的參數(shù)。(其實(shí)跟ListViiew的使用方式是一樣的)

設(shè)置ScrollView 和View 的寬高，注意尤其是View的寬高，因?yàn)閂iew大小就是可見(jiàn)區(qū)域，代碼中會(huì)根據(jù)View的寬高判斷應(yīng)該顯示的列數(shù)或者行數(shù)。注意列數(shù)或者行數(shù)等于寬度或者高度/(item的寬度或者高度+橫向間距或者縱向間距)

使用效果

為了看優(yōu)化的效果，用到的兩個(gè)紋理都去掉了Packable選項(xiàng)

不分層的GridListView dc=64在不分層管理的情況下，道具中的label是否設(shè)置為Char模式dc都是一樣的。

分層+Label不為Char模式 dc=23

分層+Label為Char模式 dc=9

道具的預(yù)制體結(jié)構(gòu)

道具使用情況根據(jù)后臺(tái)輸出可以看出，一共有35個(gè)需要顯示的道具，實(shí)際上只創(chuàng)建了3 x5 = 15個(gè)道具就搞定了,即使有再多需要顯示的道具，也只用這15個(gè)道具。

dc 從64 減少到9，依然用上了ListView少創(chuàng)建，重復(fù)利用的原理，只是加上分層管，達(dá)到了這樣的效果，還算過(guò)得去吧。

結(jié)語(yǔ)

以上是我在之前的ListView基礎(chǔ)上添加了網(wǎng)格顯示，分層管理等能力后寫(xiě)出來(lái)的新組件，我給它起名叫GridLayerListView，是因?yàn)樗且粋€(gè)支持網(wǎng)格顯示，分層管理節(jié)點(diǎn)的ListView。一個(gè)既可以殺雞也可以殺牛的刀。就是對(duì)ListView情有獨(dú)鐘，沒(méi)辦法了。

我并沒(méi)有說(shuō)這個(gè)是最優(yōu)的方案，也不保證沒(méi)有bug(我還不是一個(gè)敢說(shuō)自己寫(xiě)的東西沒(méi)bug的牛人)，思想僅供參考，大神可以繞道。如果你想將dc降到更低，那么你還需要做一些其他的優(yōu)化。建議閱讀文弱書(shū)生陳皮皮的《Cocos Creator 性能優(yōu)化：DrawCall》

進(jìn)入公眾號(hào)回復(fù)listview即可獲得demo的git地址。

歡迎掃碼關(guān)注公眾號(hào)《微笑游戲》，瀏覽更多內(nèi)容。如果您覺(jué)得文章還可以，點(diǎn)贊、在看、分享、贊助都是對(duì)我最大的鼓勵(lì)，在下將感激不盡。

微信圖片_20190904220029.jpg

更多內(nèi)容

跨引擎游戲開(kāi)發(fā)框架

小游戲SDK整合框架

使用四叉樹(shù)優(yōu)化碰撞檢

游戲開(kāi)發(fā)中UI管理器的使用

小游戲開(kāi)發(fā)中如何優(yōu)雅的使用本地存檔

sdk接入整合，用一個(gè)變量切換不同渠道

CocosCreator之AssetBundle使用方案分享

CocosCreator之填色游戲的一種實(shí)現(xiàn)方案

一個(gè)可屏蔽長(zhǎng)短鏈接的網(wǎng)絡(luò)模塊

游戲開(kāi)發(fā)中的人工智能

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的android listview 去掉水波纹效果_CocosCreator之分层管理的ListView的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。