Cómo crear listas en Wear

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

La biblioteca de IU para wearables incluye la clase WearableRecyclerView, una implementación de RecyclerView que se usa con el objetivo de crear listas optimizadas para dispositivos wearables. Puedes usar esta interfaz en tu app para wearables creando un nuevo contenedor de WearableRecyclerView.

En función del tipo de experiencia del usuario que deseas proporcionar, debes decidir si utilizarás un elemento de la clase WearableRecyclerView. Recomendamos utilizar el WearableRecyclerViewpara una larga lista de elementos simples, como un selector de aplicaciones o una lista de contactos. Cada elemento puede tener una string corta y un ícono asociado. De forma alternativa, cada elemento puede tener solo una string o un ícono. No recomendamos utilizar un WearableRecyclerView para listas muy cortas o complejas. En ese caso, usa RecyclerView o ListView de la biblioteca de compatibilidad de Android habitual.

Si se extiende la clase RecyclerView existente, las API de WearableRecyclerView muestran una lista de elementos que se puede desplazar verticalmente en una lista recta de forma predeterminada. Puedes utilizar las API de WearableRecyclerView para optar por un diseño curvo y un gesto de desplazamiento circular en tus apps para wearables.

Figura 1: Vista de lista predeterminada en Wear OS

En esta lección, se muestra cómo usar la clase WearableRecyclerView para crear listas en tus apps para Wear OS. El documento también describe cómo optar por un diseño curvo para tus elementos desplazables, habilitar el gesto de desplazamiento circular y personalizar la apariencia de los campos secundarios mientras te desplazas.

Cómo agregar WearableRecyclerView a una actividad usando XML

El siguiente diseño (como se inserta en res/layout/activity_main.xml, por ejemplo) agrega un WearableRecyclerView a una actividad, por lo que la lista se muestra correctamente en dispositivos redondos y cuadrados:

    <androidx.wear.widget.WearableRecyclerView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/recycler_launcher_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical" />
    

A continuación, se muestra el WearableRecyclerView, tal como podría aplicarse a una actividad:

    import android.os.Bundle
    import android.app.Activity
    import android.support.wear.widget.WearableRecyclerView

    class MainActivity : Activity() {

        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
        }

        ...
    }
    

    import android.os.Bundle;
    import android.app.Activity;
    import android.support.wear.widget.WearableRecyclerView;

    public class MainActivity extends Activity {
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
        }

        ...
    }
    

Nota: La clase WearableRecyclerView reemplaza una clase obsoleta similar de la biblioteca de compatibilidad de dispositivos wearable.

Cómo crear un diseño curvo

Si quieres crear un diseño curvo para elementos desplazables en tu app para wearables, haz lo siguiente:

• Usa WearableRecyclerView como contenedor principal en el diseño XML relevante.
• Configura el método setEdgeItemsCenteringEnabled(boolean) en true. Esto alineará los primeros y últimos elementos de la lista centrados verticalmente en la pantalla.
• Usa el método WearableRecyclerView.setLayoutManager() para establecer el diseño de los elementos en la pantalla.

    wearableRecyclerView.apply {
        // To align the edge children (first and last) with the center of the screen
        isEdgeItemsCenteringEnabled = true
        ...

        layoutManager = WearableLinearLayoutManager(this@MainActivity)
    }
    

    // To align the edge children (first and last) with the center of the screen
    wearableRecyclerView.setEdgeItemsCenteringEnabled(true);
    ...

    wearableRecyclerView.setLayoutManager(
                    new WearableLinearLayoutManager(this));
    

Si tu app tiene requisitos específicos para personalizar la apariencia de los campos secundarios mientras te desplazas (por ejemplo, escalar los íconos y el texto mientras los elementos se alejan del centro), extiende la clase WearableLinearLayoutManager.LayoutCallback y anula el método onLayoutFinished.

En el siguiente fragmento de código se muestra un ejemplo de personalización del desplazamiento de elementos para escalar más lejos del centro al extender la clase WearableLinearLayoutManager.LayoutCallback.

    /** How much should we scale the icon at most.  */
    private const val MAX_ICON_PROGRESS = 0.65f

    class CustomScrollingLayoutCallback : WearableLinearLayoutManager.LayoutCallback() {

        private var progressToCenter: Float = 0f

        override fun onLayoutFinished(child: View, parent: RecyclerView) {
            child.apply {
                // Figure out % progress from top to bottom
                val centerOffset = height.toFloat() / 2.0f / parent.height.toFloat()
                val yRelativeToCenterOffset = y / parent.height + centerOffset

                // Normalize for center
                progressToCenter = Math.abs(0.5f - yRelativeToCenterOffset)
                // Adjust to the maximum scale
                progressToCenter = Math.min(progressToCenter, MAX_ICON_PROGRESS)

                scaleX = 1 - progressToCenter
                scaleY = 1 - progressToCenter
            }
        }
    }
    

    public class CustomScrollingLayoutCallback extends WearableLinearLayoutManager.LayoutCallback {
        /** How much should we scale the icon at most. */
        private static final float MAX_ICON_PROGRESS = 0.65f;

        private float progressToCenter;

        @Override
        public void onLayoutFinished(View child, RecyclerView parent) {

            // Figure out % progress from top to bottom
            float centerOffset = ((float) child.getHeight() / 2.0f) / (float) parent.getHeight();
            float yRelativeToCenterOffset = (child.getY() / parent.getHeight()) + centerOffset;

            // Normalize for center
            progressToCenter = Math.abs(0.5f - yRelativeToCenterOffset);
            // Adjust to the maximum scale
            progressToCenter = Math.min(progressToCenter, MAX_ICON_PROGRESS);

            child.setScaleX(1 - progressToCenter);
            child.setScaleY(1 - progressToCenter);
        }
    }
    

    wearableRecyclerView.layoutManager =
            WearableLinearLayoutManager(this, CustomScrollingLayoutCallback())
    

    CustomScrollingLayoutCallback customScrollingLayoutCallback =
                    new CustomScrollingLayoutCallback();
    wearableRecyclerView.setLayoutManager(
                    new WearableLinearLayoutManager(this, customScrollingLayoutCallback));
    

Cómo agregar un gesto de desplazamiento circular

De forma predeterminada, el desplazamiento circular está inhabilitado en el WearableRecyclerView. Si deseas habilitar un gesto de desplazamiento circular en tu vista secundaria, usa el método setCircularScrollingGestureEnabled() de WearableRecyclerView. También puedes personalizar el gesto de desplazamiento circular definiendo uno o ambos de los siguientes:

• Cuántos grados tiene que girar el usuario para desplazarse por una altura de pantalla. Esto influye de manera efectiva en la velocidad del desplazamiento setScrollDegreesPerScreen: el valor predeterminado se establece en 180 grados.
• El ancho de un "bisel" virtual cerca del borde de la pantalla en el que se reconocerá el gesto setBezelFraction: se establece el valor predeterminado en 1. Esto se expresa como una fracción del radio de la vista.

El siguiente fragmento de código muestra cómo configurar estos métodos:

    wearableRecyclerView.apply {
        isCircularScrollingGestureEnabled = true
        bezelFraction = 0.5f
        scrollDegreesPerScreen = 90f
    }
    

    wearableRecyclerView.setCircularScrollingGestureEnabled(true);
    wearableRecyclerView.setBezelFraction(0.5f);
    wearableRecyclerView.setScrollDegreesPerScreen(90);