Input rotatorio con Compose

L'input rotatorio si riferisce all'input di parti dello smartwatch che ruotano 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 sorgenti principali di input rotatorio sulla maggior parte degli orologi includono il pulsante laterale rotante (RSB) e una cornice fisica o una cornice tattile, che è una zona tattile circolare intorno allo schermo. Anche se il comportamento previsto può 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. Man mano che i contenuti scorrono sullo schermo, offri agli utenti un feedback visivo in risposta alle interazioni a rotazione. Il feedback visivo può includere indicatori di posizione per lo scorrimento verticale o indicatori di pagina.

Implementare lo scorrimento rotatorio utilizzando Scrivi per Wear OS. Questo esempio descrive un'app con un'impalcatura e un ScalingLazyColumn che scorre in verticale. Scaffold fornisce la struttura del layout di base per le app Wear OS e ha già uno slot per un indicatore di scorrimento. Per mostrare l'avanzamento dello scorrimento, crea un indicatore di posizione basato sull'oggetto dello stato elenco. Le viste scorrevoli, tra cui ScalingLazyColumn, dispongono già di uno stato scorrevole per l'aggiunta di input rotatorio. Per ricevere eventi di scorrimento rotatorio, procedi nel seguente modo:

1. Richiedi esplicitamente lo stato attivo utilizzando FocusRequester.
2. Aggiungi il modificatore onRotaryScrollEvent per intercettare gli eventi generati dal sistema quando un utente ruota la corona o la ruota. Ogni evento rotatorio ha un valore di pixel impostato e scorre verticalmente o orizzontalmente. Il modificatore ha anche un callback per indicare se l'evento viene consumato e interrompe la propagazione dell'evento agli elementi padre quando viene consumato.

val listState = rememberScalingLazyListState()

Scaffold(
    positionIndicator = {
        PositionIndicator(scalingLazyListState = listState)
    }
) {

    val focusRequester = rememberActiveFocusRequester()
    val coroutineScope = rememberCoroutineScope()

    ScalingLazyColumn(
        modifier = Modifier
            .onRotaryScrollEvent {
                coroutineScope.launch {
                    listState.scrollBy(it.verticalScrollPixels)

                    listState.animateScrollBy(0f)
                }
                true
            }
            .focusRequester(focusRequester)
            .focusable(),
        state = listState
    ) { ... }
}

Valori discreti

Utilizza anche le interazioni rotative per regolare i valori discreti, ad esempio per regolare la luminosità nelle impostazioni o selezionare i numeri nel selettore temporale quando imposti una sveglia.

Come per ScalingLazyColumn, selettore, dispositivo di scorrimento, stepper e altri componenti componibili deve essere attivo per ricevere input rotatorio. In caso di più target scorrevoli sullo schermo, come ore e minuti nel selettore dell'ora, crea un valore FocusRequester per ogni target e gestisci la variazione dell'obiettivo di conseguenza quando l'utente tocca ore o minuti.

@Composable
fun TimePicker() {
    var selectedColumn by remember { mutableStateOf(0) }
    val focusRequester1 = remember { FocusRequester() }
    val focusRequester2 = remember { FocusRequester() }

    Row {
       Picker(...)
       Picker(...)
    }

    LaunchedEffect(selectedColumn) {
        listOf(focusRequester1,
               focusRequester2)[selectedColumn]
            .requestFocus()
    }
}

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 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 un modello di visualizzazione gestito dallo stato personalizzato e un callback personalizzato utilizzato per elaborare gli eventi di scorrimento a rotazione.

// 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à, nell'esempio precedente vengono utilizzati valori di pixel che, se effettivamente utilizzati, potrebbero essere eccessivamente sensibili.

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

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

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

Risorse aggiuntive

Prendi in considerazione l'utilizzo di Horologist, un progetto open source di Google che fornisce un insieme di librerie Wear che integrano le funzionalità fornite da Compose per Wear OS e altre API Wear OS. L'orologo fornisce un'implementazione per casi d'uso avanzati e molti dettagli specifici dei dispositivi.

Ad esempio, la sensibilità delle diverse origini di input rotatorio può variare. Per una transizione più uniforme tra i valori, puoi limitare la frequenza o aggiungere agganciamenti o animazioni per la transizione. In questo modo, la velocità di rotazione risulta più naturale per gli utenti. L'orologo include modificatori per i componenti scorrevoli e per i valori discreti. Include inoltre utilità per gestire lo stato attivo e una libreria dell'interfaccia utente audio per implementare il controllo del volume con la tecnologia aptica.

Per maggiori informazioni, vedi la sezione Horologist su GitHub.