Jetpack Compose Glimmer è basato su Jetpack Compose e include elementi componibili, componenti, comportamenti e un tema progettati per gli occhiali con display. Con Glimmer, puoi creare UI native per gli occhiali con display utilizzando Compose, dando vita alle esperienze delle tue app con meno codice, strumenti potenti e API Kotlin intuitive.
Elementi componibili di Jetpack Compose Glimmer
Jetpack Compose Glimmer fornisce @Composable funzioni personalizzate per i display degli occhiali con AI
, come Text, Button e ListItem. Di seguito sono riportate alcune caratteristiche uniche degli elementi componibili di Jetpack Compose Glimmer:
- Stili semplificati: i componenti
Surface, ad esempio, utilizzano per impostazione predefinita sfondi neri o trasparenti per l'ottimizzazione della visualizzazione ottica. - Valori predefiniti dei colori ottimizzati: per impostazione predefinita, Jetpack Compose Glimmer calcola il colore dei contenuti in base al colore dello sfondo, 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 ripple, il che favorisce una visibilità chiara.
Figura 1. Tre stati di messa a fuoco in Jetpack Compose Glimmer, che si distinguono 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 distinguono utilizzando ombreggiature limitate.
Componenti di Jetpack Compose Glimmer
Jetpack Compose Glimmer include un proprio set di componenti progettati su misura, simili ai componenti in Jetpack Compose, ma ottimizzati in modo specifico per le esigenze visive e interattive uniche degli occhiali con display. I componenti di Jetpack Compose Glimmer sono personalizzabili con il tema di Jetpack Compose Glimmer e si basano su funzionalità di Compose di livello inferiore per supportare per impostazione predefinita i metodi di input dell'utente, come il tocco e lo scorrimento.
Per saperne di più su come utilizzare un componente specifico, consulta le seguenti guide:
- Tasti
- Schede
- Icone
- Pulsanti con icone
- Elenchi
- Elementi dell'elenco
- Superfici
- Testo
- Pulsanti di attivazione/disattivazione
- Chip con titolo
- Stack verticali
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 più semplice in Jetpack Compose Glimmer: una tela bianca per qualsiasi design o interazione specifica e personalizzata che vuoi creare.
Modificatori di Jetpack Compose Glimmer
I modificatori in Jetpack Compose Glimmer funzionano in modo identico ai modificatori di Compose, che ti consentono di aumentare gli elementi componibili personalizzandone il layout, l'aspetto e il comportamento. Jetpack Compose Glimmer include modificatori e valori predefiniti unici per il feedback visivo e il rendimento specifici per gli occhiali.
Tema di Jetpack Compose Glimmer
Jetpack Compose Glimmer include un sistema di temi dedicato per gli occhiali con display.
Il tema di Jetpack Compose Glimmer implementa una tavolozza semplificata e ottimizzata di colori, tipografia e forme. Ciò favorisce la massima visibilità e concisione per gli occhiali con display. Tutti i componenti di Jetpack Compose Glimmer sono progettati per l'integrazione automatica con i metodi di input specifici per gli occhiali. Il tema di Jetpack Compose
Glimmer viene esposto utilizzando la GlimmerTheme classe.
Come altri temi in Jetpack Compose, GlimmerTheme include diversi
sottosistemi che vengono brevemente descritti nelle sezioni seguenti insieme ai relativi
attributi personalizzabili:
- Colori
- Tipografia
- Valori di spaziatura dei componenti
- Forme
- Livelli di effetto di profondità
- Dimensioni delle icone
Colori
Il sistema di colori di Jetpack Compose Glimmer è progettato per display additivi
e ambienti reali. A differenza dei temi Android standard, i GlimmerTheme
Colors danno la priorità agli sfondi scuri con accenti semitrasparenti e vivaci
per garantire che i contenuti siano leggibili in condizioni di illuminazione imprevedibili del mondo reale.
Il sistema utilizza una tavolozza in tre parti con colori primari, secondari e neutri. I colori neutri spesso fungono da superfici fisiche dell'UI spaziale, mentre i colori primari e secondari forniscono indicazioni visive chiare per l'interazione e il branding.
GlimmerTheme.Tipografia
Il sistema di tipografia di Jetpack Compose Glimmer include vari stili tipografici per la leggibilità e la concisione sugli occhiali con display. Questi stili sono progettati per massimizzare il contrasto e migliorare la leggibilità del testo tramite pesi più spessi, spaziatura tra le lettere più ampia e altezze delle righe appropriate. Questi stili vengono esposti tramite
GlimmerTheme.typography.
Valori di spaziatura dei componenti
Questi valori vengono utilizzati per garantire una spaziatura coerente tra i componenti di Jetpack Compose Glimmer. Sono inclusi i padding dei componenti, la spaziatura tra i componenti e altri elementi di spaziatura. Tieni presente che la modifica di questi valori influisce sulle dimensioni predefinite della maggior parte dei componenti.
Forme
Il sistema di forme di Jetpack Compose Glimmer definisce un insieme di trattamenti degli angoli
e forme geometriche standard per i componenti, progettati per creare un linguaggio visivo coerente
e minimalista nelle UI degli occhiali con display, con tutte le forme esposte
tramite GlimmerTheme.shapes.
Livelli di effetto di profondità
I componenti di Jetpack Compose Glimmer 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 con display è la combinazione di posizionamento nello spazio z e ombre. Per la maggior parte dei componenti di alto livello, come gli elementi dell'elenco, la profondità viene applicata automaticamente in base allo stato di messa a fuoco. Quando un componente è attivo, acquisisce profondità; quando perde la messa a fuoco, torna al suo stato normale. Tuttavia, per
lavorare con componenti personalizzati, puoi utilizzare il parametro depthEffect su
Modifier.surface o depthEffect.
Dimensioni delle icone
Il sistema di icone di Jetpack Compose Glimmer è progettato per integrarsi in modo coerente con il linguaggio visivo semplificato delle UI degli occhiali con display, spesso sfruttando forme arrotondate come Material Symbols Rounded per una leggibilità ottimale.