Icone in Jetpack Compose Glimmer

Dispositivi XR applicabili
Queste indicazioni ti aiutano a creare esperienze per questi tipi di dispositivi XR.
Scopri di più sui tipi di dispositivi XR →
Occhiali con display
Scopri di più sui tipi di dispositivi XR →

In Jetpack Compose Glimmer, il componente Icon è un elemento dell'interfaccia utente per il rendering di icone monocolore. Le icone gestiscono in modo intelligente la colorazione e il ridimensionamento in modo che rimangano leggibili e visivamente coerenti con GlimmerTheme.

Dimensioni

Anche se per impostazione predefinita le icone hanno le dimensioni fornite da LocalIconSize, puoi anche utilizzare le tre dimensioni delle icone fornite per impostare una dimensione specifica. Queste dimensioni vengono utilizzate per impostazione predefinita anche per i seguenti contesti:

Token di dimensione Utilizzo predefinito

small

Per elementi pubblicitari standard o chip di piccole dimensioni.

medium

Per icone autonome e chip di titoli.

large

Per componenti ad alta enfasi come le schede.

Origini delle icone

Le icone possono accettare ImageVector, ImageBitmap o Painter come origine. Quando definisci le tue icone, utilizza ImageVector ove possibile per promuovere il rendering nitido su qualsiasi scala sugli occhiali con display.

Colore e colorazione

  • Colorazione automatica: l'icona risolve il colore in base a LocalContentColorLocalContentColor fornito dalla superficie principale fornito dalla superficie principale, ad esempio surface o Button.
  • Colorazione manuale: utilizza il parametro tint per applicare un colore specifico.
  • Asset multicolore: per le icone che non devono essere colorate (ad esempio i loghi del brand multicolore), imposta tint = Color.Unspecified.
  • Immagini generiche: per fotografie o immagini generiche che non seguono le regole di dimensionamento e colorazione delle icone, utilizza invece androidx.compose.foundation.Image standard.

Esempio: icona di base

Il seguente codice crea un'icona di base:

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

Esempio: icone con colore

Il seguente codice crea un'icona colorata utilizzando il colore principale del tema:

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

Esempio: icone di dimensioni diverse

Il seguente codice crea un'icona modificata per avere una dimensione specifica:

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

Punti chiave sul codice

  • La dimensione dell'icona viene personalizzata utilizzando GlimmerTheme.iconSizes con un modificatore. Per le icone, il valore predefinito è GlimmerTheme.iconSizes.medium. Utilizza queste dimensioni anziché codificare i valori per mantenere la coerenza nell'interfaccia utente.
  • Fornisce una contentDescription localizzata per l'icona. Fornisci sempre queste descrizioni, a meno che l'icona non sia puramente decorativa.