ImageBitmap und ImageVector im Vergleich

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

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

Abbildung 1: Beispiel für eine JPEG-Datei

Vektorbilder sind dagegen 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, einen Punkt oder eine Füllung. Beim Skalieren eines Vektors auf dem Bildschirm wird die Qualität nicht beeinträchtigt, da die mathematische Formel die Beziehung zwischen den verschiedenen Befehlen beibehält. Ein gutes Beispiel für ImageVector sind die Material-Symbole, da sie alle mit mathematischen Formeln definiert werden können.

Abbildung 2: Vektorbeispiel (Dateierweiterungen sind .xml oder in Kotlin-Code definiert)

ImageBitmap

In Compose kann ein Rasterbild (oft als Bitmap bezeichnet) in eine ImageBitmap-Instanz geladen werden. Über eine BitmapPainter wird die Bitmap auf den Bildschirm gezeichnet.

Für einfache Anwendungsfälle kann painterResource() verwendet werden, um ein ImageBitmap zu erstellen und ein Painter-Objekt zurückzugeben (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 vornehmen möchten (z. B. eine benutzerdefinierte Painter-Implementierung) und Zugriff auf das ImageBitmap selbst benötigen, können Sie es so laden:

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

ImageVector

Ein VectorPainter ist für das Zeichnen von ImageVector auf dem Bildschirm verantwortlich. ImageVector unterstützt einen Teil der SVG-Befehle. Nicht alle Bilder können als Vektoren dargestellt werden. Fotos, die Sie mit Ihrer Kamera aufnehmen, lassen sich zum Beispiel nicht in einen Vektor umwandeln.

Sie können eine benutzerdefinierte ImageVector erstellen, indem Sie entweder eine vorhandene Vektor-Drawable-XML-Datei importieren, die mit dem Importtool in Android Studio importiert wurde, oder die Klasse und die Pfadbefehle manuell implementieren.

Bei einfachen Anwendungsfällen funktioniert painterResource() genauso wie für die Klasse ImageBitmap und für ImageVectors. Dabei wird ein VectorPainter als Ergebnis zurückgegeben. painterResource() übernimmt das Laden von VectorDrawables und BitmapDrawables in VectorPainter bzw. BitmapPainter. Verwenden Sie folgenden Code, um ein VectorDrawable in ein Bild zu laden:

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 benötigen und auf das ImageVector selbst zugreifen müssen, können Sie es so laden:

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