Android Ajouter un tiroir de navigation


Exemple

Les tiroirs de navigation permettent de naviguer vers des destinations de premier niveau dans une application.

Assurez-vous d'avoir ajouté la bibliothèque d'aide à la conception dans votre fichier build.gradle sous des dépendances:

 dependencies {
    // ...
    compile 'com.android.support:design:25.3.1'
}

Ensuite, ajoutez DrawerLayout et NavigationView dans votre fichier de ressources de disposition XML.
Le DrawerLayout est juste un conteneur sophistiqué qui permet à NavigationView , le tiroir de navigation proprement dit, de sortir de la gauche ou de la droite de l'écran. Remarque: pour les appareils mobiles, la taille de tiroir standard est de 320dp.

<!-- res/layout/activity_main.xml -->
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/navigation_drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">
    <! -- You can use "end" to open drawer from the right side -->

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/AppTheme.AppBarOverlay">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

        </android.support.design.widget.AppBarLayout>

    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_drawer"
        android:layout_width="320dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/navigation_menu" />

</android.support.v4.widget.DrawerLayout>

Maintenant, si vous le souhaitez, créez un fichier d'en-tête qui servira de haut de votre tiroir de navigation. Ceci est utilisé pour donner un aspect beaucoup plus élégant au tiroir.

<!-- res/layout/drawer_header.xml -->
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="190dp">

    <ImageView
        android:id="@+id/header_image"
        android:layout_width="140dp"
        android:layout_height="120dp"
        android:layout_centerInParent="true"
        android:scaleType="centerCrop"
        android:src="@drawable/image" />

    <TextView
        android:id="@+id/header_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/header_image"
        android:text="User name"
        android:textSize="20sp" />

</RelativeLayout>

Il est référencé dans la balise NavigationView dans l' app:headerLayout="@layout/drawer_header" .
Cette app:headerLayout gonfle app:headerLayout la mise en page spécifiée dans l'en-tête. Cela peut aussi être fait à l'exécution avec:

// Lookup navigation view
NavigationView navigationView = (NavigationView) findViewById(R.id.navigation_drawer);
// Inflate the header view at runtime
View headerLayout = navigationView.inflateHeaderView(R.layout.drawer_header);

Pour remplir automatiquement votre tiroir de navigation avec les éléments de navigation compatibles avec la conception du matériau, créez un fichier de menu et ajoutez des éléments selon vos besoins. Remarque: bien que les icônes des éléments ne soient pas obligatoires, elles sont suggérées dans la spécification de conception du matériau .
Il est référencé dans la balise NavigationView dans l' app:menu="@menu/navigation_menu" attribute .

<!-- res/menu/menu_drawer.xml -->
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/nav_item_1"
        android:title="Item #1"
        android:icon="@drawable/ic_nav_1" />
    <item
        android:id="@+id/nav_item_2"
        android:title="Item #2"
        android:icon="@drawable/ic_nav_2" />
    <item
        android:id="@+id/nav_item_3"
        android:title="Item #3"
        android:icon="@drawable/ic_nav_3" />
    <item
        android:id="@+id/nav_item_4"
        android:title="Item #4"
        android:icon="@drawable/ic_nav_4" />
</menu>

Pour séparer les éléments en groupes, placez-les dans un <menu> imbriqué dans un autre <item> avec un attribut android:title ou enveloppez-les avec la <group> .

Maintenant que la mise en page est terminée, passez au code d' Activity :

  // Find the navigation view
  NavigationView navigationView = (NavigationView) findViewById(R.id.navigation_drawer);
  navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
      @Override
      public boolean onNavigationItemSelected(MenuItem item) {
          // Get item ID to determine what to do on user click
          int itemId = item.getItemId();
          // Respond to Navigation Drawer selections with a new Intent
          startActivity(new Intent(this, OtherActivity.class));
          return true;
      }
  });

  DrawerLayout drawer = (DrawerLayout) findViewById(R.id.navigation_drawer_layout);
  // Necessary for automatically animated navigation drawer upon open and close
  ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawer, "Open navigation drawer", "Close navigation drawer");
  // The two Strings are not displayed to the user, but be sure to put them into a separate strings.xml file.
  drawer.addDrawerListener(toggle);
  toogle.syncState();

Vous pouvez maintenant faire ce que vous voulez dans la vue d'en-tête de NavigationView

View headerView = navigationView.getHeaderView();
TextView headerTextView = (TextView) headerview.findViewById(R.id.header_text_view);
ImageView headerImageView = (ImageView) headerview.findViewById(R.id.header_image);
// Set navigation header text
headerTextView.setText("User name");
// Set navigation header image
headerImageView.setImageResource(R.drawable.header_image);

La vue d'en-tête se comporte comme n'importe quelle autre View . Une fois que vous utilisez findViewById() et que vous ajoutez d'autres View à votre fichier de mise en page, vous pouvez définir les propriétés de tout findViewById() .

Vous pouvez trouver plus de détails et d'exemples dans la rubrique dédiée .