Íconos en Jetpack Compose Glimmer

Dispositivos de realidad extendida correspondientes

Esta guía te ayuda a crear experiencias para estos tipos de dispositivos de realidad extendida.

Más información sobre los tipos de dispositivos de realidad extendida →

Más información sobre los tipos de dispositivos de realidad extendida →

En Jetpack Compose Glimmer, el Icon componente es un elemento de la IU para renderizar íconos de un solo color. Los íconos controlan de forma inteligente el sombreado y el escalamiento para que sigan siendo legibles y visualmente coherentes con el GlimmerTheme.

Tamaños

Si bien los íconos usan de forma predeterminada el tamaño que proporciona LocalIconSize, también puedes usar los tres tamaños de íconos proporcionados para establecer un tamaño específico. Estos tamaños también se usan de forma predeterminada para los siguientes contextos:

Fuentes de íconos

Los íconos pueden aceptar ImageVector, ImageBitmap o Painter como fuente. Cuando definas tus propios íconos, usa ImageVector siempre que sea posible para promover la renderización nítida en cualquier escala en los lentes de visualización.

Color y sombreado

• Sombreado automático: El ícono resuelve su color en función del LocalContentColor que proporciona la superficie superior LocalContentColor que proporciona la superficie superior, como un surface o Button.
• Sombreado manual: Usa el parámetro tint para aplicar un color específico.
• Elementos multicolores: Para los íconos que no deben estar sombreados (como los logotipos de marcas multicolores), establece tint = Color.Unspecified.
• Imágenes genéricas: Para fotografías o imágenes genéricas que no siguen las reglas de tamaño y sombreado de íconos, usa el androidx.compose.foundation.Image estándar.

Ejemplo: Ícono básico dentro de una superficie

El siguiente código crea un ícono colocado dentro de una superficie circular, utilizando el color primario del 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

Ejemplo: Íconos con diferentes tamaños

En el siguiente código, se muestran los diferentes tamaños de íconos:

@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

Puntos clave sobre el código

• El tamaño de cada ícono se personaliza con GlimmerTheme.iconSizes con un modificador. Para los íconos, el valor predeterminado es GlimmerTheme.iconSizes.medium. Usa estos tamaños en lugar de codificar valores de forma rígida para mantener la coherencia en toda la IU.
• Proporciona un contentDescription localizado para cada ícono. Siempre proporciona estas descripciones, a menos que el ícono sea puramente decorativo.