Rotierende Eingabe mit „Compose“

Drehknöpfe sind Eingabemöglichkeiten, die sich drehen lassen. Im Durchschnitt verbringen Nutzer nur wenige Sekunden mit der Interaktion mit ihrer Smartwatch. Du kannst die Nutzerfreundlichkeit verbessern, indem du die Eingabe per Drehknopf verwendest, damit Nutzer verschiedene Aufgaben schnell erledigen können.

Die drei Hauptquellen für Drehknöpfe auf den meisten Smartwatches sind die drehbare Seitentaste (RSB) und entweder eine physische oder eine Touch-Lünette, d. h. eine kreisförmige Touch-Zone um das Display. Das erwartete Verhalten kann je nach Art der Eingabe variieren. Achte jedoch darauf, dass die Eingabe per Drehknopf für alle wichtigen Interaktionen unterstützt wird.

Scrollanzeige

Die meisten Nutzer erwarten, dass Apps die Scroll-Geste unterstützen. Gib Nutzern visuelles Feedback, wenn sie mit dem Drehknopf durch die Inhalte auf dem Bildschirm scrollen. Visuelles Feedback kann Scrollindikatoren für vertikales Scrollen oder Seitenindikatoren umfassen.

ScalingLazyColumn, TransformingLazyColumn und Picker unterstützen die Scroll-Geste standardmäßig, wenn Sie diese Komponenten in AppScaffold und ScreenScaffold platzieren und den Listenstatus zwischen ScreenScaffold und der Komponente, z. B. 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. Wenn du den Scrollfortschritt anpassen möchtest, kannst du eine Scrollanzeige basierend auf dem Listenstatusobjekt erstellen, wie im folgenden Code-Snippet gezeigt:

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

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
        // ...
    }
}

Benutzerdefinierte Aktionen

Du kannst auch benutzerdefinierte Aktionen erstellen, die auf Drehknöpfe in deiner App reagieren. Verwende beispielsweise Drehknöpfe, um in einer Medien-App hinein- und herauszuzoomen oder die Lautstärke zu regeln.

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

Zuerst erstellen Sie einen benutzerdefinierten Status, der im Ansichtsmodell verwaltet wird, und einen benutzerdefinierten Callback, der zum Verarbeiten von Dreh-Scroll-Ereignissen verwendet wird.

class VolumeRange(
    val max: Int = 10,
    val min: Int = 0
)

private object VolumeViewModel {
    class MyViewModel : ViewModel() {
        private val _volumeState = mutableIntStateOf(0)
        val volumeState: State<Int>
            get() = _volumeState

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

Verwenden Sie dann den Callback, sobald Sie die Ereignisse erhalten, wie im folgenden Snippet gezeigt.

val focusRequester: FocusRequester = remember { FocusRequester() }
val volumeViewModel: VolumeViewModel.MyViewModel =
    viewModel()
val volumeState by volumeViewModel.volumeState

TransformingLazyColumn(
    modifier = Modifier
        .fillMaxSize()
        .onRotaryScrollEvent {
            volumeViewModel.onVolumeChangeByScroll(it.verticalScrollPixels)
            true
        }
        .focusRequester(focusRequester)
        .focusable(),
) {
    // You can use volumeState here, for example:
    item {
        Text("Volume: $volumeState")
    }
}

Im vorherigen Beispiel werden der Einfachheit halber Pixelwerte verwendet, die bei tatsächlicher Verwendung wahrscheinlich zu empfindlich sind.