Input rotatorio con Compose

L'input rotatorio si riferisce all'input proveniente da componenti dello smartwatch che ruotano. In media, gli utenti interagiscono con lo smartwatch solo per pochi secondi. Puoi migliorare l'esperienza utente utilizzando l'input rotativo per consentire all'utente di svolgere rapidamente varie attività.

Le tre principali sorgenti di input rotatorio sulla maggior parte degli orologi includono il pulsante laterale rotativo (RSB) e una lunetta fisica o una lunetta touch, ovvero una zona circolare touch intorno allo schermo. Sebbene il comportamento previsto possa variare in base al tipo di input, assicurati di supportare l'input rotatorio per tutte le interazioni essenziali.

Scorri

La maggior parte degli utenti si aspetta che le app supportino il gesto di scorrimento. Mentre i contenuti scorrono sullo schermo, fornisci agli utenti un feedback visivo in risposta alle interazioni con il controllo rotatorio. Il feedback visivo può includere indicatori di posizione per lo scorrimento verticale o indicatori di pagina.

ScalingLazyColumn e Picker supportano il gesto di scorrimento per impostazione predefinita, a condizione che tu debba posizionare questi componenti all'interno di un Scaffold. Scaffold fornisce la struttura di layout di base per le app Wear OS e ha già uno spazio per un indicatore di scorrimento. Per mostrare l'avanzamento dello scorrimento, crea un indicatore di posizione in base all'oggetto stato dell'elenco, come mostrato nello snippet di codice seguente:

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

Puoi configurare un comportamento di agganci per ScalingLazyColumn utilizzando ScalingLazyColumnDefaults.snapFlingBehavior, come mostrato nello snippet di codice seguente:

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

Azioni personalizzate

Puoi anche creare azioni personalizzate che rispondano all'input rotatorio nella tua app. Ad esempio, utilizza l'input rotatorio per aumentare e diminuire lo zoom o per regolare il volume in un'app multimediale.

Se il componente non supporta in modo nativo gli eventi di scorrimento come il controllo del volume, puoi gestire gli eventi di scorrimento autonomamente.

// VolumeScreen.kt

val focusRequester: FocusRequester = remember { FocusRequester() }

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

Crea uno stato personalizzato gestito nel modello di visualizzazione e un callback personalizzato utilizzato per elaborare gli eventi di scorrimento rotatorio.

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

Per semplicità, l'esempio precedente utilizza valori in pixel che, se utilizzati, potrebbero essere eccessivamente sensibili.

Utilizza il callback dopo aver ricevuto gli eventi, come mostrato nello snippet seguente.

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

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