Android

RecyclerView con múltiples vistas / ViewHolders en Android

Los elementos dentro de un RecyclerView de Android son del mismo tipo y tienen la misma apariencia; pero en ocasiones vamos a necesitar mostrar distintos elementos o vistas dentro del mismo RecyclerView.

Por ejemplo, en una lista de elementos tal vez solo mostramos algunos, y al final una opción de “Ver más” o “Ver todos”.

Para lograr esto solo tenemos que modificar el adaptador

Diferentes views en RecyclerView con Android

Vamos a ver cómo insertar distintos elementos en un RecyclerView.

Podemos insertarlos al inicio, al final o en cualquier forma, es decir, podemos definir la manera de inserción a través de una función.

ViewHolders

Comenzamos definiendo los ViewHolders, pues vamos a usar uno u otro en la lista:

See the gist on github.

Tengo dos ViewHolders, el contenido de los mismos no importa, solo que uno va a mostrar la descripción de un gasto y el otro va a mostrar un elemento que diga “Ver más”

getItemViewType

Ahora vamos a definir la función que se encarga de decir cuál vista vamos a mostrar.

Tenemos que regresar un entero, recibimos la posición del elemento de la lista. Yo solo regreso un valor u otro, pero en la práctica puede definirse cualquier rango de valores.

See the gist on github.

Lo que hago es que si el elemento es el último (ya que position es la longitud de mi lista menos uno) regreso una constante llamada TIPO_VER_MAS, y si no, TIPO_NORMAL.

Las constantes son solo constantes, las puse para no escribir números sin nombre.

De esta manera, al final de la lista se mostrará un elemento que dirá “Ver todos los gastos”

onCreateViewHolder

Ya definimos el método que va a indicar cuál vista usar, y también definimos ambos ViewHolders.

Ahora vamos a definir la función que crea el ViewHolder dependiendo del tipo.

See the gist on github.

Si el tipo es TIPO_VER_MAS entonces regresamos el layout de fila_ver_mas, con el ViewHolder de ver más.

Si no (y por defecto) regresamos la fila que mostrará los detalles del gasto, en el ViewHolder de ViewHolderGasto.

onBindViewHolder

Ahora veamos la última parte que se encarga de poner los datos a la vista que va dentro del RecyclerView:

See the gist on github.

Aquí es en donde dibujamos los elementos, tenemos acceso completo a la vista o mejor dicho, al layout.

Poniendo todo junto

El código completo del adaptador (junto con las constantes para los tipos) queda como se ve a continuación:

See the gist on github.

Listener

El listener es otro tema, pero si quieres un consejo, simplemente agrega un elemento nulo o con valores por defecto a la lista; al renderizarse no se mostrará, pues tomará la otra vista.

En mi caso hice lo siguiente:

See the gist on github.

Y en el listener:

See the gist on github.

Aunque ahora que lo pienso, no debería fijarme en el gasto, sino en position.

Resultado

Después de todo eso que acabo de mostrar, pude lograr lo siguiente:

RecyclerView de Android con distinto ViewHolder dependiendo de posición

Así podemos mostrar dos, tres o miles de vistas distintas. Y como lo dije, pueden ser mostradas en cualquier posición.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

No te pierdas ninguno de mis posts

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Ver comentarios

  • friend I have two different queries to a DB, one loads the courses table in recyclerview, but the user can save favorite courses and they are added to another table in the DB: How would I show the favorites in a different obvious layout inside recyclerview? I have duplicated the adapter class and made everything, and only the courses are shown, please give me a page or advice how can I do it? sorry my english I use translator

Entradas recientes

JavaScript (lado del cliente): leer pixeles de imagen

En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…

5 días hace

PHP y JavaScript: llenar select con AJAX

Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…

5 días hace

Imprimir PDF generado con HTML

Hoy vamos a ver programar la impresión de un PDF generado a partir de HTML…

6 días hace

JavaScript: llenar select con arreglo

En este tutorial básico de JavaScript con HTML vamos a ver cómo llenar una lista…

2 semanas hace

Imprimir PDF a partir de URL

En este artículo se presenta una guía para imprimir un PDF a partir de una…

2 semanas hace

Imprimir PDF a partir de base64

En este post voy a enseñarte cómo imprimir un PDF a partir de su representación…

2 semanas hace

Esta web usa cookies.