Es difícil imaginar una aplicación moderna de Android sin cargadores de imágenes. Se encargan del duro trabajo de cargar de forma asíncrona, procesar los errores, mostrar los marcadores de posición, almacenar en caché y transformar las imágenes. La automatización de los procesos exime al desarrollador de la necesidad de “reinventar la rueda”, dándole la oportunidad de centrarse en la escritura de la lógica de negocio en lugar del código boilerplate. A partir de 2021, las bibliotecas Picasso, Glide y Fresco son las más utilizadas en los proyectos de Android.
Cada desarrollador de Android suele tener una opción a la que recurrir. Esta es nuestra opinión para ayudarle a identificar la mejor opción para usted.
de Square está construida con la idea de aportar la máxima simplicidad y claridad al trabajo. Estos objetivos se reflejan en la capacidad de mantener el archivo apk pequeño – Picasso sólo añade 121 Kb y 849 de sus métodos al proyecto. Toda moneda tiene dos caras, y este espacio limitado afecta negativamente a la funcionalidad, que sólo cubre las operaciones básicas con imágenes. Toda la documentación de la biblioteca cabe fácilmente en una página web.
de Bump Tech se basa en principios diferentes: una potente funcionalidad y un rico arsenal para la gestión de imágenes. Por ello, Glide aumenta el tamaño de las aplicaciones en al menos 440 Kb y 2678 métodos. Sin embargo, a cambio, el desarrollador obtiene una biblioteca flexible y fácil de usar para cargar imágenes de forma asíncrona.
de Facebook hace hincapié en la productividad y el uso cuidadoso de los recursos del sistema operativo. Por ejemplo, ofrece una oportunidad bastante inusual para que los desarrolladores utilicen un SimpleDraweeView especial para mostrar imágenes.
Ha llegado el momento de delimitar las diferentes formas de añadir interactividad a la visualización de imágenes con Picasso, Glide y Fresco. Este artículo cubrirá tres áreas: el efecto de desvanecimiento, la visualización de la barra de progreso durante la carga y la rotación de la imagen una vez finalizada la carga.
Efecto de desvanecimiento
En Picasso, el soporte de la animación no es su característica más robusta, y en la mayoría de los casos, los usuarios tienen que añadir el código del efecto de animación ellos mismos. Sin embargo, el desvanecimiento nativo ya está implementado. Todas las imágenes que no se cargan desde la RAM aparecen con esta animación. Es imposible influir en su duración u otras características. La única opción es activar/desactivar el efecto.
| 1 2 3 4 5 6 7 | Picasso .get() .load(imageUrl) .noFade() .into(test_imageview) |
Glide 4 permite definir el desvanecimiento mediante la función transition(). Ésta puede tomar como argumento una instancia de la clase DrawableTransitionOptions, que define los parámetros para cambiar a una nueva imagen. En particular, Glide le permite establecer el tiempo de transición. En el ejemplo siguiente, fijamos el tiempo del efecto de desvanecimiento en 5 segundos.
| 1 2 3 4 5 6 | Glide.with(this) .load(imageUrl) .transition(DrawableTransitionOptions.withCrossFade(5)) .into(test_imageview) |
También hay que tener en cuenta que el fundido en Glide tiene 2 modificaciones: fundidos cruzados deshabilitados o habilitados. En el primer modo, una nueva imagen aparece gradualmente sobre la anterior. Esto ahorra mucho recursos, pero será un problema si la nueva imagen tiene píxeles transparentes o menos tamaño que la antigua. En este último caso, se procesan dos animaciones de forma coherente: primero, la imagen antigua desaparece gradualmente, seguida de la aparición gradual de una nueva. Esto da un bonito efecto pero requiere muchos recursos del sistema operativo. En listas grandes, el fundido cruzado puede ser un verdadero problema. Puede activarlo/desactivarlo mediante la configuración de la transición.
| 1 2 3 4 5 6 7 8 9 10 11 | val factory = DrawableCrossFadeFactory .Builder() .setCrossFadeEnabled(true) .build() Glide.with(this) .load(imageUrl) .transition(withCrossFade(factory)) .into(test_imageview) |
Si lo desea, Glide puede definir otras animaciones al cambiar a una nueva imagen. También se puede hacer que una nueva imagen pase a la izquierda o que se amplíe desde el tamaño pequeño al original. Para implementar este enfoque, es necesario describir la animación en un archivo xml, crear una instancia de la clase GenericTransitionOptions con ella como argumento de la función constructora y añadirla a la función transition().
Esta animación describe la transición hacia la izquierda.
| 1 2 3 4 5 6 | Glide.with(this) .load(imageUrl) .transition(GenericTransitionOptions.with(R.anim.left_slide)) .into(test_imageview) |
Gestionar el desvanecimiento con Fresco es bastante sencillo en comparación con otras bibliotecas. Se puede hacer como en el diseño xml ..
| 1 2 3 |
… así como en el código de la Actividad / Fragmento.
| 1 2 3 4 5 6 7 | val builder = GenericDraweeHierarchyBuilder(getResources()) val jerarquía = constructor .setFadeDuration(3000) .build() fresco_imageview.setHierarchy(hierarchy) |
Al mismo tiempo, Fresco sólo admite la opción de desvanecimiento cruzado “siempre activo”, lo que puede provocar un mayor consumo de recursos por parte de la aplicación.
Carga de barras de progreso
Cuando se descargan imágenes de gran tamaño o en casos de una conexión a Internet inestable, puede resultar útil una barra de progreso: ya sea infinita o que muestre el estado de la descarga.
Cuando se utiliza Picasso, sólo se puede implementar la primera, una opción menos exigente. Se puede crear utilizando la función placeholder() o sobrescribiendo la clase Target.
En el primer caso, creamos una animación en xml.
| 1 2 3 |
Luego sólo hay que añadirla como marcador de posición.
| 1 2 3 4 5 6 7 | Picasso .get() .load(imageUrl) .placeholder( R.drawable.infinitive_progressbar) .into(test_imageview) |
En el segundo método, añadimos una barra de progreso al diseño sobre el ImageView, y luego creamos nuestra propia clase que controlará la carga de la imagen.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | class ProgressTarget(imageView: ImageView, progressBar: ProgressBar) : com.squareup.picasso.Target { private val ivRef: WeakReference private val progressRef: WeakReference init { ivRef = WeakReference(imageView) progressRef = WeakReference(progressBar) } override fun onBitmapLoaded(bitmap: Bitmap, from: Picasso.LoadedFrom) { val imageView = ivRef.get() val imageView = setImageBitmap(bitmap) val progressBar = progressRef.get() progressBar?.setVisibility(View.GONE) } override fun onBitmapFailed(e: Exception?, errorDrawable: Drawable?) { val imageView = ivRef.get() imageView?.setImageDrawable(errorDrawable) val progressBar = progressRef.get() progressBar?.setVisibility(View.GONE) } override fun onPrepareLoad(placeHolderDrawable: Drawable) { val imageView = ivRef.get() imageView?.setImageDrawable(placeHolderDrawable) val progressBar = progressRef.get() progressBar?.setVisibility(View.VISIBLE) } } |
Su uso es extremadamente sencillo: crear una instancia de ProgressTarget con los enlaces necesarios a ImageView y ProgressBar, utilizarla como argumento en la función into(). El último paso es añadir la instancia de ProgressTarget como una etiqueta a la ImageView para protegerla del recolector de basura.
| 1 2 3 4 5 6 7 8 | val target = ProgressTarget(test_imageview, test_progressbar) Picasso .get() .load(imageUrl) .into(target) test_imageview.setTag(target) |
Glide ofrece un enfoque más completo para crear barras de progreso. El enfoque es el mismo que en Picasso:
- añada una animación a la función de marcador de posición (como opción – utilice una imagen gif en lugar de una animación xml);
- extender la clase RequestListener .
Además, la flexibilidad de la configuración de esta biblioteca le permite obtener el estado de carga de la imagen y mostrar no sólo un tapón animado sino un contenido más informativo. Para ello, debe anular los ajustes básicos de GlideModule. La versión de mayor calidad de dicha solución fue propuesta por Róbert Papp en su OkHttpProgressGlideModule.
Sin duda, Fresco proporciona la forma más sencilla de resolver el problema de la barra de progreso. Para crear una barra de progreso sin fin, es necesario añadir una línea al diseño xml…
| 1 2 3 | fresco:progressBarImage="@drawable/spinner" |
…o hacerlo desde el código de la Actividad / Fragmento
| 1 2 3 | fresco_imageview.hierarchy.setProgressBarImage(AutoRotateDrawable(icon, 1000)) |
Añadir un indicador de descarga tampoco requiere mucho esfuerzo. Basta con crear y personalizar el ProgressDrawable si es necesario.
| 1 2 3 4 5 6 7 | val progressBarDrawable = ProgressBarDrawable() progressBarDrawable.setColor(Color.YELLOW) progressBarDrawable.setBackgroundColor(Color.BLUE) progressBarDrawable.setRadius(2) fresco_imageview.getHierarchy().setProgressBarImage(progressBarDrawable) |
Rotación de la imagen
Añadir una animación después de cargar la imagen es una opción poco frecuente pero bastante posible. Sin más preámbulos, vamos a sumergirnos en los detalles de implementación de cada una de las 3 bibliotecas.
Picasso tiene una clase Callback que permite ejecutar la lógica necesaria después de cargar la imagen. Para aplicar la animación, necesitamos
- determinar la animación que necesitamos en formato xml,
- cargarla en la Actividad / Fragmento,
- crear un objeto Callback,
- poner el código de reproducción de la animación en él,
- añadir este objeto como argumento a la función into().
| 1 2 3 |
| 1 2 3 | val rotateAnimation = AnimationUtils.loadAnimation(this, R.anim.rotate) |
| 1 2 3 4 5 6 7 8 9 10 11 | val callback = object : Callback { override fun onSuccess() { test_imageview.startAnimation(rotateAnimation) } override fun onError(e: java.lang.Exception?) { Log.e(TAG, e?.message) } } |
| 1 2 3 | Picasso.get().load(imageUrl).into(test_imageview, callback) |
En Glide, puede utilizar la función listener() para reproducir un escenario similar, que toma como argumento un objeto de la clase RequestListener.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | Glide.with(this) .load(imageUrl) .listener(objeto : RequestListener{ override fun onLoadFailed( e: GlideException? modelo: Cualquiera? target: com.bumptech.glide.request.target.Target? isFirstResource: Boolean ): Booleano { Log.e(TAG, e?.mensaje) devolver false } override fun onResourceReady( recurso: Drawable? modelo: Cualquiera? target: com.bumptech.glide.request.target.Target? dataSource: DataSource? isFirstResource: Booleano ): Booleano { test_imageview.startAnimation(rotateAnimation) return false } }) .into(test_imageview) |
En Fresco, la construcción de la animación final es un poco diferente. Además de crear y cargar el código de la animación, también debe crear 2 objetos: BaseControllerListener (responde al estado de carga de la imagen) y DraweeController (controla las peticiones y los retornos). El resultado global será idéntico al de los ejemplos anteriores con Picasso y Glide.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | val frescoListener = object: BaseControllerListener() { override fun onFinalImageSet(id: String?, imageInfo: ImageInfo?, animatable: Animatable?) { fresco_imageview.startAnimation(rotateAnimation) } } val controller = Fresco.newDraweeControllerBuilder() .setUri(imageUrl) .setControllerListener(frescoListener) .build() fresco_imageview.setController(controller) |
Recapitulación
Para resumir lo anterior, he aquí una tabla comparativa de las tres bibliotecas:
| Criterio |  |  |  |
|---|---|---|---|
| Soporte de efectos de desvanecimiento | Fuera de la caja | Fuera de la caja | Fuera de la caja |
| Control del efecto de desvanecimiento | Opción de activar/desactivar | Ajuste la duración, enfoque de fundido cruzado, defina diferentes animaciones para la transición entre imágenes | Activar/desactivar, ajustar la duración |
| Soporte de barras de progreso | Ninguna. Se requiere una vista de progreso independiente | Ninguna. Se requiere una vista de progreso separada/redefinir GlideModule | Disponible. Es posible crear diferentes tipos de barras de progreso tanto en el diseño xml como en la Actividad / Fragmento. |
| Creación de una barra de progreso con porcentajes | Imposible | Soportado cuando se utiliza la biblioteca OkHttp. Necesidad de anular GlideModule | Soportado por la librería |
| El mecanismo para mostrar la animación final | Llamada de retorno | RequestListener | BaseControllerListener |
 | |
|---|---|
| Soporte del efecto de desvanecimiento | De la caja |
| Control del efecto de desvanecimiento | opción de activar/desactivar |
| Soporte de barras de progreso | Ninguna. Se requiere una vista de progreso independiente |
| Creación de una barra de progreso con porcentajes | Imposible |
| El mecanismo de visualización de la animación final | Llamada de retorno |
 | |
|---|---|
| Soporte del efecto de desvanecimiento | De la caja |
| Control del efecto de desvanecimiento | Ajuste la duración, enfoque de fundido cruzado, defina diferentes animaciones para la transición entre imágenes |
| Soporte de barras de progreso | Ninguna. Se requiere una vista de progreso separada/redefinir GlideModule |
| Creación de una barra de progreso con porcentajes | Soportado cuando se utiliza la biblioteca OkHttp. Necesidad de anular GlideModule |
| El mecanismo para mostrar la animación final | RequestListener |
 | |
|---|---|
| Soporte del efecto de desvanecimiento | De la caja |
| Control del efecto de desvanecimiento | Activar/desactivar, ajustar la duración |
| Soporte de barras de progreso | Disponible. Posibilidad de crear diferentes tipos de barras de progreso tanto en el diseño xml como en la Actividad / Fragmento. |
| Creación de una barra de progreso con porcentajes | Soportado por la biblioteca |
| El mecanismo de visualización de la animación final | BaseControllerListener |
De este modo, puede añadir la opción de mostrar animaciones en todos los descargadores de imágenes populares para aplicaciones Android. Las bibliotecas de manipulación de imágenes de las que hemos hablado anteriormente pueden describirse sucintamente con las siguientes ventajas:
- Glide proporciona la mejor funcionalidad para gestionar los efectos de transición
- Fresco tiene una buena API para crear y personalizar barras de progreso
- Picasso es fácil de usar incluso para los especialistas de nivel básico
Los mecanismos para mostrar la animación final en las tres bibliotecas son similares y dan el mismo resultado.