Ícones no Jetpack Compose Glimmer

Dispositivos XR relevantes

Estas orientações ajudam você a criar experiências para esses tipos de dispositivos XR.

Saiba mais sobre tipos de dispositivos XR →

Saiba mais sobre tipos de dispositivos XR →

No Glimmer do Jetpack Compose, o Icon componente é um elemento da interface para renderizar ícones de uma única cor. Os ícones processam a tonalidade e o dimensionamento de maneira inteligente para que permaneçam legíveis e visualmente consistentes com o GlimmerTheme.

Tamanhos

Embora os ícones sejam definidos como o tamanho fornecido por LocalIconSize, também é possível usar os três tamanhos de ícones fornecidos para definir um tamanho específico. Esses tamanhos também são usados por padrão para os seguintes contextos:

Origens de ícones

Os ícones podem aceitar ImageVector, ImageBitmap ou Painter como origem. Ao definir seus próprios ícones, use ImageVector sempre que possível para promover a renderização nítida em qualquer escala em óculos de exibição.

Cor e tonalidade

• Tonalidade automática: o ícone resolve a cor com base no LocalContentColor fornecido pela superfície principal LocalContentColor fornecido pela superfície principal, como um surface ou Button.
• Tonalidade manual: use o parâmetro tint para aplicar uma cor específica.
• Recursos multicoloridos: para ícones que não devem ser coloridos (como logotipos de marcas multicoloridas), defina tint = Color.Unspecified.
• Imagens genéricas: para fotografias ou imagens genéricas que não seguem as regras de dimensionamento e tonalidade de ícones, use o androidx.compose.foundation.Image padrão.

Exemplo: ícone básico em uma superfície

O código a seguir cria um ícone colocado dentro de uma superfície circular, usando a cor principal do tema:

@Composable
fun IconSampleUsage() {
    GlimmerLazyColumn(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        item { IconSizesSample() }
        item {
            Icon(
                FavoriteIcon,
                "Localized description",
                Modifier.surface(
                        shape = CircleShape,
                        color = GlimmerTheme.colors.primary,
                        border = null,
                    )
                    .padding(12.dp),
            )
        }
    }
}
IconSamples.kt

Exemplo: ícones com tamanhos diferentes

O código a seguir demonstra os diferentes tamanhos de ícones:

@Composable
fun IconSizesSample() {
    val iconSizes = GlimmerTheme.iconSizes
    Column(
        verticalArrangement = Arrangement.spacedBy(20.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.small))
        // medium is also the default size, defining explicitly for clarity
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.medium))
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.large))
    }
}
IconSamples.kt

Pontos principais sobre o código

• O tamanho de cada ícone é personalizado usando GlimmerTheme.iconSizes com um modificador. Para ícones, o valor padrão é GlimmerTheme.iconSizes.medium. Use esses tamanhos em vez de valores codificados para manter a consistência na interface.
• Fornece uma contentDescription localizada para cada ícone. Sempre forneça essas descrições, a menos que o ícone seja puramente decorativo.