Você pode mesclar ou sobrepor imagens de origem para mostrar imagens em camadas em uma tela. Por exemplo, é possível replicar como o Android Framework gera ícones de apps combinando drawables de segundo e primeiro planos separados. Para mostrar imagens em camadas, faça o seguinte:
- Sobrepor imagens em uma tela.
- Sobreponha a fonte.
Compatibilidade de versões
Essa implementação exige que o minSDK do projeto seja definido como nível 21 da API ou mais recente.
Dependências
Sobrepor imagens em uma tela
O código a seguir sobrepõe duas imagens de origem, renderizando uma imagem mesclada na tela:
class OverlayImagePainter constructor( private val image: ImageBitmap, private val imageOverlay: ImageBitmap, private val srcOffset: IntOffset = IntOffset.Zero, private val srcSize: IntSize = IntSize(image.width, image.height), private val overlaySize: IntSize = IntSize(imageOverlay.width, imageOverlay.height) ) : Painter() { private val size: IntSize = validateSize(srcOffset, srcSize) override fun DrawScope.onDraw() { // draw the first image without any blend mode drawImage( image, srcOffset, srcSize, dstSize = IntSize( this@onDraw.size.width.roundToInt(), this@onDraw.size.height.roundToInt() ) ) // draw the second image with an Overlay blend mode to blend the two together drawImage( imageOverlay, srcOffset, overlaySize, dstSize = IntSize( this@onDraw.size.width.roundToInt(), this@onDraw.size.height.roundToInt() ), blendMode = BlendMode.Overlay ) } /** * Return the dimension of the underlying [ImageBitmap] as it's intrinsic width and height */ override val intrinsicSize: Size get() = size.toSize() private fun validateSize(srcOffset: IntOffset, srcSize: IntSize): IntSize { require( srcOffset.x >= 0 && srcOffset.y >= 0 && srcSize.width >= 0 && srcSize.height >= 0 && srcSize.width <= image.width && srcSize.height <= image.height ) return srcSize } }
Pontos principais sobre o código
- Usa
OverlayImagePainter
, que é uma implementação personalizada dePainter
que pode ser usada para sobrepor imagens à imagem de origem. O modo de mesclagem controla como as imagens são combinadas. A primeira imagem não está substituindo nada, então nenhum modo de mesclagem é necessário. O modo de mesclagemOverlay
da segunda imagem substitui as áreas da primeira imagem que são cobertas pela segunda imagem. DrawScope.onDraw()
é substituído, e as duas imagens são sobrepostas nessa função.intrinsicSize
é substituído para informar corretamente o tamanho intrínseco da imagem combinada.
Imagem de origem da sobreposição
Com esse Painter
personalizado, é possível sobrepor uma imagem à
imagem de origem da seguinte maneira:
val rainbowImage = ImageBitmap.imageResource(id = R.drawable.rainbow) val dogImage = ImageBitmap.imageResource(id = R.drawable.dog) val customPainter = remember { OverlayImagePainter(dogImage, rainbowImage) } Image( painter = customPainter, contentDescription = stringResource(id = R.string.dog_content_description), contentScale = ContentScale.Crop, modifier = Modifier.wrapContentSize() )
Pontos principais sobre o código
- As imagens a serem combinadas são carregadas como instâncias
ImageBitmap
antes de serem combinadas usandoOverlayImagePainter
. - As imagens combinadas são renderizadas por um elemento combinável
Image
que usa o pintor personalizado para combinar as imagens de origem durante a renderização.
Resultados
![Painter personalizado que sobrepõe duas imagens, uma em cima da outra.](https://developer.android.com/static/develop/ui/compose/images/graphics-rainbowoverlay.jpg?hl=pt-br)
Image
que usa um Painter
personalizado para sobrepor uma imagem semitransparente de arco-íris à imagem de um cachorro.Coleções que contêm este guia
Este guia faz parte destas coleções selecionadas de guias rápidos que abrangem metas mais amplas de desenvolvimento para Android:
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=pt-br)