當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

android listview 去掉水波纹效果_CocosCreator之分层管理的ListView

發(fā)布時(shí)間：2023/12/2 编程问答 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 android listview 去掉水波纹效果_CocosCreator之分层管理的ListView 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

前言

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

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

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

ListView的局限

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

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

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

ListView采用的原理

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

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

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

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

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

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

支持分層管理的ListView——GridLayerListView

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

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

同時(shí)在添加item的時(shí)候給item自定義了一個(gè)LIST屬性，用于保存子節(jié)點(diǎn)的引用，因?yàn)橐呀?jīng)不能通過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并沒有使用對象池，如果確實(shí)有需要可以在getItem函數(shù)中自己通過對象池獲取道具。

通過設(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大小就是可見區(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á)到了這樣的效果，還算過得去吧。

結(jié)語

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

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