Navegação e ações do Android Wear

Esta lição descreve como implementar gavetas de ação e navegação no app.

Como parte do Design para Wear OS by Google, há duas gavetas interativas disponíveis:

  • Gaveta de navegação. Você pode permitir que os usuários alternem entre visualizações no app.
    • Gaveta de navegação de várias páginas. Você pode apresentar o conteúdo de uma gaveta de navegação em uma única página ou em várias. Para exibir o conteúdo da gaveta de navegação em várias páginas, use o atributo app:navigationStyle com o valor definido como multiPage.
  • Gaveta de ações. Permite fornecer acesso fácil a ações comuns no seu app. A gaveta de ações aparece na parte inferior da tela e possui ações do usuário específicas do contexto, semelhantes à barra de ação em um smartphone. A gaveta de ações aparece quando o usuário chega à parte superior ou inferior do conteúdo da rolagem.

Figura 1. Gavetas de navegação e ação.

Para mais informações sobre as classes descritas nesta página, consulte a referência de API para o pacote android.support.wear.widget.drawer. As classes estão na Biblioteca de IU do Wear. Para mais informações sobre essa biblioteca e sobre as classes obsoletas (incluindo aquelas usadas anteriormente para gavetas de navegação e ação) que a Biblioteca de IU do Wear substitui, consulte Como usar a Biblioteca de IU do Wear.

Criar um layout de gaveta

Para adicionar uma ação ou uma gaveta de navegação ao seu app, declare uma interface do usuário com um objeto WearableDrawerLayout como a visualização raiz do layout. Dentro do WearableDrawerLayout, se o conteúdo estiver rolando, ele precisará ser compatível com rolagem aninhada.

Por exemplo, o layout a seguir usa um WearableDrawerLayout com três visualizações filhas: uma LinearLayout para conter o conteúdo principal, uma gaveta de navegação e uma gaveta de ação.

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

Observação: a classe WearableDrawerLayout substitui uma classe obsoleta semelhante na Biblioteca de Suporte de Wearables.

Criar uma gaveta de navegação de várias páginas

Por padrão, uma gaveta de navegação tem uma única página. No entanto, uma gaveta com uma página pode não ser adequada para seu app, principalmente se ele tiver mais de sete visualizações ou se tiver visualizações que não sejam facilmente representadas por ícones. Para criar uma gaveta de navegação de várias páginas, aplique o atributo navigationStyle="multiPage" à gaveta. Por exemplo:

    <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"
    

Inicializar o conteúdo da gaveta

Uma das etapas principais de uma atividade é inicializar as listas de itens das gavetas. Você precisa estender o WearableNavigationDrawerAdapter para preencher o conteúdo da gaveta de navegação. É possível preencher o conteúdo da gaveta de ações no arquivo XML de layout usando o atributo app:actionMenu:

    app:actionMenu="@menu/action_drawer_menu"
        

Veja a seguir como inicializar o conteúdo das gavetas:

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

Criar uma visualização personalizada da gaveta

Para usar visualizações personalizadas em gavetas, adicione uma WearableDrawerView ao WearableDrawerLayout. Para definir a visualização rápida e o conteúdo da gaveta, adicione-os como filhos da WearableDrawerView e especifique os códigos deles nos atributos peekView e drawerContent, respectivamente. Especifique também a posição da gaveta usando o valor top ou bottom para o atributo android:layout_gravity (apenas top e bottom são aceitos).

As visualizações rápidas personalizadas precisam especificar os próprios preenchimentos superior e inferior.

O exemplo a seguir especifica uma gaveta na parte superior com visualização rápida e conteúdo da gaveta:

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

Detectar eventos de gavetas

Para detectar eventos de gaveta, chame setDrawerStateCallback() no seu WearableDrawerLayout e passe a ele uma implementação de WearableDrawerLayout.DrawerStateCallback. Essa classe abstrata fornece callbacks para eventos de gavetas, como onDrawerOpened(), onDrawerClosed() e onDrawerStatechanged().

Visualização rápida de gavetas

Para fazer com que uma gaveta seja exibida, chame getController() para acessar peekDrawer(), closeDrawer() e openDrawer().

Por exemplo:

Kotlin

    wearableActionDrawer.controller.peekDrawer()
    

Java

    wearableActionDrawer.getController().peekDrawer();
    

Por padrão, a gaveta de ações mostra a primeira ação com uma divisa quando há várias ações. Se você preferir exibir somente o ícone flutuante (três pontos verticais) sem a primeira ação, modifique o comportamento padrão configurando a sinalização showOverflowInPeek como true. Por exemplo:

    <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"/>
    

Por padrão, a gaveta de ação é exibida quando um usuário atinge a parte superior ou inferior do conteúdo da rolagem principal (ou seja, a exibição que implementa NestedScrollingChild), seja de rolagem normal ou navegação. Se preferir, você pode fazer a gaveta surgir sempre que o usuário estiver rolando para baixo, configurando o método actionDrawer.setPeekOnScrollDownEnabled() como true.

A gaveta de navegação é exibida, por padrão, quando um usuário chega à parte superior do conteúdo, seja por rolagem normal ou navegação.