Skip to content

Commit

Permalink
adds sample for snap, removes picker
Browse files Browse the repository at this point in the history
  • Loading branch information
@kul3r4
kul3r4 committed Sep 5, 2024
1 parent 2989237 commit 5bcb685
Showing 1 changed file with 25 additions and 136 deletions.
161 changes: 25 additions & 136 deletions wear/src/main/java/com/example/wear/snippets/rotary/Rotary.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,157 +16,53 @@

package com.example.wear.snippets.rotary

import android.view.MotionEvent
import androidx.compose.foundation.focusable
import androidx.compose.foundation.gestures.animateScrollBy
import androidx.compose.foundation.gestures.scrollBy
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.input.pointer.pointerInteropFilter
import androidx.compose.ui.input.rotary.onRotaryScrollEvent
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.ExperimentalWearFoundationApi
import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
import androidx.wear.compose.foundation.lazy.ScalingLazyColumnDefaults
import androidx.wear.compose.foundation.lazy.rememberScalingLazyListState
import androidx.wear.compose.foundation.rememberActiveFocusRequester
import androidx.wear.compose.material.Chip
import androidx.wear.compose.material.MaterialTheme
import androidx.wear.compose.material.Picker
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.ListHeader
import androidx.wear.compose.material.PositionIndicator
import androidx.wear.compose.material.Scaffold
import androidx.wear.compose.material.Text
import androidx.wear.compose.material.rememberPickerState
import androidx.wear.compose.ui.tooling.preview.WearPreviewDevices
import androidx.wear.compose.ui.tooling.preview.WearPreviewFontScales
import kotlinx.coroutines.launch

@Composable
fun ScrollableScreen() {
// This sample doesn't add a Time Text at the top of the screen.
// If using Time Text, add padding to ensure content does not overlap with Time Text.
}

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun TimePicker() {
val textStyle = MaterialTheme.typography.display1

// [START android_wear_rotary_input_picker]
var selectedColumn by remember { mutableIntStateOf(0) }

val hoursFocusRequester = remember { FocusRequester() }
val minutesRequester = remember { FocusRequester() }
// [START_EXCLUDE]
val coroutineScope = rememberCoroutineScope()
// [START android_wear_rotary_input_snap_fling]
val listState = rememberScalingLazyListState()
Scaffold(
positionIndicator = {
PositionIndicator(scalingLazyListState = listState)
}
) {

@Composable
fun Option(column: Int, text: String) = Box(modifier = Modifier.fillMaxSize()) {
Text(
text = text, style = textStyle,
color = if (selectedColumn == column) MaterialTheme.colors.secondary
else MaterialTheme.colors.onBackground,
modifier = Modifier
.pointerInteropFilter {
if (it.action == MotionEvent.ACTION_DOWN) selectedColumn = column
true
}
)
}
// [END_EXCLUDE]
Scaffold(modifier = Modifier.fillMaxSize()) {
Row(
// [START_EXCLUDE]
modifier = Modifier.fillMaxSize(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center,
// [END_EXCLUDE]
// ...
val state = rememberScalingLazyListState()
ScalingLazyColumn(
modifier = Modifier.fillMaxWidth(),
state = state,
flingBehavior = ScalingLazyColumnDefaults.snapFlingBehavior(state = state)
) {
// Content goes here
// [START_EXCLUDE]
val hourState = rememberPickerState(
initialNumberOfOptions = 12,
initiallySelectedOption = 5
)
val hourContentDescription by remember {
derivedStateOf { "${hourState.selectedOption + 1 } hours" }
item { ListHeader { Text(text = "List Header") } }
items(20) {
Chip(
onClick = {},
label = { Text("List item $it") },
colors = ChipDefaults.secondaryChipColors()
)
}
// [END_EXCLUDE]
Picker(
readOnly = selectedColumn != 0,
modifier = Modifier.size(64.dp, 100.dp)
.onRotaryScrollEvent {
coroutineScope.launch {
hourState.scrollBy(it.verticalScrollPixels)
}
true
}
.focusRequester(hoursFocusRequester)
.focusable(),
onSelected = { selectedColumn = 0 },
// ...
// [START_EXCLUDE]
state = hourState,
contentDescription = hourContentDescription,
option = { hour: Int -> Option(0, "%2d".format(hour + 1)) }
// [END_EXCLUDE]
)
// [START_EXCLUDE]
Spacer(Modifier.width(8.dp))
Text(text = ":", style = textStyle, color = MaterialTheme.colors.onBackground)
Spacer(Modifier.width(8.dp))
val minuteState =
rememberPickerState(initialNumberOfOptions = 60, initiallySelectedOption = 0)
val minuteContentDescription by remember {
derivedStateOf { "${minuteState.selectedOption} minutes" }
}
// [END_EXCLUDE]
Picker(
readOnly = selectedColumn != 1,
modifier = Modifier.size(64.dp, 100.dp)
.onRotaryScrollEvent {
coroutineScope.launch {
minuteState.scrollBy(it.verticalScrollPixels)
}
true
}
.focusRequester(minutesRequester)
.focusable(),
onSelected = { selectedColumn = 1 },
// ...
// [START_EXCLUDE]
state = minuteState,
contentDescription = minuteContentDescription,
option = { minute: Int -> Option(1, "%02d".format(minute)) }
// [END_EXCLUDE]
)
LaunchedEffect(selectedColumn) {
listOf(
hoursFocusRequester,
minutesRequester
)[selectedColumn]
.requestFocus()
}
}
}
// [END android_wear_rotary_input_picker]
// [END android_wear_rotary_input_snap_fling]
}

@WearPreviewDevices
Expand All @@ -175,10 +71,3 @@ fun TimePicker() {
fun ScrollableScreenPreview() {
ScrollableScreen()
}

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun TimePickerPreview() {
TimePicker()
}

0 comments on commit 5bcb685

Please sign in to comment.