Es casi imposible encontrar una aplicación comercial para Android que no utilice imágenes en su interfaz. La descarga de una imagen en la vista correspondiente, a pesar de la aparente sencillez de la operación, puede causar grandes problemas al desarrollador. Por ejemplo, ¿qué pasa si la imagen está almacenada en el servidor? Para mostrarla en la pantalla, deberá cargarla primero en el almacenamiento local, luego convertirla al formato deseado y añadirla como atributo en la Vista. La lista de tareas se ampliará considerablemente si queremos reutilizar las imágenes ya cargadas o mostrar el marcador de posición mientras se descarga la imagen deseada. Por ello, la gran mayoría de los proyectos Android utilizan librerías especiales – descargadores de imágenes que permiten romper este ciclo interminable. Las más comunes para 2020 son Picasso, Glide y Fresco.
Fue creada por Square, que es conocida por la comunidad Android por bibliotecas tan populares como Retrofit, OkHttp y Leak Canary. Los creadores de esta biblioteca ponen el énfasis principal en la simplicidad y la comprensibilidad del trabajo. El enfoque minimalista permite no inflar el tamaño del archivo apk – Picasso ocupa sólo 121 Kb. La biblioteca también ahorra el número de métodos de la aplicación, añadiendo sólo 849 de sus métodos. Esto aplaza el momento de convertir la aplicación en un archivo multidisco.
Es el producto de Bump Tech. Una de las características destacadas de la biblioteca es su potente funcionalidad, que le permite implementar complejas transformaciones de imagen. Sin embargo, tienen un precio: una aplicación más grande: Glide añade 440 Kb y 2678 métodos. Por lo tanto, el nicho de Glide en el desarrollo de aplicaciones Android es un programa con una compleja lógica de visualización de imágenes. Sin embargo, también es posible implementar soluciones más sencillas con su ayuda.
Fue creada por los ingenieros de Facebook. A la hora de cargar imágenes, esta biblioteca se centra en trabajar de forma eficiente con la memoria y la productividad. Especialmente significativa fue su ventaja sobre otros descargadores de imágenes en dispositivos con Android 4. Ahora la diferencia se ha reducido, pero Fresco sigue siendo líder en este ámbito. La segunda característica significativa de Fresco es el uso de su propio SimpleDraweeView en lugar del tradicional ImageView.
La comparación de las funciones simples de estas bibliotecas (carga de recursos, gestión de errores, marcadores de posición) no aportará mucho valor al desarrollador de Android, ya que estas funciones son intuitivas y fáciles de aprender en apenas una hora. Sería más interesante comparar las funciones avanzadas de Picasso, Glide y Fresco: el almacenamiento en caché y la transformación de imágenes, así como las herramientas únicas de cada biblioteca.
Almacenamiento en caché de imágenes
Picasso admite dos tipos de caché por defecto: Caché LRU de un 15% de la memoria RAM disponible para la aplicación, y caché de disco de 5 a 50 MB (depende del tamaño disponible de la memoria de sólo lectura). Para controlarlas se utilizan las funciones memoryPolicy() y networkPolicy(). La primera permite rechazar el acceso a la caché en línea durante la carga de la imagen (atributo MemoryPolicy.NO_CACHE) o no guardar la imagen descargada en la caché (atributo MemoryPolicy.NO_STORE). Con la ayuda de la segunda, se regula la caché del disco. Sus atributos NetworkPolicy.NO_CACHE y NetworkPolicy.NO_STORE funcionan igual que en MemoryPolicy. Otro atributo – NetworkPolicy.OFFLINE – ordena a Picasso que descargue los datos sólo de la caché, sin acceder a la red.
Por ejemplo, una solicitud de este tipo obligará a Picasso a descargar constantemente imágenes de la red.
| 1 2 3 4 5 6 7 | Picasso.get() .load(imageUrl) .memoryPolicy(MemoryPolicy.NO_CACHE, MemoryPolicy.NO_STORE) .networkPolicy(NetworkPolicy.NO_CACHE, NetworkPolicy.NO_STORE) .into(test_imageview) |
El esquema de caché en Glide es más complejo. Tiene 4 niveles
- recursos activos (mostrados ahora en cualquier Vista)
- caché de memoria (datos en la RAM)
- recurso (imagen convertida y decodificada)
- Datos (imagen bruta guardada en el disco).
Por defecto, antes de acceder a un recurso externo, Glide busca una imagen adecuada en estos niveles por orden. Con este enfoque, una misma imagen puede tener varias versiones. Por ejemplo, utilizamos la misma imagen tanto en la lista como en la vista detallada. Pero en el primer caso, derivamos su parte utilizando el recorte central, en el segundo – la mostramos completamente. La caché contendrá dos versiones de esta imagen. Para distinguirlas, Glide utiliza claves que incluyen datos sobre la anchura y la altura de la imagen, las transformaciones, las opciones añadidas, el tipo de datos, etc. Para gestionar la caché, utilice la función diskCacheStrategy(), que toma los argumentos enum de DiskCacheStrategy. ALL (utiliza todos los niveles de caché y un recurso externo), DATA (escribe los datos sin procesar en la memoria de sólo lectura), RESOURCE (escribe los datos descodificados en la memoria de sólo lectura), NONE (no almacena los datos en la memoria persistente).
El ejemplo anterior de Picasso tendrá este aspecto:
| 1 2 3 4 5 6 7 | Glide.with(this) .load(imageUrl) .diskCacheStrategy(DiskCacheStrategy.NONE) .skipMemoryCache(true) .into(test_imageview) |
Al igual que Picasso, Glide permite borrar la caché por completo o para una imagen concreta. Pero también permite controlarla con mayor precisión mediante la función signature() y las claves personalizadas.
La caché de Fresco también es jerárquica y tiene 3 niveles:
- Mapa de bits (imágenes descodificadas, listas para su visualización o post-procesamiento)
- Caché de memoria codificada (almacena las imágenes comprimidas en el estado original en la memoria)
- Disco (almacena las imágenes comprimidas en el estado original en el almacenamiento local).
La biblioteca utiliza la clase ImagePipeline para gestionar la caché. Ofrece la posibilidad de comprobar la presencia de imágenes en la caché, obtener imágenes en la caché o eliminarlas.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | val imagePipeline = Fresco.getImagePipeline() // Check if image is in cache val inMemoryCache = imagePipeline.isInBitmapMemoryCache(uri) // Get cached image imagePipeline.evictFromMemoryCache(uri) imagePipeline.evictFromDiskCache(uri) // Clear cache imagePipeline.clearMemoryCaches() imagePipeline.clearDiskCaches() |
Una característica interesante de Fresco es la capacidad de crear una caché separada para almacenar imágenes pequeñas. Esto puede ser útil para aumentar el rendimiento de la aplicación.
Transformación de imágenes
Una de las principales ventajas de utilizar descargadores es la posibilidad de procesar las imágenes antes de su salida hacia el usuario. Picasso ofrece un conjunto de transformaciones simples incorporadas: redimensionar, centrarRecortar, centrarInterior, rotar. Para transformaciones más complejas, puede utilizar soluciones ya preparadas de bibliotecas gratuitas. Por ejemplo, una solución de Daichi Furiya(Wasabeef). Con ella, puede establecer fácilmente la forma compleja de la imagen, desenfocar o aplicar máscaras y filtros. También existe la opción de crear su propia transformación personalizada. Para ello, deberá heredar de la clase Transformación y prescribir la lógica para cambiar la imagen. También será necesario establecer una cadena clave única para esta transformación, que nos permitirá distinguir entre las imágenes procesadas en la caché.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | Circle Transformation Example class CircleTransformation : Transformation { override fun transform(source: Bitmap): Bitmap { val paint = Paint() paint.setAntiAlias(true) paint.setShader(BitmapShader(source, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)) val output = Bitmap.createBitmap(source.width, source.height, Bitmap.Config.ARGB_8888) val canvas = Canvas(output) canvas.drawCircle(source.width / 2, source.height / 2, source.width / 2, paint) if (source != output) source.recycle() return output } override fun key(): String { return "circle" } } |
El trabajo con las transformaciones en Glide es muy similar al de Picasso. Puede tomar las opciones incorporadas para modificar imágenes (las mismas que en Picasso más circleCrop, roundedCorners, granularRoundedCorners). Para casos más complejos, existen bibliotecas gratuitas: del ya mencionado Daichi Furiya(Wasabeef) o de Werbhelius. Si es necesario, siempre puede definir su propia transformación. Su implementación es ligeramente diferente a la de Picasso. En primer lugar, la interfaz de Transformación no se implementa a menudo directamente, sino con la ayuda de clases de utilidad, cada una de las cuales es responsable de transformar un determinado tipo de recurso: DrawableTransformation, BitmapTransformation, GifDrawableTransformation, MultiTransformation, etc. Para crear su transformación, necesita redefinir 4 métodos: equals() y hashcode() – para distinguir entre objetos de transformación, transform() – describe realmente el cambio en la imagen, updateDiskCacheKey() – permite identificar las imágenes modificadas en la caché.
Ejemplo de transformación personalizada en Glide
| 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 35 36 37 | class GreyscaleTransformation : BitmapTransformation() { override fun transform( pool: BitmapPool, source: Bitmap, outWidth: Int, outHeight: Int ): Bitmap { val bitmap = Bitmap.createBitmap(source.width, source.height, Bitmap.Config.ARGB_8888) val paint = Paint() val greyMatrix = ColorMatrix() greyMatrix.setSaturation(0.0f) paint.colorFilter = ColorMatrixColorFilter(greyMatrix) val canvas = Canvas(bitmap) canvas.drawBitmap(source, 0f, 0f, paint) return bitmap } override fun equals(other: Any?): Boolean { return other is GreyscaleTransformation } override fun hashCode(): Int { return Util.hashCode(ID.hashCode()) } override fun updateDiskCacheKey(messageDigest: MessageDigest) { messageDigest.update(ID_BYTES) } companion object { private val ID = "GreyscaleTransformation" private val ID_BYTES = ID.toByteArray() } } |
Entre los 3 descargadores en cuestión, Fresco es el que tiene las herramientas de transformación de imágenes más sofisticadas. La mayoría de ellas pueden aplicarse en el diseño xml, indicando los atributos correspondientes. Desde la perspectiva de la codificación, aplicarlas es más difícil. Por ejemplo, así es como se ve el redondeo de las esquinas cuando se utiliza Fresco.
| 1 2 3 4 5 6 7 8 | val roundingParams = RoundingParams.fromCornersRadius(7f) fresco_imageview.setHierarchy( GenericDraweeHierarchyBuilder(resources) .setRoundingParams(roundingParams) .build() ) |
Además, algunas herramientas estándar tienen limitaciones. Por ejemplo, el redimensionamiento sólo puede aplicarse al formato JPEG, no puede agrandar una imagen y sólo puede reducirla a ⅛ tamaño original.
Al igual que otros cargadores, Fresco puede utilizarse con bibliotecas de transformaciones ya hechas (del mismo Wasabeef ).
La creación de su transformación requiere una implementación personalizada de la clase Postprocessor. Reescribamos el ejemplo de la escala de grises con Glide para Fresco.
| 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 35 36 37 38 39 40 41 42 | class GrayScaleProcessor : BasePostprocessor() { override fun process(bitmap: Bitmap) { val w = bitmap.width val h = bitmap.height val pixels = IntArray(w * h) bitmap.getPixels(pixels, 0, w, 0, 0, w, h) for (x in 0 until w) { for (y in 0 until h) { val offset = y * w + x pixels[offset] = getGreyColor(pixels[offset]) } } bitmap.setPixels(pixels, 0, w, 0, 0, w, h) } override fun getName(): String { return "GrayScaleProcessor" } override fun getPostprocessorCacheKey(): CacheKey? { return SimpleCacheKey("grayScale") } companion object { internal fun getGreyColor(color: Int): Int { val alpha = color and -0x1000000 val r = color shr 16 and 0xFF val g = color shr 8 and 0xFF val b = color and 0xFF val luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b).toInt() return alpha or (luminance shl 16) or (luminance shl 8) or luminance } } } |
Características únicas
Dado que Picasso se basó en el principio de “nada más”, añadió la mayoría de las nuevas características más tarde que sus competidores, principalmente Glide.
Glide ha sido durante mucho tiempo un pionero en la adición de funcionalidades a los descargadores de imágenes en Android. Por el momento, puede destacar sus características más útiles
- cargar un fotograma de un vídeo como imagen
- uso de cualquier tipo de modelo en lugar de Uri / String para el cargador personalizado
- Descarga de GIF (también disponible en Fresco)
- aPI flexible con la capacidad de conectar cualquier pila de red (por ejemplo, Volley u OkHttp)
Fresco fue creado como un enfoque alternativo a la carga de imágenes en Android con un ojo en la eficiencia. Por lo tanto, sus principales características están ocultas bajo el capó:
- guardar las imágenes no en el heap de Java, sino en el heap de ashmem, lo que ahorra memoria a las aplicaciones, reduce los riesgos de OutOfMemoryError y aumenta el rendimiento debido a que las llamadas al recolector de basura son más raras;
- recorte de imágenes alrededor de cualquier punto, no sólo en el centro;
redimensionamiento de JPEG utilizando recursos nativos, lo que también reduce los riesgos de OutOfMemoryError; - soporte para imágenes JPEG progresivas.
Conclusión
| Criterio |  |  |  |
|---|---|---|---|
| Tamaño | 121 Kb/td> | 440 Kb | 500 kb |
| Comodidad de uso | alto | alto | medio |
| Velocidad de descarga de la web | alta | ligeramente inferior debido al largo procesamiento de la caché | alta |
| Velocidad de descarga en caché | media | alta | alta |
| Características de transformación incorporadas | conjunto básico de operaciones | conjunto básico más redondeo | amplia gama de capacidades de transformación, pero con limitaciones |
| Herramientas adicionales | Ausencia. | Carga de un fotograma de vídeo como imagen y GIF, utilizando cualquier tipo de modelo, una API flexible con la capacidad de conectar cualquier pila de red. | Guardado de imágenes no en Java Heap, sino en ashmem heap, capacidad de recortar imágenes alrededor de cualquier punto, redimensionar JPEG utilizando recursos nativos, soporte para imágenes JPEG Progresivas. |
 | |
|---|---|
| Tamaño | 121 Kb |
| Comodidad de uso | alta |
| Velocidad de descarga de la web | alta |
| Velocidad de descarga de la caché | media |
| Características de transformación incorporadas | conjunto básico de operaciones |
| Herramientas adicionales | Ausente. |
 | |
|---|---|
| Tamaño | 440 Kb |
| Comodidad de uso | alta |
| Velocidad de descarga de la web | Ligeramente inferior debido al prolongado procesamiento de la caché |
| Velocidad de descarga en caché | alta |
| Características de transformación incorporadas | conjunto básico más redondeo |
| Herramientas adicionales | Carga de un fotograma de vídeo como imagen y GIF, utilizando cualquier tipo de modelo, una API flexible con la capacidad de conectar cualquier pila de red. |
 | |
|---|---|
| Tamaño | 500 kb |
| Comodidad de uso | medio |
| Velocidad de descarga de la web | alta |
| Velocidad de descarga de la caché | alta |
| Funciones de transformación incorporadas | amplia gama de capacidades de transformación, pero con limitaciones |
| Herramientas adicionales | Guardar las imágenes no en el Heap de Java, sino en el Heap de ashmem, capacidad de recortar las imágenes alrededor de cualquier punto, redimensionar JPEG utilizando recursos nativos, soporte para imágenes JPEG Progresivas. |
Así, para 2020, Picasso, Glide y Fresco son las bibliotecas más populares para descargar imágenes en las aplicaciones Android. Cada una de ellas tiene sus propias especificidades en cuanto al uso de herramientas avanzadas, el almacenamiento en caché y la transformación de imágenes en particular. Picasso, con un enfoque minimalista, funciona bien con operaciones de imagen sencillas, pero tiene opciones de personalización limitadas. Glide es un líder indiscutible entre los descargadores de Android, ya que ofrece una potente funcionalidad y una interfaz intuitiva para su aplicación. El enfoque innovador de Fresco ofrece mejoras de rendimiento, pero complica enormemente la implementación del almacenamiento en caché y la transformación de imágenes.
