Rotierende Eingabe mit „Compose“

Drehknopf bezieht sich auf Eingaben über drehbare Teile deiner Smartwatch. Im Durchschnitt interagieren Nutzer nur wenige Sekunden mit ihrer Smartwatch. Sie können die Nutzerfreundlichkeit verbessern, indem Sie die Dreheingabe verwenden, damit Nutzer verschiedene Aufgaben schnell erledigen können.

Die drei wichtigsten Quellen für die Dreheingabe auf den meisten Smartwatches sind die drehbare Seitentaste (Rotating Side Button, RSB) und entweder eine physische Lünette oder eine Touch-Lünette, die eine kreisförmige Touch-Zone um das Display herum ist. Das erwartete Verhalten kann je nach Art der Eingabe variieren. Achten Sie jedoch darauf, dass die Dreheingabe für alle wichtigen Interaktionen unterstützt wird.

Scrollanzeige

Die meisten Nutzer erwarten, dass Apps das Scrollen unterstützen. Gib Nutzern visuelles Feedback, wenn sie den Drehknopf verwenden, während Inhalte auf dem Bildschirm gescrollt werden. Visuelles Feedback kann Scrollindikatoren für vertikales Scrollen oder Seitenindikatoren umfassen.

ScalingLazyColumn, TransformingLazyColumn und Picker unterstützen standardmäßig die Scrollbewegung, wenn Sie diese Komponenten in AppScaffold und ScreenScaffold platzieren und den Listenstatus zwischen ScreenScaffold und der Komponente, z. B. einem TransformingLazyColumn, übergeben.

AppScaffold und ScreenScaffold bieten die grundlegende Layoutstruktur für Wear OS-Apps und haben bereits einen Slot für eine Scrollanzeige mit einer Standardimplementierung. Um den Scrollfortschritt anzupassen, erstellen Sie einen Scrollindikator basierend auf dem Listenstatusobjekt, wie im folgenden Code-Snippet gezeigt:

val listState = rememberTransformingLazyColumnState()
ScreenScaffold(
    scrollState = listState,
    scrollIndicator = {
        ScrollIndicator(state = listState)
    }
) {
    // ...
}
Rotary.kt

Sie können ein Einrastverhalten für ScalingLazyColumn mit ScalingLazyColumnDefaults.snapFlingBehavior konfigurieren, wie im folgenden Code-Snippet gezeigt:

val listState = rememberScalingLazyListState()
ScreenScaffold(
    scrollState = listState,
    scrollIndicator = {
        ScrollIndicator(state = listState)
    }
) {

    val state = rememberScalingLazyListState()
    ScalingLazyColumn(
        modifier = Modifier.fillMaxWidth(),
        state = state,
        flingBehavior = ScalingLazyColumnDefaults.snapFlingBehavior(state = state)
    ) {
        // Content goes here
        // ...
    }
}
Rotary.kt

Benutzerdefinierte Aktionen

Sie können auch benutzerdefinierte Aktionen erstellen, die auf die Drehknopf-Eingabe in Ihrer App reagieren. Sie können die Drehknopf-Eingabe beispielsweise verwenden, um in einer Media-App zu zoomen oder die Lautstärke zu regeln.

Wenn deine Komponente keine Scroll-Ereignisse wie die Lautstärkeregelung unterstützt, kannst du Scroll-Ereignisse selbst verarbeiten.

// VolumeScreen.kt

val focusRequester: FocusRequester = remember { FocusRequester() }

Column(
    modifier = Modifier
        .fillMaxSize()
        .onRotaryScrollEvent {
            // handle rotary scroll events
            true
        }
        .focusRequester(focusRequester)
        .focusable(),
) { ... }

Erstellen Sie einen benutzerdefinierten Status, der im Ansichtsmodell verwaltet wird, und einen benutzerdefinierten Callback, der zum Verarbeiten von Drehscroll-Ereignissen verwendet wird.

// VolumeViewModel.kt

object VolumeRange(
    public val max: Int = 10
    public val min: Int = 0
)

val volumeState: MutableStateFlow<Int> = ...

fun onVolumeChangeByScroll(pixels: Float) {
    volumeState.value = when {
        pixels > 0 -> min (volumeState.value + 1, VolumeRange.max)
        pixels < 0 -> max (volumeState.value - 1, VolumeRange.min)
    }
}

Zur Vereinfachung werden im vorherigen Beispiel Pixelwerte verwendet, die bei tatsächlicher Verwendung wahrscheinlich zu empfindlich wären.

Verwenden Sie den Callback, sobald Sie die Ereignisse empfangen haben, wie im folgenden Snippet gezeigt.

val focusRequester: FocusRequester = remember { FocusRequester() }
val volumeState by volumeViewModel.volumeState.collectAsState()

Column(
    modifier = Modifier
        .fillMaxSize()
        .onRotaryScrollEvent {
            volumeViewModel
                .onVolumeChangeByScroll(it.verticalScrollPixels)
            true
        }
        .focusRequester(focusRequester)
        .focusable(),
) { ... }