Serie de clonación – Parte 2: Hacer una clonación de YouTube con Paging 3 | de Divyansh Saraswat | mayo 2022

Foto de Matt Hudson en UnsplashEn este tutorial, aprenderemos cómo mostrar el contenido de video de YouTube más popular en un RecyclerView usando la biblioteca de paginación. Consulte mi artículo anterior sobre el Clon de Google NoticiasParte 1 de esta serie. Esto es lo que intentamos implementar:Pantalla con botón para repetir solicitud de red

El truco principal es anular la función getRefreshKey en nuestra implementación de PagingSource para que actualice el parámetro pageToken en función de la respuesta de la API.

Consulte este paso del laboratorio de código de paginación básico para obtener una descripción general de la implementación de PagingSource.

Como notó, primero capturamos la página más cercana centrada alrededor de AnchorPosition, tomamos su prevKey y luego hacemos la llamada API con esa prevKey como el parámetro de consulta pageToken en la función getMostPopularVideos(). Finalmente, la respuesta de la API nos devuelve nextPageToken, que no es más que el pageToken actual o ‘Refresh Key’ ya que se accedió a esa página con su prevKey.

Todo esto se hace en un CoroutineScope separado inyectado con Hilt. En la API de datos de YouTube, obtener una miniatura/perfil de canal de YouTube requiere un punto final diferente, por lo que debemos realizar una solicitud de API separada para esta tarea. Vamos a crear una clase de datos que contenga un campo de elemento de video y un campo de cadena para la URL de la imagen del canal. Clase de datos VideoWithChannelModel(elemento de valor: Elemento, canal de valorUrl: Cadena)

Luego, la parte donde aplicamos transformaciones a Pager.flow en nuestro ViewModel:

• Use el operador de mapa como una transformación para el flujo ascendente, PagingData contiene como valor de salida.
• Aplique otra transformación de mapa a cada valor de salida (esto lo proporciona la biblioteca de paginación).
• Ejecute la llamada API asociada con el punto final de «canales» dentro de la función de mapa (porque el mapa es una función de suspensión).
• Almacene los campos item y channelUrl en la clase de datos y devuélvalos desde la función de mapa.
• Este flujo ahora es del tipo PagingData.

La implementación completa de VideoViewModel se ve así: Implementación del repositorio:

El PagingDataAdapter también debe contener elementos que sean del tipo VideoWithChannelModel

Hay dos formas así Cargando El estado de la interfaz de usuario se puede mostrar al usuario:

1. En la pantalla principal «recopilando» el loadStateFlow del PagingDataAdapter.
2. En la parte inferior de la lista cuando se cargan más elementos.

Por el momento nos estamos concentrando en la implementación de la segunda parte. Para hacer esto, creamos clases separadas que extienden RecyclerView.ViewHolder y LoadStateAdapter respectivamente, y creamos un archivo de diseño separado para el elemento Recycler View.

Sobre todo, necesitamos información sobre:

1. Cómo volver a intentar la solicitud de red (definiendo reintentar: () -> Unidad como argumento del constructor).
2. loadState como parámetro del método Bind (la biblioteca de paginación ya proporciona el tipo LoadState).

A continuación se muestra la implementación de los pasos discutidos anteriormente:

Como se indica en esta tarea por Kotlin Koans: Los objetos con el método de invocación () se pueden llamar como una función. Así que escribimos retry.invoke() en la lambda de setOnClickListener.

La clase Adapter que toma una función como argumento :Y finalmente el archivo de diseño: Listo, el único paso que queda es Observar/registrar el estado de carga en nuestra interfaz de usuario. Como puede ver en la implementación del fragmento, pasamos la función adapter.retry() como un argumento lambda en VideoLoadStateAdpapter.adapter.withLoadStateFooter() se usa cuando queremos cargar elementos solo al final de la lista. más información, consulte este paso del codelab de paginación avanzada.

ayudas para el aprendizaje:

1. Codelab básico para paginación
2. Laboratorio de código extendido de paginación
3. Parte 1 de la serie:

4. Publicación de blog para desarrolladores de Android: 5. Colección «segura» de flujos en la capa de la interfaz de usuario:

Enlace al repositorio GitHub de este proyecto: