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.
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.
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.
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.