Поворотный ввод с помощью Compose

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

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

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

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

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

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

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

Вы можете настроить поведение привязки для 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
        // ...
    }
}
Rotary.kt

Пользовательские действия

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

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

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

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

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

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

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