遊戲中自定義滑動列表(分片加載、自動吸附)

自定義滑動列表

需求描述: 遊戲中物品展示會存在自由滑動與吸附的需求, 並且在點擊時需要吸附到固定位置,此外列表中的item可能需要綁定各種複雜的事件,吸附的流程非常影響體驗,而內置的列表控件不支持吸附操作,不方便添加停滯後的事件觸發, 難以在滑動的過程中改變每個item的外觀表現。

 

實現方式: 實現自定義列表控件, 之前實現過相關的自定義列表控件, 具有基本吸附功能, 但是不支持item點擊事件,也不支持item慣性滑動與回彈, 並沒有實現內置列表的所有功能, 本次在物品展示界面需要通過滑動與吸附的方式以影片交卷的形式展示,要求具有滑動吸附, 定位切換,啓動與停滯事件響應,加上本身item點擊響應與長按提示邏輯,整個邏輯較爲複雜,因此需要對之前自定義滑動列表進行迭代。

       自定義列表實際是給定一個Node節點通過向Node節點添加子節點添加item, 通過給item 添加touch事件驅動列表的移動,通過ui的tick驅動吸附與慣性的滑動。


圖1 自定義列表的功能組成 

        列表的行爲表現,通過狀態機進行管理與實現,在不同狀態下定義不同速度衰減模式與表現,暫時將狀態分拖拽、點擊移動、自動吸附、慣性滑動、邊界回彈、停止,有狀態機負責不同狀態的切換。

        列表Item事件響應,內置監聽事件on_item_event 處理內部事件的響應, 通過on_item_event_wrapper對on_item_event 進行包裝同時響應外部傳進來的響應函數如下圖所示。


圖 2 列表內部與外部的事件監聽

       列表的複雜表現可以分解到狀態機的每個狀態進行維護,此外列表的item管理函數可以進行擴展, 擴展其分片加載的功能。分片加載主要是避免一次加載過多數據造成卡頓的問題,可通過監聽列表回彈或頂端底端事件進行內容加載,回彈時表示界面觸底反彈,此時在列表的首或尾添加新的item。


發佈了16 篇原創文章 · 獲贊 16 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章