Fokus in Jetpack Compose Glimmer

XR‑Geräte, für die der Leitfaden gilt

Dieser Leitfaden hilft Ihnen dabei, Erlebnisse für die folgenden Arten von XR-Geräten zu entwickeln.

Informationen zu XR-Gerätetypen →

AI Glasses

Informationen zu XR-Gerätetypen →

Alle Jetpack Compose Glimmer-Komponenten sind so konzipiert, dass sie mit Standardeingabemethoden funktionieren, die Smartphones ähneln, z. B. durch Tippen oder Wischen auf dem Touchpad der KI-Brille. Außerdem reagieren sie auf Eingabebefehle, die speziell für die Hardware von KI-Brillen entwickelt wurden, z. B. Kamera- und Displaytasten. Jetpack Compose-Glimmer-Komponenten verarbeiten die erforderlichen Eingabeereignisse automatisch. Für benutzerdefinierte Komponenten können Sie vorhandene Compose-APIs wie Modifier.draggable oder Modifier.scrollable verwenden, um bestimmte Interaktionsverhalten zu implementieren.

Bei KI‑Brillen mit Display kann sich die Zeigereingabe auf den Fokus auswirken:

• Tippen: Direkte Interaktion zum Aktivieren des Elements. Der Fokus wird auf ein Element verschoben, wenn ein Nutzer damit interagiert.
• Wischen: Wird für die Navigation und zum Scrollen verwendet. Nicht behandelte Wischgesten werden automatisch in Fokusbewegungen umgewandelt, sodass eine nahtlose Benutzeroberflächennavigation ohne direkte Zeigereingabe möglich ist.

(Temporäre Anforderung) Flag für erforderliche Eingabe aktivieren:

Mithilfe einer Funktion von Jetpack Compose kann das System beim Laden des Bildschirms den anfänglichen Fokus automatisch auf das erste fokussierbare Element setzen, das sich häufig oben links auf dem Bildschirm befindet. Diese Funktion befindet sich noch in der Entwicklung und ist nicht standardmäßig aktiviert. Wenn Sie diese Funktion aktivieren möchten, legen Sie das Flag isInitialFocusOnFocusableAvailable in der Methode onCreate() Ihrer Aktivität auf true fest.

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

Navigationsverhalten und Reihenfolge

Fokusbewegung und Reihenfolgeänderung bei der Navigation in Ihrer App

Fokusbewegung

In einem scrollbaren Container wird der Fokus durch Wischen auf dem Touchpad kontinuierlich verschoben. Bei diskreten Elementen wie einer Reihe von Schaltflächen wird der Fokus mit jedem Wischen um ein Element verschoben.

Fokusreihenfolge

Wie bei Jetpack Compose wird auch bei Jetpack Compose Glimmer die eindimensionale Focussuche verwendet. Weitere Informationen zur Reihenfolge des Fokusdurchlaufs finden Sie unter Reihenfolge des Fokusdurchlaufs ändern.

Wenn Sie das Element ändern möchten, das anfangs im Fokus steht, können Sie ein Modifier.focusGroup()-Element auf oberster Ebene hinzufügen und ein benutzerdefiniertes onEnter focusProperty-Element angeben:

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

Scrollbare Container

Für eine optimale Nutzerfreundlichkeit sollten scrollbare Container wie Listen die einzige wichtige Komponente auf einem Bildschirm sein. Platzieren Sie keine scrollbare Liste direkt über oder unter anderen interaktiven Elementen wie Schaltflächen, um Verwirrung bei der Navigation zu vermeiden und eine reibungslose, vorhersehbare Fokusbewegung zu ermöglichen.

Standardfokusstatus

Jetpack Compose Glimmer implementiert Standardfokusstatus für alle interaktiven Komponenten, einschließlich Oberflächen, Karten und Listenelementen. So wird einheitliches und klares visuelles Feedback bei der Nutzerinteraktion ermöglicht.

Abbildung 1: Drei Fokusstatus in Jetpack Compose Glimmer, die durch umrissbasiertes visuelles Feedback unterschieden werden.

• Standard: Die Hintergrundfarbe der Schaltfläche wird aus GlimmerTheme.colors.surface abgeleitet, der Hauptinhalt berechnet die Inhaltsfarbe dieser Oberfläche und Symbole sind GlimmerTheme.colors.primary.

• Fokus: Die Rahmenbreite wird erhöht, um den Fokus zu verdeutlichen.

• Fokus + Gedrückt: Der Hintergrund wird auf GlimmerTheme.colors.surface mit voller Deckkraft festgelegt, um den ausgewählten Status zu kommunizieren.