Acciones y navegación de Wear

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 en multiPage.
• 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() (de WearableActionDrawerView) o el atributo app:drawerTitle.

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.

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:

    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)
                    }
        }
    }
    

    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:

    wearableActionDrawer.controller.peekDrawer()
    

    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.