Wenn Nutzer mit Ihrer App interagieren, geschieht dies oft durch Berühren von Elementen auf ihrem Bildschirm. Dies ist jedoch nicht die einzige Form der Interaktion. Andere Formen der Interaktion könnten zum Beispiel sein:
- Ein ChromeOS-Nutzer kann zur Navigation auf dem Bildschirm die Pfeiltasten auf seiner physischen Tastatur verwenden.
- Ein Nutzer kann mit dem zugehörigen Game-Controller durch das Menü des Spiels navigieren.
- Ein Nutzer einer mobilen App kann mithilfe der Bildschirmtastatur durch die Elemente navigieren.
In diesen Fällen ist es wichtig zu verfolgen, welche Komponente zu einem bestimmten Zeitpunkt aktiv ist. Dies wird als Fokus bezeichnet. Elemente auf dem Bildschirm sollten in einer logischen Reihenfolge fokussiert sein. Jetpack Compose hat eine Standardmethode für die Bearbeitung des Fokus, die in den meisten Fällen korrekt ist. In einigen Fällen müssen Sie dieses Standardverhalten jedoch möglicherweise ändern.
Auf den folgenden Seiten wird beschrieben, wie Sie den Fokus in Ihrer App verwenden:
- Reihenfolge des Durchlaufs für den Fokus ändern: Hier erfahren Sie, wie Sie die standardmäßige Fokusreihenfolge ändern, Fokusgruppen hinzufügen und den Fokus einer zusammensetzbaren Funktion deaktivieren.
- Fokusverhalten ändern: Hier wird beschrieben, wie Sie den Fokus anfordern, erfassen und freigeben und wie Sie den Fokus beim Betreten des Bildschirms umleiten.
- Auf Fokus reagieren: Hier wird erläutert, wie Sie auf Fokusänderungen reagieren, Elemente visuelle Hinweise hinzufügen und den Fokusstatus eines Elements verstehen.
Standardmäßige Reihenfolge des Durchlaufs für den Fokus
Bevor wir uns mit dem Standardverhalten der fokussierten Suche befassen, müssen wir das Konzept der Ebene in der Hierarchie verstehen: Grundsätzlich können wir sagen, dass zwei Composables auf derselben Ebene sind, wenn sie gleichgeordnet sind, d. h., sie haben dieselben übergeordneten Elemente. Beispielsweise befinden sich Elemente innerhalb eines Column-Elements auf derselben Ebene. Eine Ebene aufsteigen bedeutet, von einem untergeordneten Element zu seinem übergeordneten Composable-Element zu wechseln oder das gleiche Beispiel beizubehalten, indem Sie von einem Element zu einem Column-Element zurückkehren, das es enthält. Wenn Sie eine Ebene hinuntergehen, ist das umgekehrt der Fall, vom übergeordneten Element Column zu den enthaltenen Elementen. Dieses Konzept kann auf jeden Composable angewendet werden, der andere Composables enthalten kann.
Die UI-Navigation kann auf verschiedene Arten erfolgen, von denen einige die meisten Nutzer bereits kennen:
- TABs: eindimensionale Navigation, vorwärts oder rückwärts Mit der TAB-Navigation gelangen Sie zum nächsten oder vorherigen Element in der Hierarchie. Standardmäßig folgt „Compose“ der Deklaration von
Composables. Die Navigation kann in eine Richtung über die Tastetabauf einer Tastatur oder über den Drehrand einer Uhr erfolgen. Diese Art der Fokussuche besucht jedes Element auf dem Bildschirm. - Pfeiltasten: Zweidimensionale Navigation nach links, rechts, oben oder nach unten Die zweidimensionale Navigation ist über ein Steuerkreuz auf einem Fernseher oder die Pfeiltasten auf einer Tastatur möglich. Dabei werden nur Elemente auf einer bestimmten Ebene besucht. Mit dem Steuerkreuz in der Mitte und der Zurück-Taste können Sie nach unten und wieder nach oben gehen.
Nehmen Sie als Beispiel den folgenden Screenshot. Hier haben Sie vier Schaltflächen, eine unter der anderen, und Sie möchten diese alle in der Reihenfolge ihres Aussehens durchgehen.
Mit Jetpack Compose können Sie diese Funktionen sofort anwenden: Mit dem Toolkit können Sie mithilfe der Taste tab die einzelnen zusammensetzbaren Funktionen in vertikaler Reihenfolge von oben nach unten durchlaufen oder den Fokus verschieben, indem Sie den Aufwärtspfeil oder den Abwärtspfeil drücken.
Wenn Sie zu einem anderen Layout wechseln, ändern sich die Dinge ein wenig. Wenn Ihr Layout mehr als eine Spalte hat (wie das Layout unten), können Sie mit Jetpack Compose durch diese Spalten navigieren, ohne Code hinzufügen zu müssen. Wenn Sie die Taste tab drücken, markiert Jetpack Compose die Elemente automatisch in der Reihenfolge der Deklaration von der ersten bis vierten. Mit den Pfeiltasten auf der Tastatur folgen Sie der
Auswahl im 2D-Raum der gewünschten Richtung.
Column {
Row {
TextButton({ }) { Text("First field") }
TextButton({ }) { Text("Second field") }
}
Row {
TextButton({ }) { Text("Third field") }
TextButton({ }) { Text("Fourth field") }
}
}
Die Composables werden in zwei Rows deklariert und die Fokuselemente werden der Reihe nach vom ersten bis zum vierten deklariert. Wenn Sie die Taste tab drücken, ergibt sich die folgende Fokusreihenfolge:
Im folgenden Snippet deklarieren Sie die Elemente in Columns und nicht in Rows:
Row {
Column {
TextButton({ }) { Text("First field") }
TextButton({ }) { Text("Second field") }
}
Column {
TextButton({ }) { Text("Third field") }
TextButton({ }) { Text("Fourth field") }
}
}
Dieses Layout durchläuft die Elemente vertikal, von oben nach unten, vom Anfang des Bildschirms bis zum Ende:
Die beiden vorherigen Beispiele unterscheiden sich zwar in der eindirektionalen Navigation, bieten aber die gleiche 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 wechseln, wird der Fokus zum zweiten verschoben. Wenn Sie von der ersten Row nach unten gehen, wird der Fokus auf den darunterliegenden verschoben.
Empfehlungen für dich
- Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
- Fokusverhalten ändern
- ConstraintLayout in Compose
- Flow-Layouts in Compose