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.
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.
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.
- Painter personalizado {:#custom-painter}
- Recursos no Compose
- Carregando imagens {:#loading-images}