Mostrar uma imagem cortada em uma forma

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

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

• Crie a forma.
• Cortar a imagem para a forma.

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

Criar uma forma

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

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)
    }
}
ShapesSnippets.kt

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 que você defina 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, o dimensiona e o translada 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 abaixo recorta a imagem para um hexágono e adiciona uma sombra sutil 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)
    )
}
ShapesSnippets.kt

Pontos principais sobre o código

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

Resultados

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:

Exibir imagens

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