ImageBitmap und ImageVector im Vergleich

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

Ein Rastergrafikformat enthält Pixel, d. h. kleine einzelne Quadrate, die ein Farbe (bestehend aus Rot-, Grün-, Blau- und Alpha-Werten). Wenn Sie viele Pixel zusammen bilden, kann ein sehr detailliertes Bild entstehen, etwa ein Foto. Eine Rastergrafik hat eine feste Auflösung (eine feste Anzahl von Pixeln). Das bedeutet, dass Vergrößert das Bild, verliert es Details und die Verpixelung kann auftreten. Beispiele für Rastergrafikformate sind JPEG, PNG und WEBP.

Abbildung 1: Beispiel für eine JPEG-Datei

Vektorbilder sind hingegen skalierbare mathematische Darstellungen eines visuelles Element auf dem Bildschirm. Ein Vektor ist eine Reihe von Befehlen, die beschreiben, wie das Bild auf dem Bildschirm, zum Beispiel eine Linie, einen Punkt oder eine Füllung. Beim Skalieren eines Vektors wird nicht an Qualität verloren, da die mathematische Formel Beziehung zwischen den verschiedenen Befehlen. 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 (oft auch Bitmap genannt) nach oben in eine ImageBitmap-Instanz verwandelt, wobei ein BitmapPainter indem ich die Bitmap auf dem Bildschirm zeichne.

Für einfache Anwendungsfälle kann das painterResource() verwendet werden, das beim Erstellen eines 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. einen benutzerdefinierten Maler Implementierung) und Zugriff auf das ImageBitmap selbst benötigen, können Sie es laden, auf folgende Weise:

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

ImageVector

Ein VectorPainter ist dafür verantwortlich, ein ImageVector auf den Bildschirm zu ziehen. ImageVector unterstützt eine Teilmenge der SVG-Befehle. Nicht alle Bilder können die als Vektoren dargestellt werden (z. B. können Fotos, die Sie mit Ihrer Kamera aufnehmen, 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 genauso wie painterResource() für den ImageBitmap verwendet wird, funktioniert es auch für ImageVectors. Es wird Folgendes zurückgegeben: VectorPainter als Ergebnis. painterResource() lädt VectorDrawables und BitmapDrawables in VectorPainter bzw. BitmapPainter. Um ein VectorDrawable in ein Bild zu laden, verwenden Sie:

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