Aggiunta di una seconda barra degli strumenti

Panoramica

Può Toolbar fare più di sostituire la barra delle azioni: può essere usata più volte all'interno di un'attività, può essere personalizzata per il posizionamento ovunque sullo schermo e può essere configurata per estendersi solo una larghezza parziale dello schermo. Gli esempi seguenti illustrano come creare un secondo Toolbar e posizionarlo nella parte inferiore della schermata. Implementa Toolbar le voci di menu Copia, Taglia e Incolla .

Definire la seconda barra degli strumenti

Modificare il file di layout Main.axml e sostituirlo con il codice XML seguente:

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

Questo codice XML aggiunge un secondo Toolbar alla parte inferiore dello schermo con un riempimento vuoto ImageView al centro dello schermo. L'altezza di questa Toolbar proprietà è impostata sull'altezza di una barra delle azioni:

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

Il colore di sfondo di questo Toolbar oggetto è impostato su un colore principale che verrà definito successivamente:

android:background="?android:attr/colorAccent

Si noti che si Toolbar basa su un tema diverso (ThemeOverlay.Material.Dark.ActionBar) rispetto a quello usato da Toolbar creato in Sostituzione della barra delle azioni, non è associato all'arredamento della finestra dell'attività o al tema utilizzato nel primo Toolbar.

Modificare Risorse/valori/styles.xml e aggiungere il colore principale seguente alla definizione dello stile:

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

In questo modo la barra degli strumenti inferiore ha un colore ambra scuro. La compilazione e l'esecuzione dell'app visualizza una seconda barra degli strumenti vuota nella parte inferiore della schermata:

Aggiungi voci di menu Modifica

In questa sezione viene illustrato come aggiungere voci di menu di modifica nella parte inferiore Toolbardi .

Per aggiungere voci di menu a un database secondario Toolbar:

1. Aggiungere icone di menu alle mipmap- cartelle del progetto dell'app (se necessario).

2. Definire il contenuto delle voci di menu aggiungendo un file di risorse di menu aggiuntivo a Risorse/menu.

3. Nel metodo dell'attività OnCreate trovare ( Toolbar chiamando FindViewById) e gonfiare i Toolbarmenu.

4. Implementare un gestore di clic in OnCreate per le nuove voci di menu.

Le sezioni seguenti illustrano in dettaglio questo processo: Le voci di menu Taglia, Copia e Incolla vengono aggiunte alla parte inferiore Toolbardi .

Definire la risorsa del menu Modifica

Nella sottodirectory Resources/menu creare un nuovo file XML denominato edit_menus.xml e sostituire il contenuto con il codice XML seguente:

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

Questo codice XML crea le voci di menu Taglia, Copia e Incolla (utilizzando icone aggiunte alle mipmap- cartelle in Sostituzione della barra delle azioni).

Gonfiare i menu

Alla fine del OnCreate metodo in MainActivity.cs aggiungere le righe di codice seguenti:

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

Questo codice individua la edit_toolbar visualizzazione definita in Main.axml, imposta il titolo su Modifica e ne gonfia le voci di menu (definite in edit_menus.xml). Definisce un gestore di clic di menu che visualizza un avviso popup per indicare quale icona di modifica è stata toccata.

Compilare ed eseguire l'app. Quando l'app viene eseguita, il testo e le icone aggiunte sopra verranno visualizzati come illustrato di seguito:

Se si tocca l'icona del menu Taglia , viene visualizzato l'avviso popup seguente:

Toccando le voci di menu su una delle barre degli strumenti vengono visualizzati gli avvisi popup risultanti:

Pulsante Su

La maggior parte delle app Android si basa sul pulsante Indietro per lo spostamento dell'app. Se si preme il pulsante Indietro, l'utente passa alla schermata precedente. Tuttavia, potresti anche voler fornire un pulsante Su che consenta agli utenti di spostarsi facilmente nella schermata principale dell'app. Quando l'utente seleziona il pulsante Su , l'utente passa a un livello superiore nella gerarchia dell'app, ovvero l'app visualizza più attività nello stack indietro anziché tornare all'attività visitata in precedenza.

Per abilitare il pulsante Up in una seconda attività che usa come Toolbar barra delle azioni, chiamare i SetDisplayHomeAsUpEnabled metodi e SetHomeButtonEnabled nel metodo della OnCreate seconda attività:

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