Partager via


Ajout d’une seconde barre d’outils

Vue d’ensemble

Le Toolbar fait de remplacer la barre d’actions peut être utilisée plusieurs fois dans une activité, elle peut être personnalisée pour le placement n’importe où sur l’écran, et elle peut être configurée pour s’étendre uniquement sur une largeur partielle de l’écran. Les exemples ci-dessous illustrent comment créer une seconde Toolbar et le placer en bas de l’écran. Cela Toolbar implémente les éléments de menu Copier, Couper et Coller .

Définir la deuxième barre d’outils

Modifiez le fichier de disposition Main.axml et remplacez son contenu par le code XML suivant :

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

Ce code XML ajoute une seconde Toolbar au bas de l’écran avec un remplissage vide ImageView au milieu de l’écran. La hauteur de cette Toolbar valeur est définie sur la hauteur d’une barre d’action :

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

La couleur d’arrière-plan est Toolbar définie sur une couleur d’accentuation qui sera définie ensuite :

android:background="?android:attr/colorAccent

Notez qu’il Toolbar s’agit d’un autre thème (ThemeOverlay.Material.Dark.ActionBar) que celui utilisé par le Toolbar créé lors du remplacement de la barre d’action : il n’est pas lié à la décoration de la fenêtre de l’activité ou au thème utilisé dans le premier Toolbar.

Modifiez les ressources/valeurs/styles.xml et ajoutez la couleur d’accentuation suivante à la définition de style :

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

Cela donne à la barre d’outils inférieure une couleur orange foncée. La création et l’exécution de l’application affiche une deuxième barre d’outils vide en bas de l’écran :

Capture d’écran de l’application avec la deuxième barre d’outils jaune en bas de l’écran

Ajouter des éléments de menu Modifier

Cette section explique comment ajouter des éléments de menu de modification au bas Toolbar.

Pour ajouter des éléments de menu à un élément secondaire Toolbar:

  1. Ajoutez des icônes de menu aux mipmap- dossiers du projet d’application (si nécessaire).

  2. Définissez le contenu des éléments de menu en ajoutant un fichier de ressources de menu supplémentaire aux ressources/menu.

  3. Dans la méthode de l’activité OnCreate , recherchez le Toolbar (en appelant FindViewById) et gonflez les Toolbarmenus de l’activité.

  4. Implémentez un gestionnaire de clics pour OnCreate les nouveaux éléments de menu.

Les sections suivantes illustrent ce processus en détail : les éléments de menu Couper, Copier et Coller sont ajoutés au bas Toolbar.

Définir la ressource de menu Modifier

Dans le sous-répertoire Resources/menu , créez un fichier XML appelé edit_menus.xml et remplacez le contenu par le code XML suivant :

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

Ce code XML crée les éléments de menu Couper, Copier et Coller (à l’aide mipmap- d’icônes ajoutées aux dossiers en remplaçant la barre d’actions).

Gonfler les menus

À la fin de la OnCreate méthode dans MainActivity.cs, ajoutez les lignes de code suivantes :

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

Ce code localise la edit_toolbar vue définie dans Main.axml, définit son titre sur Modification et gonfle ses éléments de menu (définis dans edit_menus.xml). Il définit un gestionnaire de clics de menu qui affiche un toast pour indiquer l’icône d’édition qui a été tapée.

Générez et exécutez l'application. Lorsque l’application s’exécute, le texte et les icônes ajoutés ci-dessus s’affichent comme indiqué ici :

Diagramme de la barre d’outils inférieure avec les icônes Couper, Copier et Coller

L’appui sur l’icône de menu Couper entraîne l’affichage des toasts suivants :

Capture d’écran de Toast indiquant que l’icône de menu Couper a été tapée

L’appui sur les éléments de menu de l’une ou l’autre barre d’outils affiche les toasts résultants :

Captures d’écran des toasts pour enregistrer, copier et coller des éléments de menu en cours d’utilisation

Bouton Haut

La plupart des applications Android s’appuient sur le bouton Précédent pour la navigation de l’application ; en appuyant sur le bouton Précédent , l’utilisateur passe à l’écran précédent. Toutefois, vous pouvez également fournir un bouton Haut qui permet aux utilisateurs de naviguer facilement sur l’écran principal de l’application. Lorsque l’utilisateur sélectionne le bouton Haut , l’utilisateur passe à un niveau supérieur dans la hiérarchie de l’application, c’est-à-dire que l’application renvoie plusieurs activités dans la pile arrière plutôt que de revenir à l’activité précédemment visitée.

Pour activer le bouton Haut dans une deuxième activité qui utilise une Toolbar barre d’actionsOnCreate, appelez les méthodes et SetHomeButtonEnabled les SetDisplayHomeAsUpEnabled méthodes de la deuxième activité :

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