Generalidades

Visualización de SVG con bobinas – Jetpack Compose | Autor: Abhishek Pundir | Agosto de 2021

Como desarrollador de Android, cargar imágenes SVG es una tarea diaria.

Con la biblioteca Coil, esta tarea se vuelve muy eficiente porque Coil maneja automáticamente las solicitudes de red, las conversiones y el almacenamiento en caché.

Si desea obtener más información sobre la biblioteca de bobinas y cómo funciona, consulte esta publicación de blog aquí.

  1. Importar dependencias

En su archivo build.gradle, agregue estas dependencias para la biblioteca de bobinas.

(La versión en ese momento puede ser diferente, puedes consultarla desde aquí).

// Coil Library Dependencies
implementation "io.coil-kt:coil-compose:1.3.2"
implementation "io.coil-kt:coil-svg:1.3.2"

2. Obtener URL SVG

La bobina tiene una SVoltioGDecoder nos ayuda a mostrar imágenes SVG en componible.

Supongamos que tenemos un enlace SVG.

val svgLink = "https://restcountries.eu/data/aus.svg"

3. Cargador de imágenes

Ahora necesitamos definir un cargador de imágenes.

ImageLoaders es el objeto de servicio ejecutado ImageRequests. Manejan el almacenamiento en caché, la adquisición de datos, la decodificación de imágenes, la gestión de solicitudes, la agrupación de mapas de bits, la gestión de la memoria, etc.

val imageLoader = ImageLoader.Builder(LocalContext.current)
.componentRegistry
add(SvgDecoder(LocalContext.current))

.build()

4. Obtener la imagen

Luego, siempre que queramos usarlo, debemos pasarlo a CompositionLocalProvider. En él se define un pintor, y el resto es la clásica Imagen componer.

CompositionLocalProvider(LocalImageLoader provides imageLoader) 
val painter = rememberImagePainter(svgLink)

Image(
painter = painter,
contentDescription = "SVG Image",
modifier = Modifier
.size(80.dp)
.clip(CircleShape),
contentScale = ContentScale.FillBounds
)

Aquí, estudiamos cómo mostrar imágenes SVG en la composición usando solo SVGDecoder.

LEER  Notas sobre el uso de las clases de otros módulos como argumentos de función componible en Jetpack Compose | Por takahirom | Marzo de 2022

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba