El widget de RecyclerView en Android sirve para crear una lista de elementos de cualquier tipo, definiendo un layout personalizado o propio para mostrarlos, y permitiéndonos una mayor personalización.
En este post mostraré un ejemplo de Android y RecyclerView con:
El código completo se encuentra en mi GitHub, y la aplicación de demostración en la página de releases.
En la vista principal tenemos un elemento de RecyclerView y los elementos para interactuar con el mismo, es decir, dos botones y 3 campos de texto.
Por el momento no veremos el código Java, lo veremos cuando tengamos el adaptador terminado.
Dentro de nuestro RecyclerView mostraremos una fila personalizada con datos personalizados. En este caso usaremos una mascota que tiene nombre y edad así que definimos el layout XML:
Así será la vista, y se cambiará según el adaptador y el elemento actual que el usuario esté viendo dentro del RecyclerView. El código de la vista de arriba es el siguiente:
Para inflar esta vista debemos declarar un ViewHolder que se encargará de obtener referencias a los elementos de la vista, es decir, a cada TextView. Cabe mencionar que aparte de un TextView podemos tener cualquier tipo de vista.
El código del ViewHolder es el siguiente:
Fíjate en que estamos extendiendo de RecyclerView.ViewHolder. Además de eso, he añadido dos métodos para obtener los TextView, esto lo hago para colocar los datos de la mascota dentro de cada fila como veremos más adelante.
Y finalmente, la clase Mascota a continuación:
Con eso ya tenemos definido cada elemento que irá dentro del RecyclerView, con el ViewHolder inflamos el layout XML.
Ahora vamos a ver lo realmente bueno de Android y RecyclerView. Para poder usar un RecyclerView necesitamos un adaptador que se encargue de mostrar los datos y de administrarlos.
Este adaptador debe extender de RecyclerView.Adapter y debe ser de un tipo de ViewHolder, en este caso será de tipo de ViewHolder de ViewHolderMascota como vimos anteriormente. Debemos sobrescribir los siguientes métodos:
onCreateViewHolder: aquí inflamos la vista, todavía no renderizamos datosonBindViewHolder: aquí tenemos la vista anteriormente inflada, además de la posición; con ella obtenemos el elemento de nuestra lista y colocamos el texto de los TextView según sea el caso.getItemCount: debemos regresar el total de elementos que hay.Normalmente tendremos un ArrayList o lista dentro de nuestro adaptador, y por cada elemento de la lista tendremos una layout y un ViewHolder que vimos anteriormente.
Primero inflamos la vista de fila_mascota, es decir, el archivo de layout que vimos antes. Después creamos un ViewHolder de la mascota, en donde definimos los elementos de la vista (los TextView).
En la línea 9 agregamos un listener para el click de ese elemento, todavía no veremos esa parte pero presta atención; simplemente estamos pasándole (al listener) la vista y la mascota que fue tocada.
Finalmente regresamos el ViewHolder después de haber colocado el listener.
En esta función se nos pasa la posición que se va a dibujar; con ella obtenemos la mascota y establecemos los datos:
Con la variable position obtenemos la mascota, después obtenemos los TextView del holder y le ponemos el texto correspondiente.
Como ArrayList ya tiene un método que cuenta sus elementos, simplemente regresamos lo que regrese size:
Además de los métodos que se deben sobrescribir, he agregado otros métodos para trabajar con el ArrayList. Veamos el código a continuación:
Tenemos al método agregarMascota y eliminar, que simplemente trabaja con el ArrayList. Es muy importante que cada que hagamos esto, notifiquemos que hemos cambiado los datos para que el adaptador sepa y para que se muestren las animaciones.
Esto se logra invocando a notifyDataSetChanged, notifyItemRemoved y notifyItemInserted. Por cierto, tenemos un constructor que recibe una interfaz de un listener, esto es para comunicar el RecyclerView con la actividad. En unos momento veremos eso en profundidad.
Para saber cuando hacen click en un elemento del RecyclerView y obtener al misma, debemos crear un listener. En este caso dentro del adaptador estamos invocando al listener:
La interfaz es muy simple:
Cuando se implemente, solo hay que sobrescribir al método onClick y recibiremos la mascota junto con la vista. La vista no es necesaria en estos casos pero siempre es bueno pasarla por si se hace algo con ella.
Ahora sí, dentro de la actividad principal creamos el adaptador, instanciamos el RecyclerView y agregamos datos. Primero veamos cómo instanciamos el adaptador que recibe la interfaz:
Estamos definiendo la interfaz al crear una instancia de AdaptadorRecyclerView, sobrescribimos el onClick y simplemente mostramos en un Toast a la mascota.
Ahora veamos cómo juntamos el RecyclerView con el Adaptador:
Primero debemos definir cómo se colocarán los elementos o filas personalizadas dentro del RecyclerView; aunque cada fila está definida con un ConstraintLayout, se deben organizar todas dentro de la lista. Así que indicamos que se organizarán con un LinearLayoutManager para que aparezcan en forma de lista.
Después agregamos una decoración para poner un separador o línea entre cada elemento.
Finalmente invocamos a setAdapter y pasamos el adaptador creado anteriormente.
Para agregar elementos simplemente invocamos al método agregarMascota del adaptador, y le pasamos una nueva mascota:
Estamos haciendo una validación muy básica, si quieres una con más estilo mira este post.
Recuerda que dentro del adaptador también tenemos al método setMascotas, esto es por si ya tienes una lista obtenida, por ejemplo, de una base de datos.
Por cierto, aunque no se ve a simple vista, existe una animación al agregar el elemento.
Para eliminar un elemento del RecyclerView invocamos a eliminar pasando el índice.
Ahora sí se puede apreciar más la animación al remover el elemento.
Finalmente veamos en acción el Toast que aparece cuando se toca un elemento:
Finalmente así queda todo el código, ya que hace un momento omití la declaración de elementos y esas cosas:
Parece complejo, pero esto nos da un gran poder sobre cómo mostramos los datos, ya que tenemos posibilidades infinitas para cada elemento, es decir, tenemos un diseño personalizado por cada vista, y podemos agregar listeners de igual manera personalizados.
Recuerda que puedes descargar el APK aquí, y ver el código completo aquí.
Si quieres un ejemplo de RecyclerView con base de datos mira este post.
En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…
Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…
Hoy vamos a ver programar la impresión de un PDF generado a partir de HTML…
En este tutorial básico de JavaScript con HTML vamos a ver cómo llenar una lista…
En este artículo se presenta una guía para imprimir un PDF a partir de una…
En este post voy a enseñarte cómo imprimir un PDF a partir de su representación…
Esta web usa cookies.
