Os dois tipos mais comuns de formatos de imagem são rasterizadas e vetoriais.
Um formato gráfico de rasterização contém pixels: pequenos quadrados individuais com uma cor formada por valores vermelhos, verdes, azuis e Alfa. Ao colocar muitos pixels juntos, é possível formar uma imagem muito detalhada, como uma foto. Um gráfico de rasterização tem uma resolução fixa, ou seja, um número fixo de pixels. Isso significa que, quando você aumenta o tamanho da imagem, ela perde detalhes e pode ocorrer pixelização. Exemplos de formatos gráficos rasterizados são JPEG, PNG e WEBP.
![Exemplo de arquivo JPEG](https://developer.android.google.cn/static/develop/ui/compose/images/graphics-sourceimage.jpg?authuser=9&hl=pt)
As imagens vetoriais, por outro lado, são representações matemáticas escalonáveis de um elemento visual na tela. Um vetor é um conjunto de comandos que descrevem como desenhar a imagem na tela, por exemplo, uma linha, um ponto ou um preenchimento. Ao dimensionar um vetor na tela, ele não vai perder qualidade, já que a fórmula matemática vai manter a relação entre os diferentes comandos. Um bom exemplo de imagem vetorial são os símbolos do Material Design, porque todos podem ser definidos com fórmulas matemáticas.
![Exemplo de vetor (as extensões de arquivo são .xml ou definidas no código em Kotlin)](https://developer.android.google.cn/static/develop/ui/compose/images/graphics-shopping.png?authuser=9&hl=pt)
ImageBitmap
No Compose, uma imagem rasterizada, geralmente chamada de Bitmap
, pode ser carregada
em uma instância de ImageBitmap
, e um BitmapPainter
é responsável por
desenhar o bitmap na tela.
Para casos de uso simples, o painterResource()
pode ser usado para criar
uma ImageBitmap
e retornar um objeto Painter
(neste caso, um
BitmapPainter
):
Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description) )
Se você quiser mais personalização, como uma implementação de
pintor personalizado, e precisar de acesso à ImageBitmap
propriamente dita, carregue-a
da seguinte maneira:
val imageBitmap = ImageBitmap.imageResource(R.drawable.dog)
ImageVector
Um VectorPainter
é responsável por desenhar uma ImageVector
na tela.
ImageVector
é compatível com um subconjunto de comandos SVG. Nem todas as imagens podem ser
representadas como vetores. Por exemplo, as fotos que você tira com a câmera não podem
ser transformadas em um vetor.
É possível criar uma ImageVector
personalizada importando um arquivo XML de
drawable vetorial já existente importado para o Android Studio usando a ferramenta de importação ou
implementando a classe e enviando comandos do caminho manualmente.
Para casos de uso simples, da mesma forma que painterResource()
funciona para a
classe ImageBitmap
, também funciona para ImageVectors
, retornando uma
VectorPainter
como resultado. painterResource()
processa o carregamento de
VectorDrawables
e BitmapDrawables
para VectorPainter
e BitmapPainter
,
respectivamente. Para carregar um VectorDrawable
em uma imagem, use:
Image( painter = painterResource(id = R.drawable.baseline_shopping_cart_24), contentDescription = stringResource(id = R.string.shopping_cart_content_desc) )
Se você quiser mais personalização e precisar acessar a ImageVector
propriamente dita, carregue-a da seguinte maneira:
val imageVector = ImageVector.vectorResource(id = R.drawable.baseline_shopping_cart_24)
Recomendados para você
- Observação: o texto do link aparece quando o JavaScript está desativado.
- Pintor personalizado {:#custom-painter}
- Recursos no Compose
- Como carregar imagens {:#loading-images}