Acciones y navegación de Wear

Esta lección 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 panales 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 proporcionar acceso sencillo a acciones comunes de tu app. El panel lateral de acciones aparece en la parte inferior de la pantalla y contiene acciones para el usuario que varían según el 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 información detallada sobre las clases descritas en esta página, consulta la referencia de la API del paquete android.support.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:

Diseño del panel lateral de navegación

Muestra de paneles laterales de Wear

Codelab para navegación y acciones

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 contener el contenido principal, un panel lateral de navegación y un panel lateral de acción.

    <android.support.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"/>
    </android.support.wear.widget.drawer.WearableDrawerLayout>

Nota: La clase WearableDrawerLayout reemplaza a una clase similar obsoleta de la Biblioteca de compatibilidad con dispositivos wearables.

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:

    <android.support.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. Puedes hacerlo en tu archivo XML de diseño utilizando el 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 utilizando 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:

    <android.support.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>
    </android.support.wear.widget.drawer.WearableDrawerView>

Cómo detectar eventos de paneles laterales

Para detectar eventos de panel lateral, llama a setDrawerStateCallback() en tu WearableDrawerLayout y pasa esa implementación a 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 inspeccionar un panel lateral, llama a getController() a fin de 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 solo 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:

    <android.support.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 desplazarse como lo hace normalmente. Si prefieres, puedes configurar el método actionDrawer.setPeekOnScrollDownEnabled() en true para que el panel lateral aparezca cada vez que 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.

Using the Wear UI library

Multi-function buttons

Acciones y navegación de Wear

Crear un diseño de panel lateral

Cómo crear un panel lateral de navegación de varias páginas

Cómo inicializar el contenido del panel lateral

Kotlin

Java

Cómo crear una vista personalizada de panel lateral

Cómo detectar eventos de paneles laterales

Cómo inspeccionar paneles laterales

Kotlin

Java