Fokus auf „Schreiben“ verschieben

Wenn ein Nutzer mit Ihrer App interagiert, tippt er häufig auf Elemente auf dem Bildschirm. Dies ist jedoch nicht die einzige Form der Interaktion. Weitere Formen der Interaktion sind:

• Ein ChromeOS-Nutzer kann die Pfeiltasten auf seiner physischen Tastatur verwenden, um auf dem Bildschirm zu navigieren.
• Ein Spieler kann mit seinem angeschlossenen Gamecontroller durch das Menü des Spiels navigieren.
• Ein Nutzer einer mobilen App kann mit der Bildschirmtastatur durch Elemente wechseln.

In diesen Fällen ist es wichtig, zu erfassen, welche Komponente zu einem bestimmten Zeitpunkt aktiv ist. Das nennen wir Fokus. Elemente auf dem Bildschirm sollten in einer logischen Reihenfolge fokussiert werden. Jetpack Compose bietet eine Standardmethode zur Verarbeitung des Fokus, die in den meisten Fällen korrekt ist. In einigen Fällen kann es jedoch erforderlich sein, dieses Standardverhalten zu ändern.

Auf den folgenden Seiten wird beschrieben, wie Sie den Fokus in Ihrer App verwenden:

• Reihenfolge der Fokusbewegung ändern: Hier wird beschrieben, wie Sie die Standardreihenfolge des Fokus ändern, Fokusgruppen hinzufügen und den Fokus eines Composables deaktivieren.
• Fokusverhalten ändern: Hier wird beschrieben, wie Sie den Fokus anfordern, erfassen und freigeben und wie Sie den Fokus beim Aufrufen eines Bildschirms umleiten.
• Auf Fokus reagieren: Hier wird erläutert, wie Sie auf Fokusänderungen reagieren, visuellen Hinweisen zu Elementen hinzufügen und den Fokusstatus eines Elements ermitteln.

Standardmäßige Reihenfolge der Fokusbewegung

Bevor wir uns mit dem Standardverhalten der Fokus-Suche befassen, ist es wichtig, das Konzept der Ebene in der Hierarchie zu verstehen. Im Allgemeinen können wir sagen, dass sich zwei Composables auf derselben Ebene befinden, wenn sie Geschwister sind, d. h. dieselben übergeordneten Elemente haben. Elemente in einem Column befinden sich beispielsweise auf derselben Ebene. Eine Ebene nach oben zu wechseln bedeutet, von einem untergeordneten Element zum Composable-Element zu wechseln, oder, um beim selben Beispiel zu bleiben, von einem Element zurück zu einem Column-Element zu wechseln, das es enthält. Eine Ebene nach unten zu wechseln, ist das Gegenteil: von der Column-Überordnung zu den enthaltenen Elementen. Dieses Konzept kann auf alle Composable angewendet werden, die andere Composables enthalten können.

Hinweis :Informationen zum manuellen Steuern der Fokusreihenfolge finden Sie unter Reihenfolge der Bewegung steuern.

Die Benutzeroberfläche kann auf verschiedene Arten aufgerufen werden. Einige davon sind den meisten Nutzern bereits bekannt:

• TABs: eindimensionale Navigation, vorwärts oder rückwärts. Bei der TAB-Navigation wird der Fokus auf das nächste oder vorherige Element in der Hierarchie verschoben. Standardmäßig folgt Compose der Deklaration von Composables. Die unidirektionale Navigation kann über die tab-Taste auf einer Tastatur oder die drehbare Lünette auf einer Smartwatch erfolgen. Bei dieser Art der Focussuche wird jedes Element auf dem Bildschirm besucht.
• Pfeiltasten: zweidimensionale Navigation nach links, rechts, oben oder unten. Die zweidimensionale Navigation kann über ein Steuerkreuz auf einem Fernseher oder über die Pfeiltasten auf einer Tastatur erfolgen. Dabei werden nur Elemente auf einer bestimmten Ebene besucht. Mit der Mitte des Steuerkreuzes und dem Button „Zurück“ können Sie eine Ebene nach unten und wieder nach oben wechseln.

Im Screenshot unten sehen Sie beispielsweise vier Schaltflächen, die untereinander angeordnet sind. Sie möchten alle in der Reihenfolge ihrer Darstellung durchlaufen. Jetpack Compose bietet dieses Verhalten standardmäßig: Mit dem Toolkit können Sie mit der tab-Taste vertikal von oben nach unten durch die einzelnen Composables wechseln oder den Fokus mit den Aufwärts-- oder Abwärtspfeilen verschieben.

Abbildung 1: Liste der Schaltflächen, die in einem kleinen Formfaktor angezeigt werden

Wenn Sie zu einem anderen Layout wechseln, ändert sich einiges. Wenn Ihr Layout mehr als eine Spalte hat, wie im Layout unten, können Sie mit Jetpack Compose durch die Spalten navigieren, ohne Code hinzufügen zu müssen. Wenn Sie die Taste tab drücken, werden die Elemente in Jetpack Compose automatisch in der Reihenfolge ihrer Deklaration hervorgehoben, also von „First“ bis „Fourth“. Wenn Sie die Pfeiltasten auf Ihrer Tastatur verwenden, folgt die Auswahl der gewünschten Richtung im 2D-Raum.

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

Die Composables werden in zwei Rows deklariert und die Fokuselemente werden in der Reihenfolge vom ersten bis zum vierten deklariert. Wenn Sie die Taste tab drücken, wird die folgende Fokusreihenfolge erzeugt:

Abbildung 2: Liste von Schaltflächen, die in zwei Spalten nebeneinander in einem größeren Formfaktor angeordnet sind

Im folgenden Snippet deklarieren Sie die Elemente in Columns anstatt in Rows:

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

Bei diesem Layout werden die Elemente vertikal von oben nach unten durchlaufen, vom Anfang des Bildschirms bis zum Ende:

Abbildung 3. Liste von Schaltflächen, die in zwei Spalten nebeneinander in einem größeren Formfaktor angeordnet sind

Die beiden vorherigen Beispiele unterscheiden sich zwar in der unidirektionalen Navigation, bieten aber dieselbe Erfahrung bei der zweidimensionalen Navigation. Das liegt in der Regel daran, dass die Elemente auf dem Bildschirm in beiden Beispielen dieselbe geografische Platzierung haben. Wenn Sie von der ersten Column nach rechts navigieren, wird der Fokus auf die zweite verschoben. Wenn Sie von der ersten Row nach unten navigieren, wird der Fokus auf die darunter liegende verschoben.

Hinweis :Fokus-Properties sind ein Sonderfall. Bei Konflikten oder Duplikaten haben die übergeordneten Elemente immer Vorrang. Das sollten Sie bei der Arbeit mit dem Fokus berücksichtigen.