Rotierende Eingabe mit „Compose“

Die Dreheingabe bezieht sich auf Eingaben von Teilen Ihrer Uhr, die sich drehen oder drehen. An verwenden Nutzer im Durchschnitt nur wenige Sekunden mit ihrer Uhr. Ich können Sie die Nutzererfahrung verbessern, indem Sie um verschiedene Aufgaben schnell zu erledigen.

Die drei Hauptquellen für den Drehknopf bei den meisten Uhren ist die rotierende Seite (RSB) und entweder einen physischen oder einen runden Touchbereich um den Bildschirm herum. Das erwartete Verhalten kann je nach Drehknopf bei allen wichtigen Interaktionen unterstützen.

Scrollen

Die meisten Nutzer erwarten, dass Apps die Scroll-Geste unterstützen. Beim Scrollen der Inhalte auf dem Bildschirm, geben Sie den Nutzenden als Reaktion auf Drehinteraktionen ein visuelles Feedback. Visuelles Feedback kann Positionsanzeigen für vertikales Scrollen oder Seitenindikatoren.

ScalingLazyColumn und Picker unterstützen standardmäßig die Scroll-Geste, solange Sie diese Komponenten in einem Scaffold platzieren müssen. Scaffold enthält die grundlegende Layoutstruktur für Wear OS-Apps und hat bereits einen Bereich für einen Bildlaufindikator. Bis den Scroll-Fortschritt anzeigen, einen Positionsindikator basierend auf das Listenstatusobjekt, wie im folgenden Code-Snippet gezeigt:

val listState = rememberScalingLazyListState()
Scaffold(
    positionIndicator = {
        PositionIndicator(scalingLazyListState = listState)
    }
) {
    // ...
}
Rotary.kt

Sie können ein Andockverhalten für ScalingLazyColumn konfigurieren, indem Sie ScalingLazyColumnDefaults.snapFlingBehavior, wie im Folgenden gezeigt Code-Snippet hinzu:

val listState = rememberScalingLazyListState()
Scaffold(
    positionIndicator = {
        PositionIndicator(scalingLazyListState = 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 in Ihrer App auf die Drehknopf-Eingabe reagieren. So können Sie beispielsweise in einer Medien-App mit dem Drehknopf heran- und herauszoomen oder die Lautstärke regeln.

Wenn Ihre Komponente keine Scroll-Ereignisse wie die Lautstärke unterstützt können Sie Scroll-Ereignisse selbst verwalten.

// VolumeScreen.kt

val focusRequester: FocusRequester = remember { FocusRequester() }

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

Benutzerdefinierten Status, der im Ansichtsmodell verwaltet wird, und einen verwendeten benutzerdefinierten Callback erstellen um Dreh-Scroll-Ereignisse zu verarbeiten.

// 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, falls sind wahrscheinlich zu sensibel.

Verwenden Sie den Callback, sobald Sie die Ereignisse erhalten, 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(),
) { ... }