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 →
Display Glasses
Scopri di più sui tipi di dispositivi XR →

In Jetpack Compose Glimmer, il componente Icon è un elemento UI 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 il GlimmerTheme.

Dimensioni

Anche se le icone hanno come impostazione predefinita 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 di elenchi standard o piccoli chip.

medium

Per icone autonome e chip dei titoli.

large

Per i componenti con enfasi elevata, come le schede.

Origini delle icone

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

Colore e colorazione

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

Esempio: icona di base all'interno di una superficie

Il seguente codice crea un'icona posizionata all'interno di una superficie circolare, utilizzando il colore principale 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),
            )
        }
    }
}

Esempio: icone di dimensioni diverse

Il seguente codice mostra le diverse dimensioni delle icone:

@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))
    }
}

Punti chiave sul codice

  • La dimensione di ogni 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'intera UI.
  • Fornisce un contentDescription localizzato per ogni icona. Fornisci sempre queste descrizioni, a meno che l'icona non sia puramente decorativa.