ImageBitmap und ImageVector im Vergleich

Die beiden gängigsten Arten von Bildformaten sind Raster- und Vektorbilder.

Ein Rastergrafikformat enthält Pixel: winzige einzelne Quadrate, die eine Farbe enthalten (aus Rot-, Grün-, Blau- und Alphawerten). Wenn viele Pixel aneinandergereiht werden, kann ein sehr detailliertes Bild entstehen, z. B. ein Foto. Eine Rastergrafik hat eine feste Auflösung (eine feste Anzahl von Pixeln). Das bedeutet, dass beim Vergrößern des Bildes Details verloren gehen und es zu Pixelfehlern kommen kann. Beispiele für Rastergrafikformate sind JPEG, PNG und WEBP.

Abbildung 1: Beispiel für eine JPEG-Datei

Vektorbilder hingegen sind skalierbare mathematische Darstellungen eines visuellen Elements auf dem Bildschirm. Ein Vektor ist eine Reihe von Befehlen, die beschreiben, wie das Bild auf dem Bildschirm gezeichnet wird, z. B. eine Linie, ein Punkt oder eine Füllung. Wenn ein Vektor auf dem Bildschirm skaliert wird, geht dabei keine Qualität verloren, da die mathematische Formel das Verhältnis zwischen den verschiedenen Befehlen beibehält. Ein gutes Beispiel für ImageVector sind die Symbole von Material Design, da sie alle mit mathematischen Formeln definiert werden können.

Abbildung 2: Beispiel für einen Vektor (Dateiendung ist .xml oder im Kotlin-Code definiert)

ImageBitmap

In Compose kann ein Rasterbild (häufig als Bitmap bezeichnet) in eine ImageBitmap-Instanz geladen werden. Ein BitmapPainter ist für das Zeichnen der Bitmap auf dem Bildschirm verantwortlich.

Für einfache Anwendungsfälle kann painterResource() verwendet werden. Diese Funktion erstellt ein ImageBitmap und gibt ein Painter-Objekt zurück (in diesem Fall ein BitmapPainter):

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

Wenn Sie weitere Anpassungen benötigen (z. B. eine benutzerdefinierte Painter-Implementierung) und Zugriff auf die ImageBitmap selbst benötigen, können Sie sie so laden:

val imageBitmap = ImageBitmap.imageResource(R.drawable.dog)
VectorVsBitmapSnippets.kt

ImageVector

Ein VectorPainter ist dafür verantwortlich, eine ImageVector auf dem Bildschirm zu zeichnen. ImageVector unterstützt eine Teilmenge der SVG-Befehle. Nicht alle Bilder können als Vektoren dargestellt werden. Beispielsweise können Fotos, die Sie mit Ihrer Kamera aufnehmen, nicht in einen Vektor umgewandelt werden.

Sie können eine benutzerdefinierte ImageVector entweder durch Importieren einer vorhandenen XML-Datei mit Vektorgrafiken (über das Importtool in Android Studio importiert) oder durch Implementieren der Klasse und manuelles Ausführen von Pfadkommandos erstellen.

Bei einfachen Anwendungsfällen funktioniert painterResource() für die Klasse ImageBitmap genauso wie für ImageVectors und gibt VectorPainter als Ergebnis zurück. painterResource() lädt VectorDrawables und BitmapDrawables in VectorPainter bzw. BitmapPainter. So laden Sie eine VectorDrawable in ein Bild:

Image(
    painter = painterResource(id = R.drawable.baseline_shopping_cart_24),
    contentDescription = stringResource(id = R.string.shopping_cart_content_desc)
)
VectorVsBitmapSnippets.kt

Wenn Sie weitere Anpassungen vornehmen und auf die ImageVector zugreifen möchten, können Sie sie so laden:

val imageVector = ImageVector.vectorResource(id = R.drawable.baseline_shopping_cart_24)
VectorVsBitmapSnippets.kt