Uno de los elementos básicos de cualquier aplicación son las listas. Si nos fijamos, están prácticamente en cada pantalla y realmente son la mejor, si no la única, manera de mostrar una gran cantidad de datos de forma ordenada y clara.

En Android las listas se suelen crear mediante Adapters a los que añadimos la información y, si queremos personalizar la lista mínimamente, también el diseño con el que se mostrarán.
Pero esto que parece sencillo, se complica cuando queremos cargar listas muy largas, ya que nuestros dispositivos pueden alcanzar fácilmente ciertos límites de procesamiento y de memoria si no utilizamos ciertos patrones y buenas prácticas.

Uno de estos es el patrón ViewHolder, con el que podemos conseguir un procesamiento un 15% más rápido de las listas mejorando así la fluidez y, por consiguiente, la experiencia de usuario.

Después de que un adaptador cree o reutilice una vista, busca el lugar dentro del layout donde tiene que mostrar la información con el método findViewById(). Con el objeto View Holder conseguimos que esa referencia se establezca cuando se crea la vista y se guarde para no tener que volver a buscar.
Básicamente lo que se consigue con este patrón es evitar utilizar el método findViewById() cada vez que se tenga que mostrar un nuevo elemento de la lista.

Otro punto a tener en cuenta es que Google, desde Android 5.0, incluyó una nueva clase llamada RecyclerView, que viene a ser el sucesor a largo plazo del ListView, y su adaptador incluye por defecto este patrón. Así que parece interesante ir echándole un vistazo.
Y como siempre, la mejor manera de verlo es con un ejemplo, así que allá voy:

Ejemplo de patrón ViewHolder:

Imaginemos que queremos mostrar el nombre, el dni y la foto de 200 contactos. Cada contacto se mostrará en una vista general, con 3 vistas más pequeñas dentro (como en la imagen).

Lista que crearemos con el patrón VIewHolder

Para que se cargue la información, debemos pasarla cuando especifiquemos qué adaptador vamos a utilizar. En este caso puede ser una lista con objetos “Persona” de este estilo:

Creamos la clase AdaptadorContactos. Hereda de ArrayAdapter y nos permite personalizar el adaptador modificando el método “getView()”. Suponemos que ya hemos creado un layout con el diseño y que lo hemos llamado “item_contacto.xml”.:

Ahora solo queda añadir el adaptador con los datos desde la Activity o Fragment como haríamos normalmente y ya hemos terminado.

Con esto conseguimos mejorar la fluidez de nuestra aplicación y seguro que ayudará a conseguir alguna estrellita más en Google Play…

Nota sobre las imágenes: En este caso, las fotos se cargan en el UI Thread (hilo de interfaz de usuario) y esto va a provocar errores si queremos cargar las fotos desde un servidor, ya que todas las conexiones se deben hacer en otro hilo diferente. Podemos solucionar esto, además de añadir un montón de funcionalidades, utilizando librerías de terceros como Picasso o Universal Image Loader

TO DO list:

  • Explicación sobre cómo cargar correctamente imágenes desde un servidor.
  • Tutorial básico sobre Universal Image Loader

Fuentes (también para ampliar info):

Vogella.com

Lucasr.org

Java Code Geeks

dzone.com

Sobre El Autor

Economista reconvertido a programador. Hoy en día trabajo como Desarrollador de aplicaciones web y móvil con Node.js, Angular.js (MEAN Stack) e Ionic framework. También intento mantenerme al día de lo que se mueve en este mundillo y mantengo este pequeño blog como documentación personal. Si echas algo de menos en el blog no dudes en comentar, y si te ha resultado de utilidad algún artículo, te agradezco que lo agradezcas ;-). ¡Un saludo!

Artículos Relacionados

Hacer Comentario

Su dirección de correo electrónico no será publicada.