Í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 →
Lentes de visualización
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:

Token de tamaño Uso predeterminado

small

Para elementos de lista estándar o chips pequeños

medium

Para íconos independientes y chips de título

large

Para componentes de gran énfasis, como tarjetas

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.
  • Recursos multicolores: Para los íconos que no deben tener sombreado (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

El siguiente código crea un ícono básico:

@Composable
fun IconSample() {
    Icon(FavoriteIcon, contentDescription = "Localized description")
}

Ejemplo: Íconos con color

El siguiente código crea un ícono de color con el color primario del tema:

@Composable
fun ColoredIconSample() {
    Icon(
        FavoriteIcon,
        tint = GlimmerTheme.colors.primary,
        contentDescription = "Localized description",
    )
}

Ejemplo: Íconos con diferentes tamaños

El siguiente código crea un ícono que se modifica para que tenga un tamaño específico:

@Composable
fun SizedIconSample() {
    Icon(
        FavoriteIcon,
        contentDescription = "Localized description",
        modifier = Modifier.size(GlimmerTheme.iconSizes.large),
    )
}

Puntos clave sobre el código

  • El tamaño del í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 el ícono. Siempre proporciona estas descripciones, a menos que el ícono sea puramente decorativo.