Che cosa è incluso in Jetpack Compose Glimmer

Dispositivi XR applicabili
Queste indicazioni ti aiutano a creare esperienze per questi tipi di dispositivi XR.
AI Glasses

Jetpack Compose Glimmer è basato su Jetpack Compose e include composizioni, componenti, comportamenti e un tema progettati per gli occhiali con display basati sull'AI. Con Glimmer, puoi creare un'interfaccia utente nativa per gli occhiali AI utilizzando Compose, dando vita alle tue esperienze app con meno codice, strumenti potenti e API Kotlin intuitive.

Elementi composable Glimmer di Jetpack Compose

Jetpack Compose Glimmer fornisce funzioni @Composable personalizzate per i display degli occhiali AI, come Text, Button e ListItem. Ecco alcune caratteristiche uniche dei composable Jetpack Compose Glimmer:

  • Stile semplificato: i componenti Surface, ad esempio, hanno sfondi neri o trasparenti per impostazione predefinita per l'ottimizzazione della visualizzazione ottica.
  • Valori predefiniti ottimizzati per i colori: Jetpack Compose Glimmer calcola il colore dei contenuti in base al colore dello sfondo per impostazione predefinita, quindi gli sviluppatori raramente devono impostare manualmente i colori del testo, migliorando la leggibilità senza alcun lavoro aggiuntivo.
  • Messa a fuoco differenziata: la messa a fuoco è indicata utilizzando un feedback visivo basato sul contorno anziché sull'effetto increspatura, il che favorisce una visibilità chiara.

    Figura 1. Tre stati di messa a fuoco in Jetpack Compose Glimmer, che si differenziano per il feedback visivo basato sul contorno.
  • Elevazione ottimizzata: Jetpack Compose Glimmer utilizza ombreggiature limitate per la separazione visiva

    Figura 2. Cinque livelli di elevazione in Jetpack Compose Glimmer, che si differenziano per l'uso di ombreggiature limitate.

Componenti Glimmer di Jetpack Compose

Jetpack Compose Glimmer include un proprio set di componenti progettati su misura, simili ai componenti di Jetpack Compose, ma ottimizzati in modo specifico per le esigenze visive e interattive uniche degli occhiali AI. I componenti Glimmer di Jetpack Compose sono personalizzabili con il tema Glimmer di Jetpack Compose e si basano su funzionalità di Compose di livello inferiore per supportare i metodi di immissione dell'utente come tocco e scorrimento per impostazione predefinita.

Per saperne di più sull'utilizzo di un componente specifico, consulta le seguenti guide:

Se uno di questi componenti di alto livello non funziona per il tuo caso d'uso, puoi utilizzare un surface per creare un componente personalizzato. Le superfici sono il componente di base in Jetpack Compose Glimmer, una tela bianca per qualsiasi design o interazione personalizzati che vuoi creare.

Modificatori Glimmer di Jetpack Compose

I modificatori nella funzione Glimmer di Jetpack Compose funzionano in modo identico ai modificatori di Compose, consentendoti di aumentare i composable personalizzando il layout, l'aspetto e il comportamento. Jetpack Compose Glimmer potrebbe introdurre modificatori specifici o applicare valori predefiniti unici per il feedback visivo e le prestazioni specifiche per gli occhiali.

Profondità del bagliore di Jetpack Compose

I componenti Glimmer di Jetpack Compose utilizzano la profondità per rappresentare la gerarchia, il che aiuta a distinguere visivamente gli elementi che vengono visualizzati sopra (in cima) ad altre schede. La profondità sugli occhiali AI è la combinazione di posizionamento nello spazio Z e ombre. Per la maggior parte dei componenti di primo livello, come gli elementi di elenco, la profondità viene applicata automaticamente in base allo stato attivo. Quando un componente è attivo, acquisisce profondità; quando perde lo stato attivo, torna al suo stato normale. Tuttavia, per lavorare con i componenti personalizzati, puoi utilizzare il parametro di profondità su Modifier.surface o Modifier.depth.

Tema Glimmer di Jetpack Compose

Jetpack Compose Glimmer include un sistema di temi dedicato per gli occhiali AI. Il tema Glimmer di Jetpack Compose implementa una tavolozza semplificata e ottimizzata di colori, tipografia e forme. In questo modo si promuovono la massima visibilità e concisione per gli occhiali AI. Tutti i componenti di Jetpack Compose Glimmer sono progettati per l'integrazione automatica con i metodi di input specifici degli occhiali AI. Jetpack Compose Il tema di Glimmer viene esposto utilizzando la classe GlimmerTheme.

Come altri temi in Jetpack Compose, GlimmerTheme include diversi sottosistemi: colori, forme, tipografia e icone (simbologia). Il tema di Jetpack Compose Glimmer include anche componenti Jetpack Compose Glimmer che puoi personalizzare.

Colori

Il sistema di colori di Glimmer di Jetpack Compose include sette colori nella sua tavolozza ottimizzata, progettata per la massima visibilità e concisione sui display degli occhiali AI in cui i valori neri non vengono visualizzati.

Figura 3. Una panoramica dei colori in GlimmerTheme.

Tieni presente che i colori "Su…" non sono esposti tramite GlimmerTheme. Questi colori vengono calcolati automaticamente dal sistema in base al colore di sfondo.

Questi colori sono esposti tramite GlimmerTheme.colors.primary, con valori per ogni ruolo di colore, come descritto nella tabella seguente:

Ruolo colore

Impostazioni predefinite

principale

#9BBFFF

secondario

#4C88E9

positiva

#63FEA8

negativa

#FFA7A0

piattaforma

#262626

outline

#606460

outlineVariant

#42434A

Tieni presente che, sebbene surface, outline e outlineVariant siano contrassegnati come personalizzabili, ti consigliamo vivamente di non personalizzare questi valori.

Forme

Il sistema di forme di Glimmer di Jetpack Compose definisce un insieme di trattamenti standard degli angoli e forme geometriche per i componenti, progettati per creare un linguaggio visivo coerente e minimalista nelle UI degli occhiali AI, con tutte le forme esposte tramite GlimmerTheme.shapes.

Figura 4. Esempio di forme grandi, medie e piccole in Jetpack Compose Glimmer.

Tipografia

Il sistema tipografico di Jetpack Compose Glimmer include sei stili tipografici per leggibilità e concisione sui display degli occhiali AI. Questi stili sono progettati per massimizzare il contrasto e migliorare la leggibilità del testo grazie a pesi più spessi, spaziatura più ampia tra le lettere e interlinea appropriata. Questi stili sono esposti tramite GlimmerTheme.typography.

Figura 5. Un esempio dei sei stili tipografici di Glimmer di Jetpack Compose.

Icone

Il sistema di icone di Jetpack Compose Glimmer è progettato per integrarsi in modo coerente con il linguaggio visivo semplificato delle UI degli occhiali AI, spesso sfruttando forme arrotondate come Material Symbols Rounded per una leggibilità ottimale.