ImageBitmap e ImageVector

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

Un formato grafico raster contiene pixel: piccoli quadrati individuali che contengono un colore (composto da valori di rosso, verde, blu e alfa). Quando si posizionano molti pixel insieme, si può formare un'immagine molto dettagliata, come 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. Esempi di formati di grafica raster sono JPEG, PNG e WEBP.

Esempio di file JPEG
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 riempimento. Quando ridimensioni un vettore sullo schermo, non perderà qualità perché la formula matematica manterrà la relazione tra i diversi comandi. Un buon esempio di ImageVector sono i simboli di Material, in quanto possono essere definiti tutti con formule matematiche.

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

ImageBitmap

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

Per i casi d'uso semplici, è possibile 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)
)

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

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

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 un vettore).

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

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

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

Se hai bisogno di ulteriore personalizzazione e devi accedere a ImageVector stesso, puoi caricarlo nel seguente modo:

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