Jetpack Compose Glimmer è basato su Jetpack Compose e include composable, 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.
Componenti componibili 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 Glimmer di Jetpack Compose:
- 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 utilizzando un 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 insieme 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 per impostazione predefinita metodi di input dell'utente come tocco e scorrimento.
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 blocco
di base in Jetpack Compose Glimmer, una tela bianca per qualsiasi design o interazione
specifico e personalizzato che vuoi creare.
Modificatori di Jetpack Compose Glimmer
I modificatori nella funzione Glimmer di Jetpack Compose funzionano in modo identico ai modificatori di Compose, consentendoti di aumentare i composable personalizzandone layout, aspetto e 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 primo piano) altre
schede. La profondità sugli occhiali AI è la combinazione di posizionamento nello spazio Z e
ombre. Per la maggior parte dei componenti di alto 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 la massima concisione
per gli occhiali con AI. Tutti i componenti Glimmer di Jetpack Compose 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 Glimmer di Jetpack Compose include anche componenti Glimmer di Jetpack Compose che puoi personalizzare.
Colori
Il sistema di colori di Jetpack Compose Glimmer 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 |
#A8C7FA |
secondario |
#4C88E9 |
positiva |
#4CE995 |
negativa |
#F57084 |
piattaforma |
#000000 |
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 Jetpack Compose Glimmer 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 di tipografia 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ù marcati, spaziatura
più ampia tra le lettere e interlinea appropriata. Questi stili sono esposti tramite
GlimmerTheme.typography.
Icone
Il sistema di icone di Glimmer di Jetpack Compose è 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.