Image von Datenträger laden
Mit dem Image-Element kannst du eine Grafik auf dem Bildschirm anzeigen. Wenn Sie ein Bild (z. B. PNG, JPEG, WEBP) oder eine Vektorressource von der Festplatte laden möchten, verwenden Sie die painterResource API mit Ihrer Bildreferenz. Sie müssen den Typ des Assets nicht kennen. Verwenden Sie einfach painterResource in Image- oder paint-Modifizierern.
DrawScope:
Image(
painter = painterResource(id = R.drawable.dog),
contentDescription = stringResource(id = R.string.dog_content_description)
)
Damit Ihre App barrierefrei ist, müssen Sie für visuelle Elemente auf dem Bildschirm eine contentDescription angeben. TalkBack liest die Inhaltsbeschreibung vor. Der Text muss also aussagekräftig sein, wenn er laut vorgelesen und übersetzt wird. Im obigen Beispiel wird stringResource() verwendet, um die Beschreibung der übersetzten Inhalte aus der Datei strings.xml zu laden. Wenn das visuelle Element auf dem Bildschirm nur zur visuellen Dekoration dient, setzen Sie contentDescription auf null, damit es vom Screenreader ignoriert wird.
Wenn Sie ImageBitmap-spezifische Funktionen niedrigerer Ebene benötigen, können Sie mit ImageBitmap.imageResource() eine Bitmap laden. Weitere Informationen zu ImageBitmaps finden Sie im Abschnitt ImageBitmap im Vergleich zu ImageVector.
Unterstützung für Zeichnen
painterResource unterstützt derzeit die folgenden drawable-Typen:
AnimatedVectorDrawableBitmapDrawable(PNG, JPG, WEBP)ColorDrawableVectorDrawable
Bild aus dem Internet laden
Zum Laden eines Bildes aus dem Internet stehen mehrere Bibliotheken von Drittanbietern zur Verfügung. Bibliotheken zum Laden von Bildern übernehmen einen Großteil der Arbeit für Sie. Sie kümmern sich sowohl um das Caching (damit das Bild nicht mehrmals heruntergeladen wird) als auch um die Netzwerklogik, um das Bild herunterzuladen und auf dem Bildschirm anzuzeigen.
Wenn Sie beispielsweise ein Bild mit Coil aus Instacart laden möchten, fügen Sie die Bibliothek Ihrer Gradle-Datei hinzu und verwenden Sie eine AsyncImage, um ein Bild über eine URL zu laden:
AsyncImage(
model = "https://example.com/image.jpg",
contentDescription = "Translated description of what the image contains"
)
Spule
Eine Bildladebibliothek, die von Kotlin-Coroutinen unterstützt wird (Instacart).
Glide
Eine schnelle und effiziente Bildladebibliothek für Android, die auf flüssiges Scrollen ausgerichtet ist (Google).
Empfehlungen für dich
- Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
- Ressourcen in Compose
- Barrierefreiheit in Compose
- Grafiken in Compose