Bitmap-Bild im Vergleich zu Vektorbild

Die beiden häufigsten Arten von Bildformaten sind Raster- und Vektorgrafiken.

Ein Rastergrafikformat enthält Pixel: winzige einzelne Quadrate mit einer Farbe (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 Anzahl von Pixeln). Wenn Sie die Größe des Bildes erhöhen, verliert es an Details und es kann zu einer Pixelbildung kommen. Beispiele für Rastergrafikformate sind JPEG, PNG und WEBP.

Eine Nahaufnahme eines Golden Retrievers.
Abbildung 1. JPEG-Beispieldatei.

Vektorgrafiken 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 werden soll, z. B. eine Linie, ein Punkt oder eine Füllung. Wenn Sie einen Vektor auf dem Bildschirm skalieren, verliert er nicht an Qualität, da die mathematische Formel die Beziehung zwischen den verschiedenen Befehlen beibehält. Gute Beispiele für ImageVectors sind die Material Symbole, da sie alle mit mathematischen Formeln definiert werden können.

Ein einfaches Strichzeichnungssymbol eines Einkaufswagens mit Griff, Korb und zwei Rädern.
Abbildung 2. Vektorbeispiel (Dateiendungen sind .xml oder in Kotlin-Code definiert).

ImageBitmap

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

Für einfache Anwendungsfälle kann painterResource() verwendet werden, um eine ImageBitmap zu erstellen und ein PainterObjekt 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 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 für das Zeichnen eines ImageVector auf dem Bildschirm verantwortlich. ImageVector unterstützt eine Teilmenge der SVG-Befehle (Scalable Vector Graphics). Nicht alle Bilder können als Vektoren dargestellt werden. Die Fotos, die Sie mit Ihrer Kamera aufnehmen, können beispielsweise nicht in einen Vektor umgewandelt werden.

Sie können ein benutzerdefiniertes ImageVector erstellen, indem Sie entweder eine vorhandene Vektor drawable-XML-Datei importieren (mit dem Importtool in Android Studio importiert) oder die Klasse implementieren und Pfadbefehle manuell ausgeben.

Für einfache Anwendungsfälle funktioniert painterResource() für ImageVectors genauso wie für die ImageBitmap-Klasse und gibt als Ergebnis einen VectorPainter zurück. painterResource() verarbeitet das Laden von VectorDrawables und BitmapDrawables in VectorPainter bzw. BitmapPainter. So laden Sie ein 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 benötigen und Zugriff auf das ImageVector selbst benötigen, können Sie es so laden:

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

Zurück
Bilder werden geladen
Weiter
Materialsymbole