Entrada por seletor giratório com o Compose

O termo "entrada por seletor giratório" se refere a ações feitas usando peças do relógio que giram. Em média, os usuários passam apenas alguns segundos interagindo com o relógio. É possível melhorar a experiência usando a entrada por seletor giratório para que os usuários possam realizar várias tarefas rapidamente.

As três principais fontes de entrada por seletor giratório na maioria dos relógios incluem o botão lateral giratório (RSB, na sigla em inglês) e uma borda física ou sensível ao toque, que é uma zona de toque circular ao redor da tela. Embora o comportamento esperado possa variar de acordo com o tipo de entrada, recomendamos que você ofereça suporte à entrada por seletor giratório para todas as interações essenciais.

Indicador de rolagem

A maioria dos usuários espera que os apps tenham suporte ao gesto de rolagem. À medida que o conteúdo passa pela tela, ofereça feedback visual aos usuários em resposta a interações pelo seletor giratório. O feedback visual pode incluir indicadores de rolagem para rolagem vertical ou indicadores de página.

ScalingLazyColumn, TransformingLazyColumn e Picker oferecem suporte ao gesto de rolagem por padrão se você colocar esses componentes em AppScaffold e ScreenScaffold e transmitir o estado da lista entre ScreenScaffold e o componente, como um TransformingLazyColumn.

O AppScaffold e o ScreenScaffold fornecem a estrutura de layout básica para apps do Wear OS e já têm um slot para um indicador de rolagem com uma implementação padrão. Para personalizar o progresso da rolagem, crie um indicador de rolagem com base no objeto de estado da lista, conforme mostrado no snippet de código a seguir:

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

Você pode configurar um comportamento de ajuste para ScalingLazyColumn usando ScalingLazyColumnDefaults.snapFlingBehavior, conforme mostrado no snippet de código a seguir:

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

Ações personalizadas

Também é possível criar ações personalizadas que respondam à entrada por seletor giratório no app. Por exemplo, use a entrada por seletor giratório para aumentar e diminuir o zoom ou controlar o volume em um app de música.

Se o componente não tiver suporte nativo a eventos de rolagem, como o controle de volume, você poderá processar esses eventos por conta própria.

A primeira etapa é criar um estado personalizado gerenciado no modelo de visualização e um callback personalizado que seja usado para processar eventos de rolagem por seletor giratório.

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

Em seguida, use o callback quando receber os eventos, conforme mostrado no snippet a seguir.

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

Para simplificar, o exemplo anterior usa valores de pixel que, se usados de fato, serão muito sensíveis.