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.
![Exemple de fichier JPEG](https://developer.android.com/static/develop/ui/compose/images/graphics-sourceimage.jpg?authuser=9&hl=fr)
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.
![Exemple de vecteur (les extensions de fichier sont .xml ou sont définies dans le code Kotlin)](https://developer.android.com/static/develop/ui/compose/images/graphics-shopping.png?authuser=9&hl=fr)
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) )
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)
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) )
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)
Recommandations personnalisées
- Remarque : Le texte du lien s'affiche lorsque JavaScript est désactivé
- Peinture personnalisée {:#custom-painter}
- Ressources dans Compose
- Chargement d'images {:#loading-images}