En esta lección, se describe cómo implementar paneles laterales de acción y navegación en tu app.
Como parte del Diseño para Wear OS by Google, hay dos paneles laterales interactivos disponibles:
-
Panel lateral de navegación: Puedes permitirles a los usuarios que cambien entre las vistas en tu app.
-
Panel lateral de navegación multipágina: Puedes presentar el contenido de un panel lateral de navegación en una sola página o en varias. Para hacerlo en varias páginas, utiliza el atributo
app:navigationStyle
con un valor establecido enmultiPage
.
-
Panel lateral de navegación multipágina: Puedes presentar el contenido de un panel lateral de navegación en una sola página o en varias. Para hacerlo en varias páginas, utiliza el atributo
-
Panel lateral de acciones: Te permite facilitar el acceso a acciones comunes en tu app. El panel lateral de acciones aparece en la parte inferior de la pantalla y tiene acciones de usuario específicas del contexto, similares a la barra de acciones de un teléfono. El panel lateral de acciones se asoma cuando el usuario llega a la parte superior o inferior del contenido desplazable.
- Configurar título: Puedes configurar el título del panel lateral de acción utilizando el método
setTitle()
(deWearableActionDrawerView
) o el atributoapp:drawerTitle
.
- Configurar título: Puedes configurar el título del panel lateral de acción utilizando el método

Figura 1: Paneles laterales de navegación y acción

Para obtener más información sobre las clases descritas en esta página, consulta la referencia de la API para el paquete
androidx.wear.widget.drawer
.
Las clases están en la biblioteca de la IU de Wear. Para obtener información sobre esa biblioteca y las clases obsoletas (incluidas aquellas utilizadas anteriormente para los paneles laterales de acción y navegación) que reemplaza la Biblioteca de IU de Wear, consulta Cómo usar la Biblioteca de IU de Wear.
Consulta los siguientes recursos relacionados:
Cómo crear un diseño de panel lateral
Para agregar un panel lateral de acción o navegación a tu app, declara una interfaz de usuario con un objeto
WearableDrawerLayout
como vista raíz del diseño.
Dentro de WearableDrawerLayout
, si se desplaza el contenido, tiene que admitir el desplazamiento anidado.
Por ejemplo, el siguiente diseño utiliza un objeto
WearableDrawerLayout
con tres vistas secundarias: un elemento LinearLayout
para el contenido principal, un panel lateral de navegación y un panel lateral de acción.
<androidx.wear.widget.drawer.WearableDrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <ScrollView android:id="@+id/content" android:layout_width="match_parent" android:layout_height="match_parent" android:nestedScrollingEnabled="true"> <LinearLayout android:id="@+id/linear_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" /> </ScrollView> <android.support.wear.widget.drawer.WearableNavigationDrawerView android:id="@+id/top_navigation_drawer" android:layout_width="match_parent" android:layout_height="match_parent"/> <android.support.wear.widget.drawer.WearableActionDrawerView android:id="@+id/bottom_action_drawer" android:layout_width="match_parent" android:layout_height="match_parent" app:actionMenu="@menu/action_drawer_menu"/> </androidx.wear.widget.drawer.WearableDrawerLayout>
Nota: La clase
WearableDrawerLayout
reemplaza una clase obsoleta de la Biblioteca de compatibilidad con dispositivos wearable.
Cómo crear un panel lateral de navegación de varias páginas
De forma predeterminada, un panel lateral de navegación es un panel lateral de una sola página. Sin embargo, es posible que un panel lateral de una sola página no se ajuste a tu app, especialmente si la app tiene más de siete vistas o vistas que no se representan fácilmente con íconos. Para crear un panel lateral de navegación de varias páginas, aplica el atributo navigationStyle="multiPage"
al panel lateral. Por ejemplo:
<androidx.wear.widget.drawer.WearableNavigationDrawerView android:id="@+id/top_drawer" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/holo_red_light" app:navigationStyle="multiPage">
Cómo inicializar el contenido del panel lateral
Como uno de los pasos principales para una Actividad, inicializas las listas de elementos de los paneles. Tienes que extender WearableNavigationDrawerAdapter
para propagar el contenido del panel lateral de navegación. Otra manera de implementarlo es en el archivo XML de diseño de tu app, por medio del atributo app:actionMenu
:
app:actionMenu="@menu/action_drawer_menu"
A continuación, se muestra cómo inicializar el contenido de tus paneles laterales:
Kotlin
class MainActivity : Activity(), MenuItem.OnMenuItemClickListener { private lateinit var wearableDrawerLayout: WearableDrawerLayout private lateinit var wearableNavigationDrawer: WearableNavigationDrawerView private lateinit var wearableActionDrawer: WearableActionDrawerView ... override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) ... // Top navigation drawer wearableNavigationDrawer = findViewById(R.id.top_navigation_drawer) wearableNavigationDrawer.setAdapter(YourImplementationNavigationAdapter(this)) // Peeks navigation drawer on the top. wearableNavigationDrawer.controller.peekDrawer() // Bottom action drawer wearableActionDrawer = findViewById<WearableActionDrawerView>(R.id.bottom_action_drawer).apply { // Peeks action drawer on the bottom. controller.peekDrawer() setOnMenuItemClickListener(this@MainActivity) } } }
Java
public class MainActivity extends Activity implements OnMenuItemClickListener { private WearableDrawerLayout wearableDrawerLayout; private WearableNavigationDrawerView wearableNavigationDrawer; private WearableActionDrawerView wearableActionDrawer; ... @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ... // Top navigation drawer wearableNavigationDrawer = (WearableNavigationDrawerView) findViewById(R.id.top_navigation_drawer); wearableNavigationDrawer.setAdapter(new YourImplementationNavigationAdapter(this)); // Peeks navigation drawer on the top. wearableNavigationDrawer.getController().peekDrawer(); // Bottom action drawer wearableActionDrawer = (WearableActionDrawerView) findViewById(R.id.bottom_action_drawer); // Peeks action drawer on the bottom. wearableActionDrawer.getController().peekDrawer(); wearableActionDrawer.setOnMenuItemClickListener(this); } }
Cómo crear una vista personalizada de panel lateral
Para usar vistas personalizadas en los paneles laterales, agrega un objeto
WearableDrawerView
a
WearableDrawerLayout
. Para establecer la vista de inspección y el contenido del panel lateral, agrégalos como elementos secundarios de WearableDrawerView
y especifica sus ID en los atributos peekView
y drawerContent
, respectivamente. También especifica la posición del panel lateral con un valor top
o bottom
para el atributo android:layout_gravity
(solo se admiten top
y bottom
).
Las vistas personalizadas deben especificar su propio relleno inferior y superior.
El siguiente ejemplo especifica un panel lateral superior con vista de inspección y contenido del panel lateral:
<androidx.wear.widget.drawer.WearableDrawerView android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="top" android:background="@color/red" app:drawerContent="@+id/drawer_content" app:peekView="@+id/peek_view"> <FrameLayout android:id="@id/drawer_content" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- Drawer content goes here. --> </FrameLayout> <LinearLayout android:id="@id/peek_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:paddingTop="8dp" android:paddingBottom="8dp" android:orientation="horizontal"> <!-- Peek view content goes here. --> </LinearLayout> </androidx.wear.widget.drawer.WearableDrawerView>
Cómo detectar eventos de paneles laterales
Para escuchar los eventos del panel, llama al setDrawerStateCallback()
en tu
WearableDrawerLayout
y pásale una implementación de WearableDrawerLayout.DrawerStateCallback
. Esta clase abstracta proporciona devoluciones de llamada para eventos de paneles laterales, como onDrawerOpened()
, onDrawerClosed()
y onDrawerStatechanged()
.
Cómo inspeccionar paneles laterales
Para hacer que un panel lateral mire, llama a getController()
para acceder a peekDrawer()
, closeDrawer()
y openDrawer()
.
Por ejemplo:
Kotlin
wearableActionDrawer.controller.peekDrawer()
Java
wearableActionDrawer.getController().peekDrawer();
De forma predeterminada, el panel lateral de acciones muestra la primera acción con una comilla angular cuando hay varias acciones. Si prefieres mostrar solamente el ícono de menú ampliado (tres puntos verticales) sin la primera acción, anula el comportamiento predeterminado configurando la función experimental showOverflowInPeek
en true
. Por ejemplo:
<androidx.wear.widget.drawer.WearableActionDrawerView android:id="@+id/bottom_drawer" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/holo_blue_dark" app:showOverflowInPeek="true"/>
De forma predeterminada, el panel lateral de acciones se asoma cuando un usuario llega a la parte superior o inferior del contenido desplazable principal (es decir, la vista que implementa NestedScrollingChild
), ya sea por navegar o por desplazarse como lo hace normalmente. Si lo prefieres, puedes configurar el método actionDrawer.setPeekOnScrollDownEnabled()
en true
cuando el usuario se desplaza hacia abajo.
De forma predeterminada, el panel lateral de navegación aparece cuando un usuario llega a la parte superior del contenido, ya sea por navegar o desplazarse como lo hace normalmente.