ImageBitmap e ImageVector

I due tipi più comuni di formati di immagini sono le immagini raster e vettoriali.

Un formato di grafica raster contiene pixel: piccoli quadrati singoli che contengono un colore (composto da valori di rosso, verde, blu e alfa). Se metti insieme molti pixel, puoi creare un'immagine molto dettagliata, ad esempio una fotografia. Un'immagine raster ha una risoluzione fissa (numero fisso di pixel). Ciò significa che quando aumenti le dimensioni dell'immagine, questa perde dettagli e può verificarsi la pixelizzazione. Alcuni esempi di formati di immagini raster sono JPEG, PNG e WEBP.

Figura 1: esempio di file JPEG

Le immagini vettoriali, invece, sono rappresentazioni matematiche scalabili di un elemento visivo sullo schermo. Un vettore è un insieme di comandi che descrivono come disegnare l'immagine sullo schermo, ad esempio una linea, un punto o un'area di colore. Quando si ridimensiona un vettore sullo schermo, la qualità non viene compromessa poiché la formula matematica mantiene la relazione tra i diversi comandi. Un buon esempio di ImageVector sono i simboli del materiale, in quanto possono essere tutti definiti con formule matematiche.

Figura 2: esempio di vettore (le estensioni dei file sono .xml o definite nel codice Kotlin)

ImageBitmap

In Compose, un'immagine raster (spesso indicata come Bitmap) può essere caricata in un'istanza ImageBitmap e un BitmapPainter è responsabile del disegno della bitmap sullo schermo.

Per casi d'uso semplici, puoi utilizzare painterResource(), che si occupa di creare un ImageBitmap e restituisce un oggetto Painter (in questo caso un BitmapPainter):

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

Se hai bisogno di ulteriore personalizzazione (ad esempio un'implementazione di un pittore personalizzato) e devi accedere al ImageBitmap stesso, puoi caricarlo nel seguente modo:

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

ImageVector

Un VectorPainter è responsabile del disegno di un ImageVector sullo schermo. ImageVector supporta un sottoinsieme di comandi SVG. Non tutte le immagini possono essere rappresentate come vettori (ad esempio, le foto scattate con la fotocamera non possono essere trasformate in vettori).

Puoi creare un ImageVector personalizzato importando un file XML drawable vettoriale esistente (importato in Android Studio utilizzando lo strumento di importazione) o implementando la classe ed emettendo manualmente i comandi di percorso.

Per casi d'uso semplici, painterResource() funziona allo stesso modo per la classe ImageBitmap e per ImageVectors, restituendo un valore VectorPainter come risultato. painterResource() gestisce il caricamento di VectorDrawables e BitmapDrawables in VectorPainter e BitmapPainter rispettivamente. Per caricare VectorDrawable in un'immagine, utilizza:

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

Se hai bisogno di ulteriore personalizzazione e devi accedere al ImageVector in sé, puoi caricarlo nel seguente modo:

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