Stato attivo in Glimmer di Jetpack Compose

Dispositivi XR applicabili

Queste indicazioni ti aiutano a creare esperienze per questi tipi di dispositivi XR.

Scopri di più sui tipi di dispositivi XR →

Occhiali AI

Scopri di più sui tipi di dispositivi XR →

Tutti i componenti Jetpack Compose Glimmer sono progettati per funzionare con metodi di input standard simili a quelli degli smartphone, ad esempio un tocco o uno scorrimento sul touchpad degli occhiali AI, ma sono anche ricettivi ai comandi di input specifici dell'hardware degli occhiali AI, come i pulsanti della fotocamera e del display. I componenti Jetpack Compose Glimmer gestiscono automaticamente gli eventi di input necessari. Per i componenti personalizzati , puoi utilizzare le API Compose esistenti, come Modifier.draggable o Modifier.scrollable, per implementare comportamenti di interazione specifici.

Sugli occhiali AI con display, l'input del puntatore può influire sullo stato attivo:

• Tocca: interazione diretta per attivare l'elemento. Lo stato attivo si sposta su un elemento quando un utente interagisce con esso.
• Scorri: utilizzato per la navigazione e lo scorrimento. I gesti di scorrimento non gestiti vengono tradotti automaticamente in movimenti dello stato attivo, consentendo una navigazione UI senza interruzioni senza input diretto del puntatore.

(Requisito temporaneo) Attiva il flag di input richiesto:

Utilizzando una funzionalità di Jetpack Compose, il sistema può impostare automaticamente lo stato attivo iniziale sul primo elemento attivabile quando la schermata viene caricata, che spesso è l'elemento in alto a sinistra sullo schermo. Questa funzionalità è ancora in fase di sviluppo e non è attivata per impostazione predefinita. Per attivare questa funzionalità, imposta il isInitialFocusOnFocusableAvailable flag su true nel metodo onCreate() dell'attività.

class GlassesActivityExample : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        @OptIn(ExperimentalComposeUiApi::class)
        ComposeUiFlags.isInitialFocusOnFocusableAvailable = true
        super.onCreate(savedInstanceState)
    }
}

Comportamento e ordine di navigazione

Il movimento e l'ordine dello stato attivo cambiano quando un utente naviga nell'app.

Movimento dello stato attivo

In un container scorrevole, lo stato attivo si sposta continuamente con uno scorrimento sul touchpad. Per gli elementi discreti, come una riga di pulsanti, ogni scorrimento sposta lo stato attivo di un elemento alla volta.

Ordine dello stato attivo

Come in Jetpack Compose, Jetpack Compose Glimmer utilizza la ricerca dello stato attivo unidimensionale. Per scoprire di più sull'ordine di attraversamento dello stato attivo, consulta Modificare l'ordine di attraversamento dello stato attivo.

Per modificare l'elemento inizialmente attivo, puoi aggiungere un Modifier.focusGroup() di primo livello e specificare un onEnter focusProperty personalizzato:

Modifier.focusProperties {
    onEnter = {
        initialFocus.requestFocus()
        cancelFocusChange()
    }
}
.focusGroup()

Container di scorrimento

Per un'esperienza utente ottimale, i container di scorrimento come gli elenchi devono essere l'unico componente principale di una schermata. Evita di posizionare un elenco scorrevole direttamente sopra o sotto altri elementi interattivi, come i pulsanti, per evitare confusione nella navigazione e promuovere un movimento dello stato attivo fluido e prevedibile.

Stati di stato attivo predefiniti

Jetpack Compose Glimmer implementa stati di stato attivo predefiniti nei suoi componenti interattivi, tra cui superfici, schede ed elementi di elenco, promuovendo un feedback visivo coerente e chiaro durante l'interazione dell'utente.

Figura 1. Tre stati di stato attivo in Jetpack Compose Glimmer, che si distinguono utilizzando il feedback visivo basato sul contorno.

• Predefinito: il colore di sfondo del pulsante è derivato da GlimmerTheme.colors.surface, il contenuto principale calcola il colore del contenuto di quella superficie e le icone sono GlimmerTheme.colors.primary.

• Attivo: lo spessore del bordo viene aumentato per comunicare lo stato attivo.

• Attivo + premuto: lo sfondo è impostato su GlimmerTheme.colors.surface con opacità completa per comunicare lo stato selezionato.