Carga una imagen desde el disco
Usa el elemento componible Image para mostrar un gráfico en la pantalla. Para cargar una imagen (por ejemplo: PNG, JPEG, WEBP) o un recurso vectorial del disco, usa la API de painterResource con tu imagen de referencia. No es necesario que conozcas el tipo de recurso. Solo usa painterResource en los modificadores Image o paint.
DrawScope:
Image(
painter = painterResource(id = R.drawable.dog),
contentDescription = stringResource(id = R.string.dog_content_description)
)
Para asegurarte de que tu app sea accesible, proporciona un contentDescription para los elementos visuales en pantalla. TalkBack lee la descripción del contenido, por lo que debes asegurarte de que el texto sea significativo si se lee en voz alta y se traduce. En el ejemplo anterior, se usa un stringResource() para cargar la descripción del contenido traducido desde el archivo strings.xml. Si tu elemento visual en pantalla es puramente decorativo, configura contentDescription en null para que el lector de pantalla lo ignore.
Si necesitas una funcionalidad específica de ImageBitmap de nivel inferior, puedes usar ImageBitmap.imageResource() para cargar un mapa de bits. Para obtener más información sobre ImageBitmaps, consulta la sección ImageBitmap vs. ImageVector.
Compatibilidad con elementos de diseño
Actualmente, painterResource admite los siguientes tipos de elementos de diseño:
AnimatedVectorDrawableBitmapDrawable(PNG, JPG, WEBP)ColorDrawableVectorDrawable
Carga una imagen desde Internet
Para cargar una imagen desde Internet, hay varias bibliotecas de terceros disponibles que te ayudarán a controlar el proceso. Las bibliotecas de carga de imágenes hacen gran parte del trabajo pesado por ti: manejan la caché (para que no descargues la imagen varias veces) y la lógica de red para descargarla y mostrarla en la pantalla.
Por ejemplo, para cargar una imagen con Coil de Instacart, agrega la biblioteca a tu archivo de Gradle y usa un AsyncImage para cargar una imagen desde una URL:
AsyncImage(
model = "https://example.com/image.jpg",
contentDescription = "Translated description of what the image contains"
)
Coil
Biblioteca de carga de imágenes respaldada por corrutinas de Kotlin (Instacart).
Glide
Una biblioteca de carga de imágenes rápida y eficiente para Android enfocada en un desplazamiento fluido (Google).
Recomendaciones para ti
- Nota: El texto del vínculo se muestra cuando JavaScript está desactivado.
- Recursos en Compose
- Accesibilidad en Compose
- Gráficos en Compose