【Android Jetpack】Paging3使用方法介绍

逃离我推掉我的手 2022-11-21 09:47 433阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70_pic_center]

--------------------

**Jetpack Paging**提供了列表中分页数据加载的解决方案，已经被广泛熟知和使用，目前这个库升级到了3.0版本。Paging3 基于Kotlin协程进行了重写，兼容Flow、Rxjava、LiveData等多种API方式。

本文，我们将基于一个api请求的Sample，学习一下Paging3的使用。  
我们使用`https://reqres.in/`提供的mock接口：

*  request：`https://reqres.in/api/users?page=1`
 *  response：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70_pic_center 1]

Sample代码结构如下:  
![在这里插入图片描述][20201031120941972.png_pic_left]

# Step 01. Gradle dependencies #

--------------------

首先添加paging3的gradle依赖

implementation "androidx.paging:paging-runtime:{latest-version}"

sample中借助retrofit和moshi进行数据请求和反序列化

implementation "com.squareup.retrofit2:retrofit:{latest-version}"
    implementation "com.squareup.retrofit2:converter-moshi:{latest-version}"
    implementation "com.squareup.moshi:moshi-kotlin:{latest-version}"

使用ViewModel实现MVVM

implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:{latest-version}"

# Step 02. ApiService & Retrifit #

--------------------

定义APIService以及Retrofit实例：

interface APIService { 
    
        @GET("api/users")
        suspend fun getListData(@Query("page") pageNumber: Int): Response<ApiResponse>
    
        companion object { 
            
            private val moshi = Moshi.Builder()
                .add(KotlinJsonAdapterFactory())
                .build()
    
            fun getApiService() = Retrofit.Builder()
                .baseUrl("https://reqres.in/")
                .addConverterFactory(MoshiConverterFactory.create(moshi))
                .build()
                .create(APIService::class.java)
        }
    }

定义挂起函数`getListData`可以在协程中异步进行分页请求；使用moshi作为反序列化工具

# Step 03. Data Structure #

--------------------

根据API的返回结果创建JSON IDL：

{ 
        "page": 1,
        "per_page": 6,
        "total": 12,
        "total_pages": 2,
        "data": [
        { 
            "id": 1,
            "email": "george.bluth@reqres.in",
            "first_name": "George",
            "last_name": "Bluth",
            "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg"
        },
        { 
            "id": 2,
            "email": "janet.weaver@reqres.in",
            "first_name": "Janet",
            "last_name": "Weaver",
            "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"
        }
        ],
        "ad": { 
        "company": "StatusCode Weekly",
        "url": "http://statuscode.org/",
        "text": "A weekly newsletter focusing on software development, infrastructure, the server, performance, and the stack end of things."
    }}

根据JSON定义data class

data class ApiResponse(
        @Json(name = "ad")
        val ad: Ad,
        @Json(name = "data")
        val myData: List<Data>,
        @Json(name = "page")
        val page: Int,
        @Json(name = "per_page")
        val perPage: Int,
        @Json(name = "total")
        val total: Int,
        @Json(name = "total_pages")
        val totalPages: Int
    )
    
    data class Ad(
        @Json(name = "company")
        val company: String,
        @Json(name = "text")
        val text: String,
        @Json(name = "url")
        val url: String
    )
    
    data class Data(
        @Json(name = "avatar")
        val avatar: String,
        @Json(name = "email")
        val email: String,
        @Json(name = "first_name")
        val firstName: String,
        @Json(name = "id")
        val id: Int,
        @Json(name = "last_name")
        val lastName: String
    )

# Step 04. PagingSource #

--------------------

实现`PagingSource`接口，重写suspend方法，通过APIService进行API请求

class PostDataSource(private val apiService: APIService) : PagingSource<Int, Data>() { 
    
        override suspend fun load(params: LoadParams<Int>): LoadResult<Int, Data> { 
           
        }
    
    }

`PagingSource`的两个泛型参数分别是表示当前请求第几页的`Int`，以及请求的数据类型`Data`

suspend函数load的具体实现：

override suspend fun load(params: LoadParams<Int>): LoadResult<Int, Data> { 
        try { 
            val currentLoadingPageKey = params.key ?: 1
            val response = apiService.getListData(currentLoadingPageKey)
            val responseData = mutableListOf<Data>()
            val data = response.body()?.myData ?: emptyList()
            responseData.addAll(data)
    
            val prevKey = if (currentLoadingPageKey == 1) null else currentLoadingPageKey - 1
    
            return LoadResult.Page(
                data = responseData,
                prevKey = prevKey,
                nextKey = currentLoadingPageKey.plus(1)
            )
        } catch (e: Exception) { 
            return LoadResult.Error(e)
        }
    }

`param.key`为空时，默认加载第1页数据。  
请求成功使用`LoadResult.Page`返回分页数据，`prevKey` 和 `nextKey` 分别代表前一页和后一页的索引。  
请求失败使用`LoadResult.Error`返回错误状态

# Step 05. ViewModel #

--------------------

定义`ViewModel`，并在ViewModel中创建Pager实例

class MainViewModel(private val apiService: APIService) : ViewModel() { 
    	val listData = Pager(PagingConfig(pageSize = 6)) { 
       	 	PostDataSource(apiService)
    	}.flow.cachedIn(viewModelScope)
    }

*  `PagingConfig`用来对Pager进行配置，`pageSize`表示每页加载Item的数量，这个size一般推荐要超出一屏显示的item数量。
 *  `.flow`表示结果由LiveData转为Flow
 *  `cachedIn`表示将结果缓存到`viewModelScope`，在ViewModel的onClear之前将一直存在

# Step 06. Activity #

--------------------

定义Activity，并创建ViewModel

class MainActivity : AppCompatActivity() { 
    
        lateinit var viewModel: MainViewModel
        lateinit var mainListAdapter: MainListAdapter
    
        override fun onCreate(savedInstanceState: Bundle?) { 
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
            setupViewModel()
            setupList()
            setupView()
        }
    
        private fun setupView() { 
            lifecycleScope.launch { 
                viewModel.listData.collect { 
                    mainListAdapter.submitData(it)
                }
            }
        }
    
        private fun setupList() { 
            mainListAdapter = MainListAdapter()
            recyclerView.apply { 
                layoutManager = LinearLayoutManager(this)
                adapter = mainListAdapter
            }
        }
    
        private fun setupViewModel() { 
            viewModel =
                ViewModelProvider(
                    this,
                 MainViewModelFactory(APIService.getApiService())
                )[MainViewModel::class.java]
        }
    }

ViewModel中需要传入ApiService，所以需要自定义`ViewModelFactory`

class MainViewModelFactory(private val apiService: APIService) : ViewModelProvider.Factory { 
    
        override fun <T : ViewModel?> create(modelClass: Class<T>): T { 
            if (modelClass.isAssignableFrom(MainViewModel::class.java)) { 
                return MainViewModel(apiService) as T
            }
            throw IllegalArgumentException("Unknown ViewModel class")
        }
    }

`setupList`中创建RecyclerView.Adapter， `setupView`通过`viewModel.listData`加载数据后提交RecyclerView.Adapter显示。

# Step 07. PagingDataAdapter #

--------------------

更新MainListAdapter，让其继承`PagingDataAdapter`，PagingDataAdapter将Data与ViewHolder进行绑定

class MainListAdapter : PagingDataAdapter<Data, MainListAdapter.ViewHolder>(DataDifferntiator) { 
    
        class ViewHolder(view: View) : RecyclerView.ViewHolder(view)
    
        override fun onBindViewHolder(holder: ViewHolder, position: Int) { 
            holder.itemView.textViewName.text =
                "${ getItem(position)?.firstName} ${ getItem(position)?.lastName}"
            holder.itemView.textViewEmail.text = getItem(position)?.email
    
        }
    
    
        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder { 
            return ViewHolder(
                LayoutInflater
                    .from(parent.context)
                    .inflate(R.layout.list_item, parent, false)
            )
        }
    
        object DataDifferntiator : DiffUtil.ItemCallback<Data>() { 
    
            override fun areItemsTheSame(oldItem: Data, newItem: Data): Boolean { 
                return oldItem.id == newItem.id
            }
    
            override fun areContentsTheSame(oldItem: Data, newItem: Data): Boolean { 
                return oldItem == newItem
            }
        }
    
    }

Paging接收一个`DiffUtil`的Callback处理Item的diff，这里定一个`DataDifferntiator`，用于PagingDataAdapter的构造。

ViewHolder的layout定义如下：

至此，我们已经可以分页加载的数据显示在Activity中了，接下来会进一步优化显示效果。

# Step 08. LoadingState #

--------------------

列表加载时，经常需要显示loading状态，可以通过`addLoadStateListener`实现

mainListAdapter.addLoadStateListener { 
        if (it.refresh == LoadState.Loading) { 
            // show progress view
        } else { 
            //hide progress view
        }
    }

# Step 09. Header & Footer #

--------------------

创建`HeaderFooterAdapter`继承自`LoadStateAdapter`，onBindViewHolder中可以返回`LoadState`

class HeaderFooterAdapter() : LoadStateAdapter<HeaderFooterAdapter.ViewHolder>() { 
    
        override fun onBindViewHolder(holder: LoadStateViewHolder, loadState: LoadState) { 
    
            if (loadState == LoadState.Loading) { 
                //show progress viewe
            } else //hide the view
           
        }
    
        override fun onCreateViewHolder(parent: ViewGroup, loadState: LoadState): LoadStateViewHolder { 
            return LoadStateViewHolder(
               //layout file
            )
        }
    
        class ViewHolder(private val view: View) : RecyclerView.ViewHolder(view)
    }

通过`withLoadStateHeaderAndFooter`将其添加到MainListAdapter

mainListAdapter.withLoadStateHeaderAndFooter(
        header = HeaderFooterAdapter(),
        footer = HeaderFooterAdapter()
    )

也可以单独只设置hader或footer

// only footer
    mainListAdapter.withLoadStateFooter(
        HeaderFooterAdapter()
    }
    
    // only header
    mainListAdapter.withLoadStateHeader(
       HeaderFooterAdapter()
    )

# Others：RxJava #

--------------------

如果你不习惯使用Coroutine或者Flow，Paging3同样支持RxJava

添加RxJava的相关依赖

implementation "androidx.paging:paging-rxjava2:{latest-version}"
    implementation "com.squareup.retrofit2:adapter-rxjava2:{latest-version}"

使用`RxPagingSource`替代PagingSource

class PostDataSource(private val apiService: APIService) : RxPagingSource<Int, Data>() { 
    
    }

load改为返回Single接口的普通方法

override fun loadSingle(params: LoadParams<Int>): Single<LoadResult<Int, Data>> { 
    
    }

ApiService接口也改为Single

interface APIService { 
    
        @GET("api/users")
         fun getListData(@Query("page") pageNumber: Int): Single<ApiResponse>
    
        companion object { 
    
            private val moshi = Moshi.Builder()
                .add(KotlinJsonAdapterFactory())
                .build()
    
            fun getApiService() = Retrofit.Builder()
                .baseUrl("https://reqres.in/")
                .addCallAdapterFactory(RxJava2CallAdapterFactory.create())
                .addConverterFactory(MoshiConverterFactory.create(moshi))
                .build()
                .create(APIService::class.java)
        }
    }

配置Pager时，使用`.observable`将LiveData转为RxJava

val listData = Pager(PagingConfig(pageSize = 6)) { 
        PostDataSource(apiService)
    }.observable.cachedIn(viewModelScope)

在Activity中请求数据

viewModel.listData.subscribe {  
        mainListAdapter.submitData(lifecycle,it)
    }

# Conclusion #

--------------------

本文通过Sample介绍了Paging3的基本使用方法。Paging3基于Coroutine进行了重写，推荐使用Flow作为首先的数据请求方式，同时它保留了对RxJava的支持，所以尽管放心将项目中的Paging升级到最新版本吧。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/f7c1403b027e4913ba4ffc9cb6f855d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/2020103112085384.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh,size_16,color_FFFFFF,t_70#pic_center
[20201031120941972.png_pic_left]: https://img-blog.csdnimg.cn/20201031120941972.png#pic_left