É 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
![Cachorro em hexágono com sombra aplicada nas bordas](https://developer.android.com/static/develop/ui/compose/images/graphics/shapes/clip_with_shadow.png?hl=pt-br)
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)