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:navigationStylecom o valor definido comomultiPage.
-
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
-
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 tem ações de usuário específicas ao contexto, semelhante à barra de ações em um smartphone. A gaveta de ações aparece quando o usuário chega à parte superior ou inferior do conteúdo da rolagem.
-
Definir título: você pode definir o título da gaveta de ações usando o método
setTitle()(deWearableActionDrawerView) ou o atributoapp:drawerTitle.
-
Definir título: você pode definir o título da gaveta de ações usando o método
Figura 1. Gavetas de navegação e ação.
Para ver informações detalhadas sobre as classes descritas nesta página, consulte a referência de API para o pacote
androidx.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 Usar a Biblioteca de IU do Wear.
Confira os seguintes recursos relacionados:
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ções.
<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>
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:
<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">
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 compatíveis).
As visualizações rápidas personalizadas precisam especificar os próprios paddings superior e inferior.
O exemplo a seguir especifica uma gaveta na parte superior com visualização rápida e conteúdo da gaveta:
<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>
Detectar eventos de gavetas
Para detectar eventos de gavetas, 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 apenas 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:
<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"/>
Por padrão, a gaveta de ação é exibida quando um usuário atinge a parte superior ou inferior do conteúdo de rolagem principal (ou seja, a visualização que implementa NestedScrollingChild), seja por 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.