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 (aus Rot-, Grün-, Blau- und Alphawerten) enthalten. 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). Wenn Sie also die Größe des Bildes vergrößern, gehen Details verloren und es kann zu Pixelfehlern kommen. Beispiele für Rastergrafikformate sind JPEG, PNG und WEBP.

Abbildung 1: Beispiel für eine JPEG-Datei

Vektorbilder sind hingegen 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 Sie einen Vektor auf dem Bildschirm skalieren, bleibt die Qualität erhalten, da die mathematische Formel die Beziehung zwischen den verschiedenen Befehlen aufrechterhält. Ein gutes Beispiel für ImageVector sind die Materialsymbole, 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 die painterResource() verwendet werden. Damit wird ein ImageBitmap erstellt und ein Painter-Objekt zurückgegeben (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. Fotos, die Sie mit Ihrer Kamera aufnehmen, lassen sich beispielsweise nicht in einen Vektor umwandeln.

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() übernimmt das Laden von 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 du weitere Anpassungen benötigst und selbst auf die ImageVector zugreifen möchtest, kannst du sie so laden:

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