diff --git a/wear/src/main/java/com/example/wear/snippets/rotary/Rotary.kt b/wear/src/main/java/com/example/wear/snippets/rotary/Rotary.kt index 52fe2a79..29b02e1e 100644 --- a/wear/src/main/java/com/example/wear/snippets/rotary/Rotary.kt +++ b/wear/src/main/java/com/example/wear/snippets/rotary/Rotary.kt @@ -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 @@ -175,10 +71,3 @@ fun TimePicker() { fun ScrollableScreenPreview() { ScrollableScreen() } - -@WearPreviewDevices -@WearPreviewFontScales -@Composable -fun TimePickerPreview() { - TimePicker() -}