L'input rotatorio si riferisce all'input proveniente dalle parti dello smartwatch che girano o 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 fonti di input rotativo sulla maggior parte degli orologi 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 rotativo 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 rotative. 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, a condizione che tu debba posizionare questi componenti all'interno
di AppScaffold
e ScreenScaffold
e passare lo stato dell'elenco tra ScreenScaffold
e il componente, ad esempio un TransformingLazyColumn
.
AppScaffold
e ScreenScaffold
forniscono la struttura di base del layout
per le app Wear OS e hanno già uno spazio per un indicatore di scorrimento con un'implementazione predefinita. Per
personalizzare l'avanzamento dello scorrimento, crea un indicatore di scorrimento basato
sull'oggetto stato della lista, come mostrato nello snippet di codice seguente:
val listState = rememberTransformingLazyColumnState() ScreenScaffold( scrollState = listState, scrollIndicator = { ScrollIndicator(state = listState) } ) { // ... }
Puoi configurare un comportamento di snap 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 // ... } }
Azioni personalizzate
Puoi anche creare azioni personalizzate che rispondono all'input rotatorio nella tua app. Ad esempio, utilizza l'input rotatorio per ingrandire e rimpicciolire o per controllare il volume in un'app multimediale.
Se il tuo componente non supporta in modo nativo gli eventi di scorrimento, ad esempio il controllo del volume, puoi gestirli 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 rotativo.
// 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 di pixel che, se utilizzati effettivamente, sono probabilmente troppo sensibili.
Utilizza il callback una volta ricevuti gli eventi, come mostrato nel seguente snippet.
val focusRequester: FocusRequester = remember { FocusRequester() }
val volumeState by volumeViewModel.volumeState.collectAsState()
Column(
modifier = Modifier
.fillMaxSize()
.onRotaryScrollEvent {
volumeViewModel
.onVolumeChangeByScroll(it.verticalScrollPixels)
true
}
.focusRequester(focusRequester)
.focusable(),
) { ... }
Consigliati per te
- Nota: il testo del link viene visualizzato quando JavaScript è disattivato
- Modificare il comportamento della messa a fuoco
- Aggiungere il supporto di tastiera, mouse, trackpad e stilo con Jetpack Compose
- Compose for Wear OS Codelab