Mostrar imagens em camadas em uma tela

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
    }
}
CustomPainterSnippets.kt

Pontos principais sobre o código

  • Usa OverlayImagePainter, que é uma implementação personalizada de Painter 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 mesclagem Overlay 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()
)
CustomPainterSnippets.kt

Pontos principais sobre o código

  • As imagens a serem combinadas são carregadas como instâncias ImageBitmap antes de serem combinadas usando OverlayImagePainter.
  • 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.
Figura 1: um 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:

Descubra técnicas para usar recursos visuais vibrantes e envolventes e dar ao seu app Android uma aparência bonita.
Coletânea de guias rápidos

Tem dúvidas ou feedback?

Acesse a página de perguntas frequentes e saiba mais sobre os guias rápidos ou entre em contato e conte o que você pensa.
Acessar as perguntas frequentes Enviar feedback