I due tipi più comuni di formati di immagini sono le immagini raster e vettoriali.
Un formato grafico raster contiene pixel: piccoli quadratini 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.
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 regoli le dimensioni di un vettore sullo schermo, la qualità non viene persa perché la formula matematica mantiene la relazione tra i diversi comandi. Un buon esempio di ImageVector sono i simboli Material, in quanto possono essere tutti definiti con formule matematiche.
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)
)
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)
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 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 al ImageVector
in sé, puoi caricarlo nel seguente modo:
val imageVector = ImageVector.vectorResource(id = R.drawable.baseline_shopping_cart_24)
Consigliati per te
- Nota: il testo del link viene visualizzato quando JavaScript è disattivato
- Custom painter {:#custom-painter}
- Risorse in Compose
- Caricamento delle immagini {:#loading-images}