Sostituzione della Barra delle azioni

Panoramica

Uno degli usi più comuni per è Toolbar sostituire la barra delle azioni predefinita con un oggetto personalizzato Toolbar (quando viene creato un nuovo progetto Android, usa la barra delle azioni predefinita). Toolbar Poiché offre la possibilità di aggiungere logo, titoli, voci di menu, pulsanti di spostamento e persino visualizzazioni personalizzate alla sezione della barra dell'app dell'interfaccia utente di un'attività, offre un aggiornamento significativo sulla barra delle azioni predefinita.

Per sostituire la barra delle azioni predefinita di un'app con :Toolbar

1. Creare un nuovo tema personalizzato e modificare le proprietà dell'app in modo che usi questo nuovo tema.

2. Disabilitare l'attributo windowActionBar nel tema personalizzato e abilitare l'attributo windowNoTitle .

3. Definire un layout per .Toolbar

4. Includere il Toolbar layout nel file di layout Main.axml dell'attività.

5. Aggiungere codice al metodo dell'attività OnCreate per individuare Toolbar e chiamare SetActionBar per installare come ToolBar barra delle azioni.

Le sezioni seguenti illustrano in dettaglio questo processo. Viene creata una semplice app e la relativa barra delle azioni viene sostituita con un oggetto personalizzato Toolbar.

Avviare un progetto di app

Creare un nuovo progetto Android denominato ToolbarFun (vedere Hello, Android per altre informazioni sulla creazione di un nuovo progetto Android). Dopo aver creato questo progetto, impostare i livelli di DESTINAZIONE e API Android minimi su Android 5.0 (livello API 21 - Lollipop) o versione successiva. Per altre informazioni sull'impostazione dei livelli di versione di Android, vedere Informazioni sui livelli api Android. Quando l'app viene compilata ed eseguita, viene visualizzata la barra delle azioni predefinita, come illustrato in questo screenshot:

Creare un tema personalizzato

Aprire la directory Resources/values e creare un nuovo file denominato styles.xml. Sostituire il relativo contenuto con il codice XML seguente:

<?xml version="1.0" encoding="utf-8" ?>
<resources>
  <style name="MyTheme" parent="@android:style/Theme.Material.Light.DarkActionBar">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowActionBar">false</item>
    <item name="android:colorPrimary">#5A8622</item>
  </style>
</resources>

Questo codice XML definisce un nuovo tema personalizzato denominato MyTheme basato sul tema Theme.Material.Light.DarkActionBar in Lollipop. L'attributo windowNoTitle è impostato su true per nascondere la barra del titolo:

<item name="android:windowNoTitle">true</item>

Per visualizzare la barra degli strumenti personalizzata, il valore predefinito deve essere disabilitato ActionBar :

<item name="android:windowActionBar">false</item>

Per il colore di sfondo della barra degli strumenti viene usata un'impostazione verde colorPrimary oliva:

<item name="android:colorPrimary">#5A8622</item>

Applicare il tema personalizzato

Modificare proprietà/AndroidManifest.xml e aggiungere l'attributo seguente android:theme all'elemento <application> in modo che l'app usi il MyTheme tema personalizzato:

<application android:label="@string/app_name" android:theme="@style/MyTheme"></application>

Per altre informazioni sull'applicazione di un tema personalizzato a un'app, vedere Uso di temi personalizzati.

Definire un layout della barra degli strumenti

Nella directory Resources/layout creare un nuovo file denominato toolbar.xml. Sostituire il relativo contenuto con il codice XML seguente:

<?xml version="1.0" encoding="utf-8"?>
<Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?android:attr/actionBarSize"
    android:background="?android:attr/colorPrimary"
    android:theme="@android:style/ThemeOverlay.Material.Dark.ActionBar"/>

Questo codice XML definisce l'oggetto personalizzato Toolbar che sostituisce la barra delle azioni predefinita. L'altezza minima di Toolbar è impostata sulle dimensioni della barra delle azioni che sostituisce:

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

Il colore di sfondo di Toolbar è impostato sul colore verde oliva definito in precedenza in styles.xml:

android:background="?android:attr/colorPrimary"

A partire da Lollipop, l'attributo android:theme può essere usato per applicare uno stile a una singola visualizzazione. I ThemeOverlay.Material temi introdotti in Lollipop consentono di sovrapporre i temi predefiniti Theme.Material , sovrascrivendo gli attributi pertinenti per renderli chiari o scuri. In questo esempio, Toolbar usa un tema scuro in modo che il suo contenuto sia chiaro a colori:

android:theme="@android:style/ThemeOverlay.Material.Dark.ActionBar"

Questa impostazione viene usata in modo che le voci di menu siano in contrasto con il colore di sfondo più scuro.

Includere il layout della barra degli strumenti

Modificare il file di layout Resources/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" />
</RelativeLayout>

Questo layout include l'oggetto Toolbar definito in toolbar.xml e usa un RelativeLayout oggetto per specificare che Toolbar deve essere posizionato nella parte superiore dell'interfaccia utente (sopra il pulsante).

Trovare e attivare la barra degli strumenti

Modificare MainActivity.cs e aggiungere l'istruzione using seguente:

using Android.Views;

Aggiungere anche le righe di codice seguenti alla fine del OnCreate metodo :

var toolbar = FindViewById<Toolbar>(Resource.Id.toolbar);
SetActionBar(toolbar);
ActionBar.Title = "My Toolbar";

Questo codice trova le Toolbar chiamate SetActionBar e in modo che l'oggetto Toolbar e assuma le caratteristiche predefinite della barra delle azioni. Il titolo della barra degli strumenti viene modificato in Barra degli strumenti personale. Come illustrato in questo esempio di codice, è possibile fare riferimento direttamente a come ToolBar barra delle azioni. Compilare ed eseguire questa app: l'app personalizzata Toolbar viene visualizzata al posto della barra delle azioni predefinita:

Si noti che lo Toolbar stile è indipendentemente dal Theme.Material.Light.DarkActionBar tema applicato al resto dell'app.

Se si verifica un'eccezione durante l'esecuzione dell'app, vedere la sezione Risoluzione dei problemi seguente.

Aggiungi voci di menu

In questa sezione i menu vengono aggiunti a Toolbar. L'area superiore destra di è riservata alle voci di menu. Ogni voce di menu (detta anche voce di azione) può eseguire un'azione all'interno dell'attività ToolBar corrente oppure può eseguire un'azione per conto dell'intera app.

Per aggiungere menu a Toolbar:

1. Aggiungere icone di menu (se necessario) alle mipmap- cartelle del progetto dell'app. Google offre un set di icone di menu gratuite nella pagina Icone materiali.

2. Definire il contenuto delle voci di menu aggiungendo un nuovo file di risorse di menu in Risorse/menu.

3. Implementare il OnCreateOptionsMenu metodo dell'attività: questo metodo gonfia le voci di menu.

4. Implementare il OnOptionsItemSelected metodo dell'attività: questo metodo esegue un'azione quando viene toccata una voce di menu.

Le sezioni seguenti illustrano in dettaglio questo processo aggiungendo le voci di menu Modifica e Salva all'oggetto personalizzato Toolbar.

Icone del menu Installa

Continuando con l'app ToolbarFun di esempio, aggiungere icone di menu al progetto dell'app. Scaricare icone della barra degli strumenti, decomprimere e copiare il contenuto delle cartelle mipmap- estratte nelle cartelle mipmap del progetto in ToolbarFun/Resources e includere ogni file icona aggiunto nel progetto.

Definire una risorsa di menu

Creare una nuova sottodirectory del menu in Risorse. Nella sottodirectory del menu creare un nuovo file di risorse di menu denominato top_menus.xml e sostituirne 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_edit"
       android:icon="@mipmap/ic_action_content_create"
       android:showAsAction="ifRoom"
       android:title="Edit" />
  <item
       android:id="@+id/menu_save"
       android:icon="@mipmap/ic_action_content_save"
       android:showAsAction="ifRoom"
       android:title="Save" />
  <item
       android:id="@+id/menu_preferences"
       android:showAsAction="never"
       android:title="Preferences" />
</menu>

Questo codice XML crea tre voci di menu:

• Voce di menu Modifica che usa l'icona ic_action_content_create.png (matita).

• Voce di menu Salva che usa l'icona ic_action_content_save.png (un disco).

• Voce di menu Preferenze che non dispone di un'icona.

Gli showAsAction attributi delle voci di menu Modifica e Salva sono impostati su ifRoom . Questa impostazione determina la visualizzazione di queste voci di menu in Toolbar se è disponibile spazio sufficiente per la visualizzazione. La voce di menu Preferenze imposta su showAsAction never : in questo modo il menu Preferenze viene visualizzato nel menu di overflow (tre punti verticali).

Implementare OnCreateOptionsMenu

Aggiungere il metodo seguente a MainActivity.cs:

public override bool OnCreateOptionsMenu(IMenu menu)
{
    MenuInflater.Inflate(Resource.Menu.top_menus, menu);
    return base.OnCreateOptionsMenu(menu);
}

Android chiama il OnCreateOptionsMenu metodo in modo che l'app possa specificare la risorsa di menu per un'attività. In questo metodo, la risorsa top_menus.xml viene gonfiata nell'oggetto passato menu. Questo codice determina la visualizzazione delle nuove voci di menu Modifica, Salva e Preferenze in Toolbar.

Implementare OnOptionsItemSelected

Aggiungere il metodo seguente a MainActivity.cs:

public override bool OnOptionsItemSelected(IMenuItem item)
{
    Toast.MakeText(this, "Action selected: " + item.TitleFormatted,
        ToastLength.Short).Show();
    return base.OnOptionsItemSelected(item);
}

Quando un utente tocca una voce di menu, Android chiama il OnOptionsItemSelected metodo e passa la voce di menu selezionata. In questo esempio, l'implementazione visualizza solo un avviso popup per indicare quale voce di menu è stata toccata.

Compilare ed eseguire ToolbarFun per visualizzare le nuove voci di menu nella barra degli strumenti. Ora Toolbar vengono visualizzate tre icone di menu, come illustrato in questo screenshot:

Quando un utente tocca la voce di menu Modifica , viene visualizzato un avviso popup per indicare che il OnOptionsItemSelected metodo è stato chiamato:

Quando un utente tocca il menu di overflow, viene visualizzata la voce di menu Preferenze . In genere, le azioni meno comuni devono essere inserite nel menu di overflow. Questo esempio usa il menu di overflow per Preferenze perché non viene usato come Modifica e Salva:

Per altre informazioni sui menu Android, vedere l'argomento Menu per sviluppatori Android.

Risoluzione dei problemi

I suggerimenti seguenti consentono di eseguire il debug dei problemi che possono verificarsi durante la sostituzione della barra delle azioni con una barra degli strumenti.

L'attività ha già una barra delle azioni

Se l'app non è configurata correttamente per l'uso di un tema personalizzato, come illustrato in Applica il tema personalizzato, l'eccezione seguente può verificarsi durante l'esecuzione dell'app:

Inoltre, è possibile che venga generato un messaggio di errore simile al seguente: Java.Lang.IllegalStateException: Questa attività ha già una barra delle azioni fornita dall'arredamento della finestra.

Per correggere questo errore, verificare che l'attributo android:theme per il tema personalizzato venga aggiunto a <application> (in Proprietà/AndroidManifest.xml) come descritto in precedenza in Applicare il tema personalizzato. Inoltre, questo errore può essere causato se il layout o il Toolbar tema personalizzato non è configurato correttamente.