Listas con Compose para Wear OS

Las listas les permiten a los usuarios seleccionar un elemento de un conjunto de opciones en dispositivos Wear OS.

Muchos dispositivos Wear OS usan pantallas redondas, lo que dificulta la visualización de los elementos de la lista que aparecen cerca de la parte inferior y superior de la pantalla. Por este motivo, Compose para Wear OS incluye una versión de la clase LazyColumn llamada ScalingLazyColumn, que admite efectos de escalamiento y atenuación. Cuando los elementos se mueven hacia el centro de la pantalla, se hacen más grandes y más opacos.

En la siguiente animación, se muestra cómo cambian el tamaño y la transparencia de un elemento a medida que se mueve por la pantalla:

En el siguiente fragmento de código, se muestra cómo crear una lista que contenga texto para cada elemento:

val contentModifier = Modifier
    .fillMaxWidth()
    .padding(bottom = 8.dp)

@Composable
fun WearApp() {
    WearAppTheme {
        // Hoist the list state to remember scroll position across compositions.
        val listState = rememberScalingLazyListState()

        ScalingLazyColumn(
            modifier = Modifier.fillMaxSize(),
            autoCentering = AutoCenteringParams(itemIndex = 0),
            state = listState
        ) {
            item { TextItem(contentModifier, stringResource(R.string.first)) }
            item { TextItem(contentModifier, stringResource(R.string.second)) }
        }
    }
}

@Composable
fun TextItem(modifier: Modifier = Modifier, contents: String) {
    Text(
        modifier = modifier,
        textAlign = TextAlign.Center,
        text = contents
    )
}

Cómo agregar un efecto de ajustar y deslizar.

Puedes agregar un comportamiento de ajustar y deslizar a los gestos del dedo que el usuario aplique a objetos ScalingLazyColumn. Este efecto ayuda a los usuarios a navegar con mayor precisión por los elementos de una lista y, a la vez, agiliza su desplazamiento por listas largas.

Para agregar este efecto a una lista o un selector de la app, incluye el parámetro flingBehavior en tu definición de ScalingLazyColumn, como se muestra en el siguiente fragmento de código:

ScalingLazyColumn(
    modifier = modifier ...,
    flingBehavior = ScalingLazyColumnDefaults.snapFlingBehavior(
        state = listState,
        snapOffset = 0
        // Exponential decay by default. You can also explicitly define a
        // DecayAnimationSpec.
    ) {
        // Contents of the list here.
}

Para aplicar un comportamiento similar de ajustar y deslizar a una ScalingLazyColumn cuando el usuario interactúa con un dial rotativo, usa RotaryWithSnap, disponible en Horologist en GitHub.