Bilder werden geladen

Image vom Laufwerk laden

Mit der zusammensetzbaren Funktion Image können Sie eine Grafik auf dem Bildschirm darstellen. So laden Sie ein Bild: (z. B. PNG, JPEG, WEBP) oder Vektorressource vom Laufwerk, verwenden Sie painterResource API mit Ihrer Bildreferenz. Sie müssen nicht wissen, um welche des Assets einfach painterResource in Image- oder paint-Modifikatoren verwenden.

DrawScope:

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description)
)
LoadingImagesSnippets.kt

Damit deine App zugänglich ist, musst du eine contentDescription für visuelle Elemente auf dem Bildschirm. TalkBack liest die Beschreibung des Inhalts vor, muss dafür sorgen, dass der Text sinnvoll ist, wenn er laut und übersetzt wird. Im Beispiel oben wird ein stringResource() verwendet, um den übersetzten Inhalt zu laden. Beschreibung aus der Datei strings.xml. Wenn Ihr visuelles Element auf dem Bildschirm dient nur der optischen Gestaltung. Setzen Sie contentDescription auf null für die Screenreader ignorieren können.

Wenn du untergeordnete ImageBitmap-spezifische Funktionen benötigst, kannst du ImageBitmap.imageResource(), um eine Bitmap zu laden. Weitere Informationen zu ImageBitmaps erhalten Sie im Abschnitt ImageBitmap versus ImageVector.

Drawable-Stütze

painterResource unterstützt derzeit die folgenden Drawable-Typen:

• AnimatedVectorDrawable
• BitmapDrawable (PNG, JPG, WEBP)
• ColorDrawable
• VectorDrawable

Bild aus dem Internet laden

Zum Laden eines Bildes aus dem Internet gibt es mehrere Bibliotheken von Drittanbietern die Ihnen bei der Abwicklung des Vorgangs helfen. Die Bibliotheken für das Laden von Bildern bieten die Arbeit für Sie; unterstützen beide Cachings Bild mehrmals) und Netzwerklogik zum Herunterladen und Anzeigen des Bildes auf dem Bildschirm.

Um beispielsweise ein Bild mit Coil zu laden, von Instacart, fügen Sie die Bibliothek zu Ihrer Gradle-Datei hinzu und verwenden Sie AsyncImage, um ein Bild von einer URL zu laden:

AsyncImage(
    model = "https://example.com/image.jpg",
    contentDescription = "Translated description of what the image contains"
)
LoadingImagesSnippets.kt

Empfehlungen für dich

• Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
• Ressourcen in „Compose“
• Bedienungshilfen in „Compose“
• Grafiken in „Compose“