Compartilhar via


Adicionar uma segunda barra de ferramentas

Visão geral

O Toolbar pode fazer mais do que substituir a barra de ação - ele pode ser usado várias vezes dentro de uma atividade, pode ser personalizado para posicionamento em qualquer lugar na tela, e pode ser configurado para abranger apenas uma largura parcial da tela. Os exemplos abaixo ilustram como criar um segundo Toolbar e colocá-lo na parte inferior da tela. Isso Toolbar implementa itens de menu Copiar, Recortar e Colar .

Definir a segunda barra de ferramentas

Edite o arquivo de layout Main.axml e substitua seu conteúdo pelo seguinte XML:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/main_content"
        android:layout_below="@id/toolbar">
      <ImageView
          android:layout_width="fill_parent"
          android:layout_height="0dp"
          android:layout_weight="1" />
      <Toolbar
          android:id="@+id/edit_toolbar"
          android:minHeight="?android:attr/actionBarSize"
          android:background="?android:attr/colorAccent"
          android:theme="@android:style/ThemeOverlay.Material.Dark.ActionBar"
          android:layout_width="match_parent"
          android:layout_height="wrap_content" />
    </LinearLayout>
</RelativeLayout>

Esse XML adiciona um segundo Toolbar à parte inferior da tela com um preenchimento vazio ImageView no meio da tela. A altura disso Toolbar é definida como a altura de uma barra de ação:

android:minHeight="?android:attr/actionBarSize"

A cor de plano de fundo disso Toolbar é definida como uma cor de destaque que será definida a seguir:

android:background="?android:attr/colorAccent

Observe que isso Toolbar se baseia em um tema diferente (ThemeOverlay.Material.Dark.ActionBar) do que o Toolbar usado pelo criado em Substituindo a Barra de Ação – ele não está vinculado à decoração da janela da Atividade ou ao tema usado no primeiro Toolbar.

Edite Recursos/valores/styles.xml e adicione a seguinte cor de destaque à definição de estilo:

<item name="android:colorAccent">#C7A935</item>

Isso dá à barra de ferramentas inferior uma cor âmbar escura. Criar e executar o aplicativo exibe uma segunda barra de ferramentas em branco na parte inferior da tela:

Captura de tela do aplicativo com a segunda barra de ferramentas amarela na parte inferior da tela

Adicionar itens de menu de edição

Esta seção explica como adicionar itens de menu de edição à parte inferior Toolbar.

Para adicionar itens de menu a um secundário Toolbar:

  1. Adicione ícones de menu às mipmap- pastas do projeto do aplicativo (se necessário).

  2. Defina o conteúdo dos itens de menu adicionando um arquivo de recurso de menu adicional a Recursos/menu.

  3. No método da OnCreate Atividade, encontre o Toolbar (chamando FindViewById) e inflacione os Toolbarmenus do .

  4. Implemente um manipulador de clique para OnCreate os novos itens de menu.

As seções a seguir demonstram esse processo em detalhes: Os itens de menu Recortar, Copiar e Colar são adicionados à parte inferior Toolbar.

Definir o recurso de menu Editar

No subdiretório Resources/menu, crie um novo arquivo XML chamado edit_menus.xml e substitua o conteúdo pelo seguinte XML:

<?xml version="1.0" encoding="utf-8" ?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
  <item
       android:id="@+id/menu_cut"
       android:icon="@mipmap/ic_menu_cut_holo_dark"
       android:showAsAction="ifRoom"
       android:title="Cut" />
  <item
       android:id="@+id/menu_copy"
       android:icon="@mipmap/ic_menu_copy_holo_dark"
       android:showAsAction="ifRoom"
       android:title="Copy" />
  <item
       android:id="@+id/menu_paste"
       android:icon="@mipmap/ic_menu_paste_holo_dark"
       android:showAsAction="ifRoom"
       android:title="Paste" />
</menu>

Esse XML cria os itens de menu Recortar, Copiar e Colar (usando ícones que foram adicionados às mipmap- pastas em Substituindo a barra de ação).

Inflar os menus

No final do OnCreate método em MainActivity.cs, adicione as seguintes linhas de código:

var editToolbar = FindViewById<Toolbar>(Resource.Id.edit_toolbar);
editToolbar.Title = "Editing";
editToolbar.InflateMenu (Resource.Menu.edit_menus);
editToolbar.MenuItemClick += (sender, e) => {
    Toast.MakeText(this, "Bottom toolbar tapped: " + e.Item.TitleFormatted, ToastLength.Short).Show();
};

Esse código localiza a edit_toolbar exibição definida em Main.axml, define seu título como Edição e infla seus itens de menu (definidos em edit_menus.xml). Ele define um manipulador de clique de menu que exibe uma notificação do sistema para indicar qual ícone de edição foi tocado.

Compile e execute o aplicativo. Quando o aplicativo for executado, o texto e os ícones adicionados acima aparecerão como mostrado aqui:

Diagrama da barra de ferramentas inferior com ícones Recortar, Copiar e Colar

Tocar no ícone do menu Recortar faz com que a seguinte notificação do sistema seja exibida:

Captura de tela da notificação do sistema indicando que o ícone do menu Recortar foi tocado

Tocar em itens de menu em qualquer barra de ferramentas exibe as notificações do sistema resultantes:

Capturas de tela de itens de menu do Sistema para Salvar, Copiar e Colar sendo tocados

O botão para cima

A maioria dos aplicativos Android depende do botão Voltar para navegação do aplicativo, pressionando o botão Voltar leva o usuário para a tela anterior. No entanto, você também pode fornecer um botão Para cima que facilita a navegação dos usuários "para cima" para a tela principal do aplicativo. Quando o usuário seleciona o botão Para cima , ele sobe para um nível mais alto na hierarquia do aplicativo, ou seja, o aplicativo exibe várias atividades de volta na pilha traseira em vez de voltar para a Atividade visitada anteriormente.

Para habilitar o botão Para cima em uma segunda atividade que usa um Toolbar como sua barra de ações, chame os SetDisplayHomeAsUpEnabled métodos e SetHomeButtonEnabled no método da OnCreate segunda atividade:

SetActionBar (toolbar);
...
ActionBar.SetDisplayHomeAsUpEnabled (true);
ActionBar.SetHomeButtonEnabled (true);