Comment coder un "Navigation Drawer" pour une application Android

() translation by (you can also view the original English article)

Final product image — What You'll Be Creating

L'équipe de design matérielle de Google définit les fonctionnalités du "navigation drawer" sous Android comme suit :

Le "navigation drawer" se positionne à gauche et contient les destinations de navigation pour votre application.

Un exemple d'une application Android populaire qui implémente le "navigation draswer" est l'application Inbox de Google, qui utilise un "navigation draswer" pour naviguer vers différentes sections de l'application. Vous pouvez le vérifier vous-même en téléchargeant l'application Inbox depuis le Google Play Store si vous ne l'avez pas déjà sur votre appareil. La capture d'écran ci-dessous montre Inbox avec le "navigation drawer" affiché.

L'utilisateur peut voir le "navigation drawer" lorsqu'il fait glisser un doigt du bord gauche de l'activité. Ils peuvent également le trouver à partir de l'activité principale (le niveau supérieur de l'application), en appuyant sur l'icône de l'application (également connu sous le nom du menu "hamburger") dans la barre d'action.

Notez que si vous avez plusieurs destinations différentes (plus de six, disons) dans votre application, il est recommandé d'utiliser un "navigation drawer".

Dans cet article, vous apprendrez à afficher les éléments de navigation dans le "drawer" sous Android. Nous verrons comment utiliser l'API DrawerLayout et NavigationView pour effectuer cette tâche. Pour un bonus, vous apprendrez également à utiliser les templates d'Android Studio pour amorcer rapidement votre projet avec un "navigation drawer".

Un exemple de projet (en Kotlin) pour ce tutoriel peut être trouvé sur notre repo GitHub afin que vous puissiez facilement suivre.

Prérequis

Pour pouvoir suivre ce tutoriel, vous aurez besoin de :

Android Studio 3.0 ou plus
Kotlin plugin 1.1.51 ou plus

1. Créez un projet Android Studio

Lancez Android Studio et créez un nouveau projet (vous pouvez le nommer NavigationDrawerDemo) avec une activité vide appelée MainActivity. Assurez-vous de cocher la case Include Kotlin support.

2. Ajout de DrawerLayout et NavigationView

Pour commencer à utiliser DrawerLayout et NavigationView dans votre projet, vous devez importer le support de design et également l'artefact de support Android. Ajoutez-les à votre fichier de module build.gradle pour les importer.

1	dependencies {
2	implementation 'com.android.support:design:27.0.2'
3	implementation 'com.android.support:support-v4:27.0.2'
4	}

En outre, incluez à la fois le widget DrawerLayout et le widget NavigationView dans votre fichier res/layout/activlty_main.xml.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
        xmlns:android="https://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/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:openDrawer="start">

    <include
            layout="@layout/app_bar_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
            android:id="@+id/nav_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:headerLayout="@layout/nav_header_main"
            app:menu="@menu/activity_main_drawer" />

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

Ici, nous avons créé un widget DrawerLayout avec l'ID drawer_layout. La propriété tools:openDrawer est utilisée pour afficher le "navigation drawer" lorsque la disposition XML est ouverte dans la vue de conception d'Android Studio.

La documentation officielle dit ce qui suit à propos de DrawerLayout :

DrawerLayout agit comme un conteneur de niveau supérieur pour le contenu de fenêtre, ce qui permet d'extraire des vues de «drawer» interactives d'un ou des deux bords verticaux de la fenêtre.

Après avoir ajouté le widget DrawerLayout, nous avons inclus une mise en page qui pointe vers @layout/app_bar_main.

Voici mon fichier de ressources app_bar_main.xml. Ce fichier contient simplement un CoordinatorLayout, un AppBarLayout et un widget Toolbar.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
        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:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

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

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

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

Finalement, nous avons créé un widget NavigationView. La documentation officielle dit ce qui suit à propos de NavigationView:

NavigationView représente un menu de navigation standard pour l'application. Le contenu du menu peut être rempli par un fichier de ressources de menu.

Dans le widget XML NavigationView, vous pouvez voir que nous avons ajouté un attribut android:layout_gravity avec la valeur start. Ceci est utilisé pour positionner le drawer -vous voulez que le drawer sorte de gauche ou de droite- (le début ou la fin sur les versions de plateforme qui prennent en charge le sens de disposition). Dans notre cas, le drawer sortira de la gauche.

Nous avons également inclus un attribut app:headerLayout qui pointe vers @layout/nav_header_main. Cela ajoutera un View en tant qu'en-tête du menu de navigation.

Voici mon fichier de ressources de layout nav_header_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:id="@+id/nav_header"
              android:layout_width="match_parent"
              android:layout_height="160dp"
              android:background="@color/colorAccent"
              android:clickable="true"
              android:focusable="true"
              android:foreground="?attr/selectableItemBackgroundBorderless"
              android:gravity="bottom"
              android:orientation="vertical"
              android:padding="16dp"
              android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <ImageView
            android:id="@+id/nav_header_imageView"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:src="@mipmap/ic_launcher" />

    <TextView
            android:id="@+id/nav_header_textView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingTop="16dp"
            android:text="Chike Mgbemena"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
</LinearLayout>

Le fichier de layout a simplement un LinearLayout, un ImageView et un TextView.

Pour inclure les éléments de menu pour le "navigation drawer", nous pouvons utiliser l'attribut app:menu avec une valeur qui pointe vers un fichier de ressources de menu.

1	<android.support.design.widget.NavigationView
2	app:menu="@menu/activity_main_drawer" />

Voici le fichier de ressource du menu res/menu/activity_main_drawer.xml:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group>
        <item android:id="@+id/nav_item_one"
              android:icon="@drawable/ic_drafts_black_24dp"
              android:title="Item 1" />
        <item android:id="@+id/nav_item_two"
              android:icon="@drawable/ic_drafts_black_24dp"
              android:title="Item 2" />
        <item android:id="@+id/nav_item_three"
              android:icon="@drawable/ic_drafts_black_24dp"
              android:title="Item 3" />
    </group>

    <group android:id="@+id/group_menu">
        <item android:id="@+id/nav_item_four"
              android:title="Item 4" />
        <item android:id="@+id/nav_item_five"
              android:title="Item 5" />
    </group>

    <item android:title="Title 1">
        <menu>
            <item android:id="@+id/nav_item_six"
                  android:icon="@drawable/ic_drafts_black_24dp"
                  android:title="Item 6" />
            <item android:id="@+id/nav_item_seven"
                  android:icon="@drawable/ic_drafts_black_24dp"
                  android:title="Item 7" />
        </menu>
    </item>
</menu>

Ici, nous avons défini un Menu en utilisant le <menu> qui sert de conteneur pour les éléments de menu. Un <item> crée un MenuItem, qui représente un seul élément dans un menu.

Nous avons ensuite défini notre premier groupe de menus en utilisant le <group> qui sert de conteneur invisible pour les éléments d'<item>—menu items dans notre cas. Chacun des éléments <item> a un identifiant, une icône et un titre. Notez qu'une ligne horizontale sera dessinée pour nous à la fin de chaque <group> quand elle est affichée dans le navigation drawer.

Un <item> peut aussi contenir un élément <menu> imbriqué dans le but de créer un sous-menu; nous avons fait ça dans notre dernier <item>. Notez que ce dernier <item> a une propriété "titre".

Notez que lorsque vous affichez les éléments de la liste de navigation à partir d'une ressource de menu, nous pouvons utiliser un ListView à la place. Mais en configurant le "navigation drawer" avec une ressource de menu, nous obtenons le style de conception de matériel sur le "navigation drawer" gratuitement ! Si vous avez utilisé ListView, vous devez gérer la liste et la styliser pour respecter les spécifications de conception recommandées pour le "navigation drawer".

3. Initialisation des composants

Ensuite, nous allons initialiser les instances de nos DrawerLayout et ActionBarDrawerToggle. L'initialisation se fera dans onCreate() dans MainActivity.kt.

import android.content.res.Configuration
import android.os.Bundle
import android.support.v4.widget.DrawerLayout
import android.support.v7.app.ActionBarDrawerToggle
import android.support.v7.app.AppCompatActivity
import android.support.v7.widget.Toolbar
import android.view.MenuItem

class MainActivity : AppCompatActivity() {

    private lateinit var drawer: DrawerLayout
    private lateinit var toggle: ActionBarDrawerToggle

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val toolbar: Toolbar = findViewById(R.id.toolbar_main)
        setSupportActionBar(toolbar)

        drawer = findViewById(R.id.drawer_layout)

        toggle = ActionBarDrawerToggle(this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close)
        drawer.addDrawerListener(toggle)
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
        supportActionBar?.setHomeButtonEnabled(true)
    }

    // ... 
}

ActionBarDrawerToggle configure l'icône de l'application située à gauche de la barre d'actions ou de la barre d'outils pour ouvrir et fermer le "navigation drawer". Pour pouvoir créer une instance d'ActionBarDrawerToggle, nous devons fournir les paramètres suivants :

un contexte parent. Par exemple, dans une Activity vous utilisez this, alors que dans un Fragment vous appelez getActivity()
une instance du widget DrawerLayout à lier à ActionBar de l'activité
l'icône à placer au-dessus de l'icône de l'application pour indiquer qu'il y a une bascule
les ressources de chaîne pour les opérations d'ouverture et de fermeture respectivement (pour l'accessibilité)

Nous avons appelé la méthode addDrawerListener() sur un DrawerLayout afin de connecter un ActionBarDrawerToggle à un DrawerLayout.

Notez que nous activons également l'icône de l'application via setHomeButtonEnabled() et l'activons pour la navigation «up» via setDisplayHomeAsUpEnabled().

Nous transmettons ensuite les méthodes de rappel d'activité onPostCreate(), onConfigurationChanged() et onOptionsItemSelected() au toggle :

class MainActivity : AppCompatActivity() {

    // ... 

    override fun onPostCreate(savedInstanceState: Bundle?) {
        super.onPostCreate(savedInstanceState)
        toggle.syncState()
    }

    override fun onConfigurationChanged(newConfig: Configuration?) {
        super.onConfigurationChanged(newConfig)
        toggle.onConfigurationChanged(newConfig)
    }

    override fun onOptionsItemSelected(item: MenuItem?): Boolean {
        if (toggle.onOptionsItemSelected(item)) {
            return true
        }
        return super.onOptionsItemSelected(item)
    }
}

Voici ce que fait syncState(), selon la documentation officielle:

Synchronise l'état de l'indicateur / affordance du drawer avec le DrawerLayout lié... Il doit être appelé depuis la méthode onPostCreate de votre Activity pour se synchroniser après la restauration de l'état d'instance DrawerLayout et à tout autre moment où l'état peut avoir divergé sans que l'ActionBarDrawerToggle ne soit notifié. (Par exemple, si vous arrêtez de transférer les événements appropriés du drawer pendant un certain temps.)

4. Test de l'application

À ce stade, nous pouvons exécuter l'application !

Comme vous pouvez le voir, le lancement de l'application affichera l'icône du ''navigation drawer'' «hamburger» dans la barre d'action. Essayez d'appuyer sur cette icône de l'application pour ouvrir le drawer. En outre, cliquer sur les éléments du "navigation drawer" ne fera rien; nous allons gérer cette partie dans la section suivante.

5. Gestion des Click Events

Voyons maintenant comment gérer les événements de clic pour chacun des éléments du "navigation drawer". Notez que cliquer sur un élément est censé vous mener à une nouvelle activité ou un nouveau fragment, c'est pourquoi on appelle ça un "navigation drawer" !

Tout d'abord, votre activité doit implémenter NavigationView.OnNavigationItemSelectedListener.

1	class MainActivity : AppCompatActivity(), NavigationView.OnNavigationItemSelectedListener {
2	// ...
3	}

En implémentant cette interface, nous devons maintenant remplacer la seule méthode: onNavigationItemSelected().

class MainActivity : AppCompatActivity(), NavigationView.OnNavigationItemSelectedListener {
    
    // ... 

    override fun onNavigationItemSelected(item: MenuItem): Boolean {

        when (item.itemId) {
            R.id.nav_item_one -> Toast.makeText(this, "Clicked item one", Toast.LENGTH_SHORT).show()
            R.id.nav_item_two -> Toast.makeText(this, "Clicked item two", Toast.LENGTH_SHORT).show()
            R.id.nav_item_three -> Toast.makeText(this, "Clicked item three", Toast.LENGTH_SHORT).show()
            R.id.nav_item_four -> Toast.makeText(this, "Clicked item four", Toast.LENGTH_SHORT).show()
        }
        return true
    }
}

Cette méthode est invoquée lorsqu'un élément du menu de navigation est sélectionné. Nous avons utilisé l'expression when pour effectuer différentes actions en fonction de l'élément de menu sur lequel on a cliqué : les ID de l'élément de menu servent de constantes pour l'expression when.

Après, nous devons initialiser notre NavigationView et mettre ce listener dans onCreate() de notre activité.

class MainActivity : AppCompatActivity(), NavigationView.OnNavigationItemSelectedListener {
    // ...
    override fun onCreate(savedInstanceState: Bundle?) {
        // ... 
        val navigationView: NavigationView = findViewById(R.id.nav_view)
        navigationView.setNavigationItemSelectedListener(this)
        // ... 
    }
// ... 

Exécutez le projet à nouveau !

App demo with navigation item clicks configuration

Lorsque vous cliquez sur certains éléments, un message s'affiche, juste ce que nous attendions. Mais rappelez-vous que cliquer sur un objet devrait amener l'utilisateur à une nouvelle activité ou un fragment (nous l'avons ignoré ici par souci de brièveté).

Vous remarquerez que lorsque vous cliquez sur un élément, le drawer reste toujours. Il serait préférable qu'il se ferme automatiquement à chaque fois qu'un élément a été cliqué. Voyons comment faire ça.

override fun onNavigationItemSelected(item: MenuItem): Boolean {

    when (item.itemId) {
        R.id.nav_item_one -> Toast.makeText(this, "Clicked item one", Toast.LENGTH_SHORT).show()
        R.id.nav_item_two -> Toast.makeText(this, "Clicked item two", Toast.LENGTH_SHORT).show()
        R.id.nav_item_three -> Toast.makeText(this, "Clicked item three", Toast.LENGTH_SHORT).show()
        R.id.nav_item_four -> Toast.makeText(this, "Clicked item four", Toast.LENGTH_SHORT).show()
    }
    drawer.closeDrawer(GravityCompat.START)
    return true
}

Pour fermer le drawer après avoir cliqué sur un lien, appelez simplement closeDrawer() sur une instance de DrawerLayout et transmettez GravityCompat.START à la méthode.

Exécutez le projet une fois de plus et voir le résultat !

6. Manipulation du bouton "arrière" enfoncé

Lorsque le drawer est ouvert, il serait préférable pour une meilleure expérience utilisateur de ne pas fermer l'activité principale si le bouton Back est cliqué. C'est ainsi que fonctionnent les applications populaires comme l'application Inbox de Google.

Ainsi, lorsque le drawer est ouvert et que vous appuyez sur le bouton Back, fermez uniquement le drawer au lieu de l'activité d'origine. Ensuite, si l'utilisateur appuie à nouveau sur le bouton Back, l'activité principale doit être fermée.

Voici comment nous pouvons y parvenir :

override fun onBackPressed() {
    if (drawer.isDrawerOpen(GravityCompat.START)) {
        drawer.closeDrawer(GravityCompat.START)
    } else {
        super.onBackPressed()
    }
}

Exécutez à nouveau le projet et testez-le !

7. Bonus: Utiliser les templates d'Android Studio

Maintenant que vous avez appris les API impliquées pour créer un "navigation drawer", je vais vous montrer un raccourci qui le rendra plus rapide la prochaine fois. Vous pouvez simplement utiliser un template au lieu de coder une activité de "navigation drawer" à partir de zéro.

Android Studio fournit des templates de code conformes aux meilleures pratiques de conception et de développement Android. Ces modèles de code existants (disponibles en Java et Kotlin) peuvent vous aider à démarrer rapidement votre projet. Un tel template peut être utilisé pour créer une activité de "navigation drawer".

Je vais vous montrer comment utiliser cette fonctionnalité dans Android Studio.

Pour un nouveau projet, lancez Android Studio.

Entrez le nom de l'application et cliquez sur le bouton Next.

Vous pouvez laisser les valeurs par défaut telles qu'elles sont dans la boîte de dialogue Target Android Devices. Cliquez à nouveau sur le bouton Next.

Dans la boîte de dialogue Add an Activity to Mobile, faites défiler vers le bas et sélectionnez Navigation Drawer Activity. Cliquez ensuite sur le bouton Next.

Dans la dernière boîte de dialogue, vous pouvez renommer le nom de l'activité, le nom du layout ou le titre si vous le souhaitez. Enfin, cliquez sur le bouton Finish pour accepter toutes les configurations.

Android Studio nous a aidés à créer un projet avec une activité de "navigation drawer". Vraiment cool !

Il vous est fortement conseillé d'explorer le code généré.

Vous pouvez également utiliser des templates pour un projet Android Studio déjà existant. Allez simplement dans File > New > Activity >Navigation Drawer Activity.

Navigation from file menu too Navigation Drawer Activity

Les templates fournis avec Android Studio sont adaptés aux layouts simples et aux applications de base, mais si vous souhaitez lancer votre application encore plus loin, vous pouvez envisager certains des templates d'application disponibles sur Envato Market.

Ils représentent un énorme gain de temps pour les développeurs expérimentés, en les aidant à franchir le pas de la création d'une application à partir de zéro et à concentrer leurs talents sur les parties uniques et personnalisées de la création d'une nouvelle application.

Conclusion

Dans ce tutoriel, vous avez appris comment créer un "navigation drawer" sous Android à l'aide des API DrawerLayout et NavigationView. Nous avons également exploré comment utiliser facilement et rapidement les templates Android Studio pour en créer un.

Je recommande fortement de consulter l' official material design guidelines for navigation drawers pour en savoir plus sur la façon de concevoir et d'utiliser correctement les "navigation drawers" dans Android.

Pour en savoir plus sur le développement Android, consultez nos autres cours et tutoriels ici sur Envato Tuts+ !