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
.
Consulta los siguientes recursos relacionados:
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 WearableRecyclerView
para 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:
Kotlin
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) } ... }
Java
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)
entrue
. 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.
Kotlin
wearableRecyclerView.apply { // To align the edge children (first and last) with the center of the screen isEdgeItemsCenteringEnabled = true ... layoutManager = WearableLinearLayoutManager(this@MainActivity) }
Java
// 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
.
Kotlin
/** 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 } } }
Java
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); } }
Kotlin
wearableRecyclerView.layoutManager = WearableLinearLayoutManager(this, CustomScrollingLayoutCallback())
Java
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:
Kotlin
wearableRecyclerView.apply { isCircularScrollingGestureEnabled = true bezelFraction = 0.5f scrollDegreesPerScreen = 90f }
Java
wearableRecyclerView.setCircularScrollingGestureEnabled(true); wearableRecyclerView.setBezelFraction(0.5f); wearableRecyclerView.setScrollDegreesPerScreen(90);