Input rotatorio con Compose

L'input rotatorio si riferisce all'input proveniente da parti dello smartwatch che girano o ruotano. In media, gli utenti trascorrono solo pochi secondi a interagire con lo smartwatch. Puoi migliorare l'esperienza utente utilizzando l'input rotatorio per consentire all'utente di eseguire rapidamente varie attività.

Le tre fonti principali di input rotatorio sulla maggior parte degli smartwatch includono il pulsante laterale rotante (RSB) e una ghiera fisica o una ghiera touch, ovvero una zona touch circolare 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.

Indicatore di scorrimento

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

ScalingLazyColumn, TransformingLazyColumn e Picker supportano il gesto di scorrimento per impostazione predefinita, se inserisci questi componenti all'interno di AppScaffold e ScreenScaffold e passi lo stato dell'elenco tra ScreenScaffold e il componente, ad esempio un TransformingLazyColumn.

AppScaffold e ScreenScaffold forniscono la struttura di layout di base per le app per Wear OS e hanno già uno slot per un indicatore di scorrimento con un'implementazione predefinita. Per personalizzare l'avanzamento dello scorrimento, crea un indicatore di scorrimento basato sull'oggetto di stato dell'elenco, come mostrato nello snippet di codice seguente:

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

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

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

Azioni personalizzate

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

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

Il primo passaggio consiste nel creare uno stato personalizzato gestito nel modello di visualizzazione e un callback personalizzato utilizzato per elaborare gli eventi di scorrimento rotatorio.

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
            }
        }
    }
}
Rotary.kt

Poi, utilizza il callback una volta ricevuti gli eventi, come mostrato nello snippet seguente.

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")
    }
}
Rotary.kt

Tieni presente che, per semplicità, l'esempio precedente utilizza valori di pixel che, se effettivamente utilizzati, potrebbero essere eccessivamente sensibili.