Ввод вращением с помощью Compose

Ввод вращением – это способ управления часами с помощью вращающихся элементов. В среднем пользователи взаимодействуют с часами всего несколько секунд. Вы можете улучшить пользовательский опыт, используя ввод вращением, чтобы позволить пользователю быстро выполнять различные задачи.

Три основных источника ввода вращением на большинстве часов включают вращающуюся боковую кнопку (RSB) и физический или сенсорный безель, который представляет собой круглую сенсорную зону вокруг экрана. Ожидаемое поведение может зависеть от типа ввода, но ввод вращением должен поддерживаться для всех основных взаимодействий.

Индикатор прокрутки

Большинство пользователей ожидают, что приложения будут поддерживать жест прокрутки. По мере прокрутки контента на экране предоставляйте пользователям визуальную обратную связь в ответ на взаимодействие с поворотным элементом. Визуальная обратная связь может включать индикаторы прокрутки для вертикальной прокрутки или индикаторы страниц.

ScalingLazyColumn, TransformingLazyColumn и Picker по умолчанию поддерживают жест прокрутки, если вы поместите эти компоненты внутрь AppScaffold и ScreenScaffold и передадите состояние списка между ScreenScaffold и компонентом, например TransformingLazyColumn.

AppScaffold и ScreenScaffold предоставляют базовую структуру макета для приложений Wear OS и уже имеют слот для индикатора прокрутки с реализацией по умолчанию. Чтобы настроить индикатор прокрутки, создайте его на основе объекта состояния списка, как показано в следующем фрагменте кода:

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

Вы можете настроить привязку для ScalingLazyColumn с помощью ScalingLazyColumnDefaults.snapFlingBehavior, как показано в следующем фрагменте кода:

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

Специальные действия

Вы также можете создать настраиваемые действия, которые будут реагировать на ввод вращением в вашем приложении. Например, используйте ввод вращением для увеличения и уменьшения масштаба или для управления громкостью в мультимедийном приложении.

Если ваш компонент не поддерживает события прокрутки, например управление громкостью, вы можете обрабатывать их самостоятельно.

Первым шагом является создание пользовательского состояния, управляемого в модели представления, и пользовательского обратного вызова, который используется для обработки событий поворотной прокрутки.

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

Затем используйте обратный вызов, когда получите события, как показано в следующем фрагменте кода.

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

Обратите внимание, что в приведенном выше примере для простоты используются значения пикселей, которые, если бы они использовались на самом деле, скорее всего, были бы слишком чувствительными.