Mostrar uma imagem cortada em uma forma

Você pode ajustar uma imagem a uma forma cortada e desenhar sombras ao redor do perímetro para dar uma sensação tridimensional. Essa técnica é útil para criar designs como avatares e miniaturas de produtos ou mostrar logotipos com formas personalizadas.

Para mostrar uma imagem cortada em uma forma, faça o seguinte:

  • Crie a forma.
  • Corte a imagem na forma.

Resultados

Cachorro em um hexágono com sombra nas bordas
Figura 1. A forma personalizada foi aplicada como clipe.

Compatibilidade de versões

Essa implementação exige que o minSDK do projeto seja definido como nível da API 21 ou mais recente.

Dependências

Criar uma forma

O código a seguir cria uma forma personalizada que pode desenhar e renderizar dinamicamente um polígono arredondado:

fun RoundedPolygon.getBounds() = calculateBounds().let { Rect(it[0], it[1], it[2], it[3]) }
class RoundedPolygonShape(
    private val polygon: RoundedPolygon,
    private var matrix: Matrix = Matrix()
) : Shape {
    private var path = Path()
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        path.rewind()
        path = polygon.toPath().asComposePath()
        matrix.reset()
        val bounds = polygon.getBounds()
        val maxDimension = max(bounds.width, bounds.height)
        matrix.scale(size.width / maxDimension, size.height / maxDimension)
        matrix.translate(-bounds.left, -bounds.top)

        path.transform(matrix)
        return Outline.Generic(path)
    }
}

Pontos principais sobre o código

  • RoundedPolygon.getBounds() define uma função de extensão na classe RoundedPolygon para calcular os limites dela.
  • A classe RoundedPolygonShape implementa a interface Shape, permitindo definir uma forma personalizada (um polígono arredondado) no Jetpack Compose.
  • A forma usa um Matrix para gerenciar operações de escalonamento e tradução para renderização flexível.
  • A função createOutline() usa um objeto RoundedPolygon, dimensiona e traduz para caber em um determinado tamanho e retorna um objeto Outline que descreve a forma final a ser desenhada.

Cortar a imagem em uma forma

O código a seguir corta a imagem em um hexágono e adiciona uma sombra leve para dar uma sensação de profundidade:

val hexagon = remember {
    RoundedPolygon(
        6,
        rounding = CornerRounding(0.2f)
    )
}
val clip = remember(hexagon) {
    RoundedPolygonShape(polygon = hexagon)
}
Box(
    modifier = Modifier
        .clip(clip)
        .background(MaterialTheme.colorScheme.secondary)
        .size(200.dp)
) {
    Text(
        "Hello Compose",
        color = MaterialTheme.colorScheme.onSecondary,
        modifier = Modifier.align(Alignment.Center)
    )
}

Pontos principais sobre o código

  • Os objetos RoundedPolygon e RoundedPolygonShape são usados para definir e aplicar um formato hexagonal à imagem.
  • O código usa graphicsLayer para adicionar uma sombra baseada em elevação à imagem. Isso cria uma sensação de profundidade e separação visual do plano de fundo.
  • O uso de blocos remember otimiza a performance, garantindo que as definições de forma e corte sejam calculadas apenas uma vez e lembradas para recomposições posteriores da interface.

Coleções que contêm este guia

Este guia faz parte das coleções de guias rápidos selecionados que abordam objetivos mais amplos de desenvolvimento para Android:

Descubra técnicas para usar recursos visuais vibrantes e envolventes para dar ao seu app Android uma aparência incrível.
Coleção de guias rápidos

Tem dúvidas ou quer dar feedback?

Acesse nossa página de perguntas frequentes e confira guias rápidos ou entre em contato para compartilhar sua opinião.
Acessar as perguntas frequentes Enviar feedback