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í.
- 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.
