Imposta lo stato attivo in Scrivi

Quando un utente interagisce con l'app, spesso tocca gli elementi sullo schermo per farlo. Tuttavia, questa non è l'unica forma di interazione. Altre forme di interazione potrebbero includere:

• Un utente di ChromeOS potrebbe usare i tasti freccia sulla tastiera fisica per navigare nella schermata.
• Chi sta giocando può utilizzare il controller di gioco collegato per navigare nel menu del gioco.
• Un utente di un'app per dispositivi mobili potrebbe scorrere gli elementi utilizzando la tastiera sullo schermo.

In questi casi, è importante monitorare quale componente è attivo in un determinato momento, ovvero ciò che chiamiamo focus. Gli elementi sullo schermo dovrebbero essere incentrati in un ordine logico. Jetpack Compose ha un modo predefinito di gestire lo stato attivo, corretto nella maggior parte dei casi. Tuttavia, in alcuni casi potrebbe essere necessario modificare questo comportamento predefinito.

Le pagine seguenti descrivono come utilizzare lo stato attivo nella tua app:

• Modifica dell'ordine di attraversamento dello stato attivo: spiega come modificare l'ordine di impostazione dello stato attivo predefinito, aggiungere i focus group e disattivare lo stato attivo di un componibile.
• Modifica il comportamento dello stato attivo: descrive come richiedere, acquisire e rilasciare l'elemento attivo e come reindirizzare lo stato attivo quando entri in una schermata.
• Reagisci per concentrarti: spiega come reagire ai cambiamenti di impostazione dello stato attivo, aggiungere indizi visivi agli elementi e comprendere lo stato di messa a fuoco di un elemento.

Ordine di attraversamento dell'elemento attivo predefinito

Prima di approfondire il comportamento predefinito della ricerca focus, è importante comprendere il concetto di livello nella gerarchia: in generale, possiamo dire che due Composables sono allo stesso livello quando sono fratelli e sorelle, ovvero hanno gli stessi genitori. Ad esempio, gli elementi all'interno di un elemento Column sono allo stesso livello. Salire di un livello significa passare da un elemento secondario al relativo elemento principale Composable o, mantenere lo stesso esempio, tornare da un elemento a un elemento Column che lo contiene. Scendere di un livello è l'opposto, dall'elemento principale Column agli elementi contenuti. Questo concetto può essere applicato a ogni Composable che può contenere altri Composables.

Nota: Servizi di accessibilità utilizza un meccanismo diverso per decidere l'ordine di impostazione dello stato attivo. Questi servizi ricevono semplicemente un albero di nodi AccessibilityNodeInfo e decidono la propria strategia su come attraversarlo. Trova la discussione corrente su questo argomento nel nostro Issue Tracker.

La navigazione nell'interfaccia utente può avvenire in diversi modi, alcuni dei quali sono già noti alla maggior parte degli utenti:

• SCHEDE: navigazione unidimensionale, in avanti o indietro. La navigazione con Tab consente di spostare lo stato attivo all'elemento successivo o precedente della gerarchia. Per impostazione predefinita, Compose segue la dichiarazione di Composables. La navigazione unidirezionale può essere effettuata tramite il tasto tab su una tastiera o la cornice girevole su uno smartwatch e questo tipo di ricerca di focus visita ogni elemento sullo schermo.
• Tasti freccia: navigazione bidimensionale, per andare a sinistra, a destra, in alto o in basso. La navigazione bidimensionale può essere eseguita con un D-Pad su una TV o con i tasti freccia su una tastiera e il relativo ordine di attraversamento visita solo gli elementi di un determinato livello. Puoi utilizzare il centro del D-Pad e il pulsante Indietro per tornare indietro e tornare a un livello diverso.

Prendiamo come esempio lo screenshot di seguito, dove sono presenti quattro pulsanti, uno sotto l'altro, e vuoi scorrere tutti in ordine di apparizione. Jetpack Compose offre questo comportamento fin da subito: il toolkit consente di scorrere ogni componibile in ordine verticale dall'alto verso il basso utilizzando il tasto tab oppure di spostare lo stato attivo premendo la Freccia su o giù.

Figura 1. Elenco di pulsanti visualizzati in un fattore di forma ridotto

Quando passi a un tipo di layout diverso, le cose cambiano leggermente. Se il layout contiene più di una colonna, come in quella riportata di seguito, con Jetpack Compose puoi spostarti tra le colonne senza dover aggiungere alcun codice. Se premi il tasto tab, Jetpack Compose evidenzia automaticamente gli elementi in ordine di dichiarazione, dal primo al quarto. Se usi i tasti freccia, la selezione segui la direzione desiderata nello spazio 2D.

Column {
    Row {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Row {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}
FocusSnippets.kt

Gli elementi Composables sono dichiarati in due Rows e gli elementi focus vengono dichiarati in ordine, dal primo al quarto. Quando premi il tasto tab, viene visualizzato il seguente ordine di impostazione dello stato attivo:

Figura 2. Elenco di pulsanti posizionati in due colonne affiancati in un fattore di forma più grande

Nello snippet seguente, dichiari gli elementi in Columns anziché in Rows:

Row {
    Column {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Column {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}
FocusSnippets.kt

Questo layout attraversa gli elementi verticalmente, dall'alto verso il basso, dall'inizio della schermata verso la fine:

Figura 3. Elenco di pulsanti posizionati in due colonne affiancati in un fattore di forma più grande

I due esempi precedenti, sebbene differiscono nella navigazione unidirezionale, offrono la stessa esperienza per quanto riguarda la navigazione bidimensionale. In genere questo accade perché gli elementi sullo schermo hanno lo stesso posizionamento geografico in entrambi gli esempi. Se spostati a destra dal primo Column, l'elemento attivo viene spostato sul secondo, mentre se scorri verso il basso dal primo Row, lo stato attivo viene spostato su quella sottostante.

Nota: le proprietà Focus sono un caso speciale in cui i genitori vincono sempre in caso di collisioni o duplicati.Questo è un aspetto da tenere presente quando si lavora concretamente.