ImageBitmap et ImageVector

Les deux types de formats d'image les plus courants sont les images matricielles et vectorielles.

Le format d'image matricielle contient des pixels, c'est-à-dire de petits carrés d'une certaine couleur (composée de valeurs rouges, vertes, bleues et alpha). En regroupant un grand nombre de pixels, vous pouvez créer une image très détaillée, comme une photo. La résolution d'une image matricielle est fixe, c'est-à-dire que le nombre de pixels est fixe. De ce fait, lorsque vous augmentez la taille de l'image, celle-ci devient moins précise et peut se pixelliser. Exemples de formats d'image matricielle : JPEG, PNG et WEBP.

Figure 1 : Exemple de fichier JPEG

Les images vectorielles, quant à elles, sont des représentations mathématiques évolutives d'un élément visuel à l'écran. Un vecteur est un ensemble de commandes décrivant comment dessiner l'image à l'écran (par exemple, une ligne, un point ou un remplissage). Lors de l'ajustement d'un vecteur à l'écran, la qualité ne se dégrade pas, car la formule mathématique conserve la relation entre les différentes commandes. Les symboles Material sont un bon exemple d'image vectorielle. En effet, ils peuvent tous être définis à l'aide de formules mathématiques.

Figure 2 : Exemple de vecteur (les extensions de fichier sont .xml ou sont définies dans le code Kotlin)

.

ImageBitmap

Dans Compose, une image matricielle (souvent appelée Bitmap) peut être chargée dans une instance ImageBitmap, et un BitmapPainter est chargé de dessiner le bitmap écran.

Pour des cas d'utilisation simples, vous pouvez utiliser painterResource(), qui se charge de créer un ImageBitmap et renvoie un objet Painter (dans ce cas, un BitmapPainter) :

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

Si vous avez besoin d'une personnalisation plus poussée (par exemple, une implémentation personnalisée d'un outil de retouche) et que vous avez besoin d'accéder au ImageBitmap lui-même, vous pouvez le charger comme suit :

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

ImageVector

Un VectorPainter est chargé de dessiner un ImageVector à l'écran. ImageVector est compatible avec un sous-ensemble de commandes SVG. Toutes les images ne peuvent pas être représentées sous forme de vecteurs. Par exemple, les photos que vous prenez avec votre appareil photo ne peuvent pas être transformées en vecteurs.

Vous pouvez créer un ImageVector personnalisé en important un fichier XML drawable vectoriel existant (importé dans Android Studio à l'aide de l'outil d'importation), ou en implémentant la classe et en émettant manuellement des commandes de chemin d'accès.

Pour les cas d'utilisation simples, painterResource() fonctionne pour ImageVectors comme pour la classe ImageBitmap, renvoyant le résultat VectorPainter. painterResource() gère le chargement des éléments VectorDrawables et BitmapDrawables dans VectorPainter et BitmapPainter, respectivement. Pour charger un VectorDrawable dans une image, procédez comme suit :

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

Si vous avez besoin d'une personnalisation plus poussée et que vous avez besoin d'accéder à ImageVector, vous pouvez le charger comme suit :

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