Android – Creando un RecyclerView con CardViews

Hace un tiempo cuando me hablaban de crear listas en Android yo pensaba directamente en un ListView. Era sencillo: un par de datos y un llamado a una clase nativa con un layout nativo y ya teníamos una lista andando con todo. Pero las épocas cambiaron y llego RecyclerView. Ya no era sencillo, teníamos que configurarle todo. Pero resultó ser mucho mas performante dado que en las ultimas versiones de Android si usamos ListView vamos a detectar cierto frameskip.

Pero en otro post vamos a debatir en más detalle las diferencias entre ambos, aunque si quieren ir adelantando, acá tienen un muy buen artículo que habla sobre ello.

Por otro lado tenemos las CardViews, unos elementos nuevos de Android (hijos de FrameLayout) que aparecieron con la revolución de material design.

Empecemos! Lo primero que tenemos que hacer es importar las librerias de los dos, porque si bien son oficiales de Android, vienen en paquetes separados. Abrimos nuestro gradle app y ponemos:

La versión de los paquetes tiene que coincidir con nuestro buildToolsVersion.

Ahora vamos a trabajar en varios conceptos importantes. Primero, vamos a crear nuestro ViewHolder, que viene a ser la clase que va a manejar la vista de cada item de la lista. Pero para ello primero vamos a crear un simple layout con CardViews.

CardView, al ser heredero de FrameLayout, solo puede contener un elemento hijo dentro. Por eso creamos un LinearLayout y dentro ponemos todos los elementos que queramos. Los únicos atributos nuevos que podemos ver acá son:

  • cardCornerRadius: Define los bordes redondeados que va a tener nuestra tarjeta.
  • elevation: En Material Design todo son elementos planos con una sombra que da la sensación de que salen hacia arriba. Este atributo maneja esa sombra o elevación.

Este layout representa un item de nuestra lista y lo vamos a inflar tantas veces como items tengamos. Este inflate lo va a ser nuestro adapter, el responsable de manejar el Recycler:

En este caso particular el Adapter va a contener al ViewHolder por cuestiones de scope. En artículos posteriores cuando explique patrones de diseño aplicados a Android, van a ver otro tipo de distribución de clases. Analicemos primero el ViewHolder (MyViewHolder). Tiene un atributo vTitle que hace referencia a un elemento de nuestro layout a inflar. Luego, en su constructor lo inicializa. En el caso real, deberíamos traernos todos los elementos del layout que vayamos a modificar. La idea es que el ViewHolder prepare los datos que luego el Adapter va a modificar según la data que tenga.

Ahora hablemos del Adapter. Vamos a analizar cada parte de la clase explicando que hace:

  • Constructor: Podemos poner lo que queramos, pero es fundamental que le pasemos la lista de datos (en este caso un List de strings) y el contexto.
  • getItemCount: Este método sirve para determinar el tamaño de la lista según la cantidad de elementos de nuestro array.
  • onBindViewHolder: Este evento se inicia en el momento en que se “bindea” el ViewHolder. Tiene el indice actual del array por parámetro, por lo que a este evento entra X cantidad de veces segun elementos de la lista.
  • onCreateViewHolder: Nuestro ViewHolder ya está unido al adapter, ahora lo instanciamos pasandole el itemView, que es el encargado de inflar el layout que creamos unas lineas atrás.

Ya tenemos toda la estructura para que nuestra aplicación use esta lista nueva, pero claramente nos falta el elemento RecyclerView. Vamos a crearlo:

Bien, ahora toca armar la parte de la Activity:

Vamos a explicar que estamos haciendo desde nuestro OnCreate. Primero seteamos nuestra vista main.xml que es donde tenemos nuestro Recycler. Luego le pasamos un layout manager que va a ser el que determine la forma en que se vea nuestro Recycler, es decir, la distribución visual de los items. En nuestro caso va a ser LinearLayout que es la más típica. Luego instanciamos el adapter pasándole nuestra lista que en este caso está vacía pero imaginemos que está llena. Finalmente pasamos el adapter a nuestro Recycler y con esto ya tenemos la implementación completa.

1 Comment on "Android – Creando un RecyclerView con CardViews"

  1. I’d venrute that this article has saved me more time than any other.

Leave a comment

Your email address will not be published.


*