Android性能優化之RecyclerView分頁加載組件功能詳解
引言
在Android應用中，列表有著舉足輕重的地位，幾乎所有的應用都有列表的身影，但是對於列表的交互體驗一直是一個大問題。在性能比較好的設備上，列表滑動幾乎看不出任何卡頓，但是放在低端機上，卡頓會比較明顯，而且列表中經常會伴隨圖片的加載，卡頓會更加嚴重，因此本章從手寫分頁加載組件入手，並對列表卡頓做出對應的優化
1 分頁加載組件
為什麼要分頁加載，通常列表數據存儲在服務端會超過100條，甚至上千條，如果服務端一次性返回，我們一次性接受直接加載，如果其中有圖片加載，肯定直接報OOM，應用崩潰，因此我們通常會跟服務端約定分頁的規則，服務端會按照頁碼從0開始給數據，或者在數據中返回下一頁對應的索引，當出發分頁加載時，就會拿到下一頁的頁碼請求新一頁的數據。
目前在JetPack組件中，Paging是使用比較多的一個分頁加載組件，但是Paging使用的場景有限，因為流的限制，導致隻能是單一數據源，而且數據不能斷，隻能全部加載進來，因此決定手寫一個分頁加載組件，適用多種場景。
1.1 功能定制
如果想要自己寫一個分頁加載庫，首先需要明白，分頁加載組件需要做什麼事？
對於RecyclerView來說，它的主要功能就是創建視圖並綁定數據，因此我們先定義分頁列表的基礎能力，綁定視圖和數據
interface IPagingList<T> {
fun bindView(context: Context,lifecycleOwner: LifecycleOwner, recyclerView: RecyclerView,adapter: PagingAdapter<T>,mode: ListMode) {}
fun bindData(model: List<BasePagingModel<T>>) {}
}
bindData：
bindData就不多說瞭，就是綁定數據，首先我們拿到的數據一定是一個列表數據，因為並不知道業務方需要展示的數據類型是啥樣的，因此需要泛型修飾，那麼BasePagingModel是幹什麼的呢？
open class BasePagingModel<T>(
var pageCount: String = "", //頁碼
var type: Int = 1, //分頁類型 1 帶日期 2 普通列表
var time: String = "", //如果是帶日期的model，那麼需要傳入此值
var itemData: T? = null
)
首先BasePagingModel是分頁列表中數據的基類，其中存儲的元素包括pageCount，代表傳進來的數據列表是哪一頁，type用來區分列表數據類型，time可以代表當前數據在服務端的時間（主要場景就是列表中數據展示需要帶時間，並根據某一天進行數據聚合），itemData代表業務層需要處理的數據。
bindView：
對於RecyclerView來說，創建視圖、展示數據需要適配器，因此這裡傳入瞭RecyclerView還有通用的適配器PagingAdapter
abstract class PagingAdapter<T> : RecyclerView.Adapter<RecyclerView.ViewHolder>() {
private var datas: List<BasePagingModel<T>>? = null
private var maps: MutableMap<String, MutableList<BasePagingModel<T>>>? = null
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
return buildBusinessHolder(parent, viewType)
}
override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
if (datas != null) {
bindBusinessData(holder, position, datas)
} else if (maps != null) {
bindBusinessMapData(holder, position, maps)
}
}
abstract fun getHolderWidth(context: Context):Int
override fun getItemCount(): Int {
return if (datas != null) datas!!.size else 0
}
open fun bindBusinessMapData(
holder: RecyclerView.ViewHolder,
position: Int,
maps: MutableMap<String, MutableList<BasePagingModel<T>>>?
) {
}
open fun bindBusinessData(
holder: RecyclerView.ViewHolder,
position: Int,
datas: List<BasePagingModel<T>>?
) {
}
abstract fun buildBusinessHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder
fun setPagingData(datas: List<BasePagingModel<T>>) {
this.datas = datas
notifyDataSetChanged()
}
fun setPagingMapData(maps: MutableMap<String, MutableList<BasePagingModel<T>>>) {
this.maps = maps
notifyDataSetChanged()
}
}
這一章，我們先介紹使用場景比較多的單數據列表
PagingAdapter是一個抽象類，攜帶的數據同樣是業務方需要處理的數據，是一個泛型，創建視圖方法buildBusinessHolder交給業務方實現，這裡我們關註兩個數據相關的方法 bindBusinessData和setPagingData，當調用setPagingData方法時，將處理好的數據列表發進來，然後調用notifyDataSetChanged方法刷新列表，這個時候會調用bindBusinessData將列表中的數據綁定並展示出來。
這裡我們還需要關註一個方法，這個方法業務方必須要實現，這個方法有什麼作用呢？
abstract fun getHolderWidth(context: Context):Int
這個方法用於返回列表中每個ItemView的尺寸寬度，因為在分頁組件中會判斷當前列表可見的ItemView有多少個。這裡大傢可能會有疑問，RecyclerView的LayoutManager不是有對應的api嗎，像
findFirstVisibleItemPosition() findLastVisibleItemPosition() findFirstCompletelyVisibleItemPosition() findLastCompletelyVisibleItemPosition()
為什麼不用呢？因為我們的分頁組件是要兼容多種視圖形式的，雖然我們今天講到的普通列表用這個是沒有問題的，但是有些視圖類型是不能兼容這個api的，後續會介紹。
1.2 手寫分頁列表
先把第一版的代碼貼出來，有個完整的體系
class PagingList<T> : IPagingList<T>, IModelProcess<T>, LifecycleEventObserver {
private var mTotalScroll = 0
private var mCallback: IPagingCallback? = null
private var currentPageIndex = ""
//模式
private var mode: ListMode = ListMode.DATE
private var adapter: PagingAdapter<T>? = null
//支持的類型 普通列表
private val dateMap: MutableMap<String, MutableList<BasePagingModel<T>>> by lazy {
mutableMapOf()
}
private val simpleList: MutableList<BasePagingModel<T>> by lazy {
mutableListOf()
}
override fun bindView(
context: Context,
lifecycleOwner: LifecycleOwner,
recyclerView: RecyclerView,
adapter: PagingAdapter<T>,
mode: ListMode
) {
this.mode = mode
this.adapter = adapter
recyclerView.adapter = adapter
recyclerView.layoutManager =
LinearLayoutManager(context, LinearLayoutManager.HORIZONTAL, false)
addRecyclerListener(recyclerView)
lifecycleOwner.lifecycle.addObserver(this)
}
private fun addRecyclerListener(recyclerView: RecyclerView) {
recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
super.onScrollStateChanged(recyclerView, newState)
if (newState == RecyclerView.SCROLL_STATE_IDLE) {
if (!recyclerView.canScrollHorizontally(1) && currentPageIndex == "-1" && mTotalScroll > 0) {
//滑動到底部
mCallback?.scrollEnd()
}
//獲取可見item的個數
val visibleCount = getVisibleItemCount(recyclerView.context, recyclerView)
if (recyclerView.childCount > 0 && visibleCount >= (getListCount(mode) ?: 0)) {
if (currentPageIndex != "-1") {
//請求下一頁數據
mCallback?.scrollRefresh()
}
}
} else {
//暫停刷新
mCallback?.scrolling()
}
}
override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
super.onScrolled(recyclerView, dx, dy)
if (!recyclerView.canScrollHorizontally(1) && currentPageIndex == "-1" && mTotalScroll > 0) {
//滑動到底部
mCallback?.scrollEnd()
}
mTotalScroll += dx
//滑動超出2屏
// binding.ivBackFirst.visibility =
// if (mTotalScroll > ScreenUtils.getScreenWidth(requireContext()) * 2) View.VISIBLE else View.GONE
}
})
}
override fun bindData(model: List<BasePagingModel<T>>) {
//處理數據
dealPagingModel(model)
//adapter刷新數據
if (mode == ListMode.DATE) {
adapter?.setPagingMapData(dateMap)
} else {
adapter?.setPagingData(simpleList)
}
}
fun setScrollListener(callback: IPagingCallback) {
this.mCallback = callback
}
override fun onStateChanged(source: LifecycleOwner, event: Lifecycle.Event) {
if (event == Lifecycle.Event.ON_RESUME) {
//TODO 加載圖片
// Glide.with(requireContext()).resumeRequests()
} else if (event == Lifecycle.Event.ON_PAUSE) {
//TODO 停止加載圖片
} else if (event == Lifecycle.Event.ON_DESTROY) {
//TODO 頁面銷毀不會加載圖片
}
}
/**
* 獲取可見的item個數
*/
private fun getVisibleItemCount(context: Context, recyclerView: RecyclerView): Int {
var totalCount = 0
//首屏假設全部占滿
totalCount +=
ScreenUtils.getScreenWidth(recyclerView.context) / adapter?.getHolderWidth(context)!!
totalCount += mTotalScroll / adapter?.getHolderWidth(context)!!
return (totalCount + 1)
}
override fun getTotalCount(): Int? {
return getListCount(mode)
}
override fun dealPagingModel(data: List<BasePagingModel<T>>) {
this.currentPageIndex = updateCurrentPageIndex(data)
if (mode == ListMode.DATE) {
data.forEach { model ->
val time = DateFormatterUtils.check(model.time)
if (dateMap.containsKey(time)) {
model.itemData?.let {
dateMap[time]?.add(model)
}
} else {
val list = mutableListOf<BasePagingModel<T>>()
list.add(model)
dateMap[time] = list
}
}
} else {
simpleList.addAll(data)
}
}
private fun updateCurrentPageIndex(data: List<BasePagingModel<T>>): String {
if (data.isNotEmpty()) {
return data[0].pageCount
}
return "-1"
}
private fun getListCount(mode: ListMode): Int? {
var count = 0
if (mode == ListMode.DATE) {
dateMap.keys.forEach { key ->
//獲取key下的元素個數
count += dateMap[key]?.size ?: 0
}
} else {
count = simpleList.size
}
return count
}
}
首先，PagingList實現瞭IPagingList接口，我們先看實現，在bindView方法中，其實就是給RecyclerView設置瞭適配器，然後註冊瞭RecyclerView的滑動監聽，我們看下監聽器中的主要實現。
onScrollStateChanged方法主要用於監聽列表是否在滑動，當列表的狀態為SCROLL_STATE_IDLE時，代表列表停止瞭滑動，這裡做瞭兩件事：
（1）首先判斷列表是否滑動到瞭底部
if (!recyclerView.canScrollHorizontally(1) && currentPageIndex == "-1" && mTotalScroll > 0) {
//滑動到底部
mCallback?.scrollEnd()
}
這裡需要滿足三個條件：recyclerView.canScrollHorizontally(1)如果返回瞭false，那麼代表列表不能繼續滑動；還有就是會判斷currentPageIndex是否是最後一頁，如果等於-1那麼就是最後一頁，同樣需要判斷滑動的距離，綜合來說就是【如果列表滑動到瞭最後一頁而且不能再繼續滑動瞭，那麼就是到底瞭】，這裡可以展示尾部的到底UI。
（2）判斷是否能夠觸發分頁加載
/**
* 獲取可見的item個數
*/
private fun getVisibleItemCount(context: Context, recyclerView: RecyclerView): Int {
var totalCount = 0
//首屏假設全部占滿
totalCount +=
ScreenUtils.getScreenWidth(recyclerView.context) / adapter?.getHolderWidth(context)!!
totalCount += mTotalScroll / adapter?.getHolderWidth(context)!!
return (totalCount + 1)
}
首先這裡會判斷展示瞭多少ItemView，之前提到的適配器中的getHolderWidth這裡就用到瞭，首先我們會假設首屏全部占滿瞭ItemView，然後根據列表滑動的距離，判斷後續有多少ItemView展示出來，最終返回結果。
我們先不看下面的邏輯，因為分頁加載涉及到瞭數據的處理，因此我們先看下bindData的實現
override fun bindData(model: List<BasePagingModel<T>>) {
//處理數據
dealPagingModel(model)
//adapter刷新數據
if (mode == ListMode.DATE) {
adapter?.setPagingMapData(dateMap)
} else {
adapter?.setPagingData(simpleList)
}
}
在調用bindData時會傳入一頁的數據，dealPagingModel方法用於處理數據，首先獲取當前數據的頁碼，用於判斷是否需要繼續分頁加載。
override fun dealPagingModel(data: List<BasePagingModel<T>>) {
this.currentPageIndex = updateCurrentPageIndex(data)
if (mode == ListMode.DATE) {
data.forEach { model ->
val time = DateFormatterUtils.check(model.time)
if (dateMap.containsKey(time)) {
model.itemData?.let {
dateMap[time]?.add(model)
}
} else {
val list = mutableListOf<BasePagingModel<T>>()
list.add(model)
dateMap[time] = list
}
}
} else {
simpleList.addAll(data)
}
}
剩下的工作用於組裝數據，simpleList用於存儲全部的列表數據，每次傳入一頁數據，都會存在這個集合中。處理完數據之後，將數據塞進adapter，用於刷新數據。
然後我們回到前面，我們在拿到瞭可見的ItemView的個數之後，首先會判斷recyclerView展示的ItemView個數，如果等於0，那麼就說明沒有數據，就不需要觸發分頁加載。
if (recyclerView.childCount > 0 && visibleCount >= (getListCount(mode) ?: 0)) {
if (currentPageIndex != "-1") {
//請求下一頁數據
mCallback?.scrollRefresh()
}
}
假設每頁展示10條數據，這個時候getListCount方法返回的就是總的數據個數（10），如果visibleCount超過瞭List的總個數，那麼就需要觸發分頁加載，因為之前我們提到，最後一頁的index就是-1，所以這裡判斷如果是最後一頁，就不需要分頁加載瞭。
1.3 生命周期管理
在PagingList中，我們實現瞭LifecycleEventObserver接口，這裡的作用是什麼呢？
就是我們知道，在列表中經常會有圖片的加載，那麼在圖片加載時如果滑動列表，那麼勢必會產生卡頓，因此我們在滑動的過程中不會去加載圖片，而是在滑動停止時，重新加載，這個優化體驗是沒有問題，用戶不會關註滑動時的狀態。
那麼這裡會存在一個問題，例如我們在滑動的過程中退出到後臺，這個時候列表滑動停止時加載圖片，可能存在上下文找不到的場景導致應用崩潰，因此我們傳入生命周期的目的在於：讓列表具備感知生命周期的能力，當列表處在不可見的狀態時，不能進行多餘的網絡請求。
2022-09-04 15:41:43.541 2763-2763/com.lay.paginglist E/MainActivity: scrolling–
2022-09-04 15:41:43.651 2763-2763/com.lay.paginglist E/MainActivity: scrolling–
2022-09-04 15:41:43.661 2763-2763/com.lay.paginglist E/MainActivity: scrollRefresh–
2022-09-04 15:41:43.668 2763-2763/com.lay.paginglist E/MyAdapter: bindBusinessData —
2022-09-04 15:41:43.674 2763-2763/com.lay.paginglist E/MyAdapter: bindBusinessData —
2022-09-04 15:41:43.877 2763-2763/com.lay.paginglist E/MainActivity: scrolling–
2022-09-04 15:41:43.885 2763-2763/com.lay.paginglist E/MyAdapter: bindBusinessData —
2022-09-04 15:41:43.950 2763-2763/com.lay.paginglist E/MainActivity: scrolling–
2022-09-04 15:41:44.101 2763-2763/com.lay.paginglist E/MyAdapter: bindBusinessData —
2022-09-04 15:41:44.175 2763-2763/com.lay.paginglist E/MainActivity: scrolling–
2022-09-04 15:41:44.318 2763-2763/com.lay.paginglist E/MainActivity: scrolling–
2022-09-04 15:41:44.467 2763-2763/com.lay.paginglist E/MyAdapter: bindBusinessData —
2022-09-04 15:41:44.475 2763-2763/com.lay.paginglist E/MainActivity: scrolling–
2022-09-04 15:41:45.188 2763-2777/com.lay.paginglist I/.lay.paginglis: WaitForGcToComplete blocked RunEmptyCheckpoint on ProfileSaver for 12.247ms
2022-09-04 15:41:47.008 2763-2763/com.lay.paginglist E/MainActivity: scrolling–
2022-09-04 15:41:47.099 2763-2763/com.lay.paginglist E/MainActivity: scrolling–
2022-09-04 15:41:47.186 2763-2763/com.lay.paginglist E/MyAdapter: bindBusinessData —
2022-09-04 15:41:47.322 2763-2763/com.lay.paginglist E/MainActivity: scrolling–
2022-09-04 15:41:47.403 2763-2763/com.lay.paginglist E/MainActivity: scrolling–
2022-09-04 15:41:47.404 2763-2763/com.lay.paginglist E/MyAdapter: bindBusinessData —
2022-09-04 15:41:47.514 2763-2763/com.lay.paginglist E/MyAdapter: bindBusinessData —
2022-09-04 15:41:47.606 2763-2763/com.lay.paginglist E/MainActivity: scrolling–
2022-09-04 15:41:47.650 2763-2763/com.lay.paginglist E/MyAdapter: bindBusinessData —
2022-09-04 15:41:47.683 2763-2763/com.lay.paginglist E/MainActivity: scrolling–
2022-09-04 15:41:47.781 2763-2763/com.lay.paginglist E/MyAdapter: bindBusinessData —
2022-09-04 15:41:47.889 2763-2763/com.lay.paginglist E/MainActivity: scrolling–
2022-09-04 15:41:47.950 2763-2763/com.lay.paginglist E/MainActivity: scrolling–
2022-09-04 15:41:47.963 2763-2763/com.lay.paginglist E/MyAdapter: bindBusinessData —
2022-09-04 15:41:48.156 2763-2763/com.lay.paginglist E/MainActivity: scrolling–
2022-09-04 15:41:48.182 2763-2763/com.lay.paginglist E/MyAdapter: bindBusinessData —
2022-09-04 15:41:48.231 2763-2763/com.lay.paginglist E/MainActivity: scrolling–
2022-09-04 15:41:48.489 2763-2763/com.lay.paginglist E/MainActivity: scrolling–
2022-09-04 15:41:48.533 2763-2763/com.lay.paginglist E/MainActivity: scrolling–
2022-09-04 15:41:48.593 2763-2763/com.lay.paginglist E/MainActivity: scrollEnd–
我們可以看下具體的實現效果就是，當觸發分頁加載時，scrollRefresh會被回調，這裡可以進行網絡請求，拿到數據之後再次調用bindData方法，然後繼續往下滑動，當滑動到最後一頁時，scrollEnd被回調，具體的使用，可以在demo中查看。
2 github
之前有小夥伴提到這個事情，希望在github上放出源碼，所以就做瞭 github.com/LLLLLaaayyy…
大傢可以在v1.0分支查看源碼，在app模塊中有一個demo大傢可以看具體的使用方式，分頁列表的代碼在paging模塊中
以上就是Android性能優化之RecyclerView分頁加載組件功能詳解的詳細內容，更多關於Android RecyclerView分頁加載的資料請關註WalkonNet其它相關文章！
推薦閱讀：
- Android Filterable實現Recyclerview篩選功能的示例代碼
- Android MVVM架構實現RecyclerView列表詳解流程
- Android實現的RecyclerView適配器
- Android入門教程之RecyclerView的具體使用詳解
- RecyclerView實現側滑和網絡斷點續傳