É 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) } }
Pontos principais sobre o código
RoundedPolygon.getBounds()
define uma função de extensão na classeRoundedPolygon
para calcular os limites dela.- A classe
RoundedPolygonShape
implementa a interfaceShape
, 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 objetoRoundedPolygon
, o dimensiona e o translada para caber em um determinado tamanho e retorna um objetoOutline
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) ) }
Pontos principais sobre o código
- Os objetos
RoundedPolygon
eRoundedPolygonShape
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:
