前言

進入公眾號回覆listview即可獲得demo的git地址。

1. 之前寫的一篇文章《Creator之ScrollView那些事》中提到了官方Demo中提供的ListViewCtl,只是實現了縱向滑動，沒有實現橫向滑動。並且建議官方可以把功能做全然後放入元件庫中供開發者使用。
2. 然後有個牛逼大神說這個ListView不ok。要我對自己的公眾號內容負責。我還以為有什麼嚴重的bug，其實是打斷了合批操作。對於官方提供的ListViewCtr的操作方式肯定會打斷合批的 !不過對於一些簡單的需求，比如我上次文章中的這個截圖。
   
   
   
   這樣的列表需要合批嗎？我的需求就是少建立幾個節點就可以了。所以我覺得ok不ok還是要看需求吧！為什麼tableview呼聲那麼高，而Laya也在官方元件中支援了ListView，已經是很好的說明瞭。

ListView的侷限

1. 首先，這個ListView是有侷限的，它直接將Item放入了content中，肯定會打斷合批操作；
   
   
   
   如果你有一個多列多行，並且item非常複雜的需求，那麼用這個ListView肯定是不合適的。就好比你用一把殺雞的刀去殺一頭牛，不悲劇才怪！所以大家在看到別人分享東西的時候建議最好不要拿來主義，而是經過分析後決定用還是不用，我相信作為程式猿，這點判斷能力還是有的！

2. 其次 ，這個ListView不支援網格顯示。如果想要多行或者多列顯示，需要自己在一個Item中排列好。然後自己設定每個道具的顯示與隱藏，所以對於有多列顯示需求的情況還是比較複雜的。

那麼我先說說ListView採用的原理，然後再說說如何改進吧。

ListView採用的原理

1. 根據可顯示區域的寬或者高計算出需要建立的道具的數量。然後多加一行或者一列，避免滑動的時候顯示不自然。
   
   
2. 滑動時，將離開可見區域的道具放到與滑動方向相反的一端重複使用。
   
   
3. 原理其實就這麼兩點，目的就是少建立節點。

支援網格顯示的ListView——GridListView

1. 首先我為之前的ListView增加了網格顯示能力，程式碼中通過給定的spaceX和spaceY 結合可顯示區域的寬或者高計算可顯示的列數或者行數
   
   
2. 如果只是做了網格顯示能力而不做分層管理其實一樣有侷限1。雖然比你直接把道具放入content中好很多，但是dc依然很高。

支援分層管理的ListView——GridLayerListView

1. GridLayerListView 是繼承了GridListView，重寫了設定座標和新增節點的方法。
   
   
   
   
2. 這裡的item依然被新增到了content中，只是此時的它已經沒有子節點了，只是用來判斷是否離開顯示區域而存在的。
3. 同時在新增item的時候給item自定義了一個LIST屬性，用於儲存子節點的引用，因為已經不能通過item的children陣列獲得子節點了。
4. 為每個子節點自定義一個屬性INIT_POS，儲存本地座標，更新位置的時候會用到。
   
   
5. 為了保證所有節點顯示位置的正確性，程式碼中直接移除節點中存在的widget元件。
   
   
6. 當你將一個ScrollView拖到介面上時，只需要調整ScrollView和view的寬高，程式碼中直接刪除了預設的item節點
   
   
7. GridLayerListView並沒有使用物件池，如果確實有需要可以在getItem函式中自己通過物件池獲取道具。
   
   
8. 通過設定ScrollView的Horizontal 和 Vertical 改變滾動方向，同時只支援一個方向滾動。
   
   

使用方式

1. 將一個ScrollView拖到介面中，掛上GridLayerListView元件
   
   
2. 定義一個處理邏輯的元件掛到介面上，並在邏輯元件中宣告好使用的變數和函式，設定好GridLayerListView的引數。（其實跟ListViiew的使用方式是一樣的）
   
   
3. 設定ScrollView 和View 的寬高，注意尤其是View的寬高，因為View大小就是可見區域，程式碼中會根據View的寬高判斷應該顯示的列數或者行數。注意列數或者行數等於寬度或者高度/（item的寬度或者高度+橫向間距或者縱向間距）
   
   

使用效果

為了看優化的效果，用到的兩個紋理都去掉了Packable選項

1. 不分層的GridListView dc=64
   
   
   
   在不分層管理的情況下，道具中的label是否設定為Char模式dc都是一樣的。
2. 分層+Label不為Char模式 dc=23
   
   
3. 分層+Label為Char模式 dc=9
   
   
4. 道具的預製體結構
   
   
5. 道具使用情況
   
   
   
   根據後臺輸出可以看出，一共有35個需要顯示的道具，實際上只建立了3 x5 = 15個道具就搞定了。
6. dc 從64 減少到9，依然用上了ListView少建立，重複利用的原理，只是加上分層管，達到了這樣的效果，還算過得去吧。

結語

1. 以上是我在之前的ListView基礎上添加了網格顯示，分層管理等能力後寫出來的新元件，我給它起名叫GridLayerListView，是因為它是一個支援網格顯示，分層管理節點的ListView。一個既可以殺雞也可以殺牛的刀。就是對ListView情有獨鍾，沒辦法了。
2. 我並沒有說這個是最優的方案，也不保證沒有bug（我還不是一個敢說自己寫的東西沒bug的牛人），思想僅供參考，大神可以繞道。如果你想將dc降到更低，那麼你還需要做一些其他的優化。建議閱讀文弱書生陳皮皮的《Cocos Creator 效能優化：DrawCall》

進入公眾號回覆listview即可獲得demo的git地址。

歡迎掃碼關注公眾號《微笑遊戲》，瀏覽更多內容。如果您覺得文章還可以，點贊、在看、分享、贊助都是對我最大的鼓勵，在下將感激不盡。

歡迎掃碼關注公眾號《微笑遊戲》，瀏覽更多內容。