Comment coder un tiroir de navigation pour une application Android

Notez que lors de l'affichage des éléments de la liste de navigation à partir d'une ressource de menu, nous pourrions utiliser un ListView au lieu. Mais, en configurant le tiroir de navigation avec une ressource de menu, nous obtenons gratuitement le style de conception des matériaux sur le tiroir de navigation! Si vous avez utilisé un ListView, vous devez tenir à jour la liste et l'assortir aux spécifications de conception recommandées pour le tiroir de navigation. 

3. Initialisation des composants

Ensuite, nous allons initialiser des instances de notre DrawerLayout et ActionBarDrawerToggle. L'initialisation va se passer à l'intérieur 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.App.App.AppCompatActivity import android.support.v7 .widget.Toolbar import android.view.MenuItem classe MainActivity: AppCompatActivity () private tardive var tiroir: DrawerLayout privée lateinit var basculée: ActionBarDrawerToggle remplacer fun onCreate (savedInstanceState: Bundle?) (superInonial). .activity_main) val toolbar: Barre d'outils = findViewById (R.id.toolbar_main) setSupportActionBar (barre d'outils) tiroir = findViewById (R.id.drawer_layout) toggle = ActionBarDrawerToggle (this, tiroir, barre d'outils, R.string.navigation_drawen_open,. navigation_drawer_close) tiroir.addDrawerListener (bascule) supportActionBar? .setDisplayHomeAsUpEnabled (true) supportActionBar? .setHomeButtonEnabled (true) //…

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

• un contexte parent, par exemple, dans un Activité tu utilises ce, alors que dans un Fragment tu appelles getActivity ()
• un exemple de DrawerLayout widget pour lier à l'activité de Barre d'action
• l'icône à placer sur 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 invoqué la méthode addDrawerListener () sur un DrawerLayout afin de connecter un ActionBarDrawerToggle avec un DrawerLayout. 

Notez que nous activons également l'icône de l'application via setHomeButtonEnabled () et l'activer pour une navigation "up" via setDisplayHomeAsUpEnabled (). 

Nous transmettons ensuite le onPostCreate (), onConfigurationChanged (), et onOptionsItemSelected () méthodes de rappel d'activité sur la bascule:

class MainActivity: AppCompatActivity () // ... remplacez fun onPostCreate (savedInstanceState: Bundle?) super.onPostCreate (saveInstanceState) toggle.syncState () onConfigurationChanged (newConfig) redéfinit fun onOptionsItemSelected (item: MenuItem?): Boolean if (toggle.onOptionsItemSelected (item)) return true retour super.onOptionsItemSelected (item)

Voici ce que le syncState () selon la documentation officielle: 

Synchronise l’état de l’indicateur / de l’abondance du tiroir avec l’attribut DrawerLayout lié… Ceci doit être appelé depuis votre Activitéde onPostCreate méthode de synchronisation après la restauration de l'état d'instance de DrawerLayout et à tout autre moment où l'état aurait pu diverger de telle sorte que ActionBarDrawerToggle n'a pas été notifié. (Par exemple, si vous arrêtez de transférer les événements de tiroir appropriés pendant un certain temps.)

4. Test de l'application

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

Comme vous pouvez le constater, le lancement de l'application affiche l'icône du tiroir de navigation «hamburger» dans la barre d'action. Essayez de toucher cette icône d'application pour ouvrir le tiroir. De plus, cliquer sur les éléments du tiroir de navigation ne fera rien. Nous allons traiter cette partie dans la section suivante.. 

5. Gestion des événements liés aux clics

Voyons maintenant comment gérer les événements de clic pour chacun des éléments du tiroir de navigation. Notez que cliquer sur n'importe quel élément est censé vous amener à une nouvelle activité ou fragment, c'est pourquoi cela s'appelle un tiroir de navigation.!

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

Classe MainActivity: AppCompatActivity (), NavigationView.OnNavigationItemSelectedListener //…

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

Classe MainActivity: AppCompatActivity (), NavigationView.OnNavigationItemSelectedListener //… remplace fun surNavigationItemSelected (item: MenuItem): Boolean when (item.itemId) R.id.nav_item_one -> Toast.makeText (this, " , Toast.LENGTH_SHORT) .show () R.id.nav_item_two -> Toast.makeText (this, "Article cliqué deux", Toast.LENGTH_SHORT) .show () R.id.nav_item_three -> Toast.makeText (this, " L'élément cliqué trois ", Toast.LENGTH_SHORT) .show () R.id.nav_item_four -> Toast.makeText (this," L'élément cliqué quatre ", Toast.LENGTH_SHORT) .show () return true

Cette méthode est appelée lorsqu'un élément du menu de navigation est sélectionné. Nous avons utilisé le quand expression pour effectuer différentes actions en fonction de l'élément de menu sur lequel l'utilisateur a cliqué; les identificateurs d'élément de menu servent de constantes pour l'élément quand expression. 

Ensuite, nous devons initialiser notre NavigationView et mettre cet auditeur à l'intérieur onCreate () de notre activité. 

class MainActivity: AppCompatActivity (), NavigationView.OnNavigationItemSelectedListener //… remplace l'amusement onCreate (savedInstanceState: Bundle?) //… val navigationView: NavigationView = findViewById (R.id.nav_view) navigationView.setNavigationItemSel Mentions légales) //… 

Exécutez le projet à nouveau!

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

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

Remplacez l'amusement onNavigationItemSelected (item: MenuItem): Boolean when (item.itemId) R.id.nav_item_one -> Toast.makeText (this, "Le premier élément choisi", Toast.LENGTH_SHORT).> -> Toast.makeText (this, "élément cliqué deux", Toast.LENGTH_SHORT) .show () R.id.nav_item_three -> Toast.makeText (cet élément "Clicked élément trois", Toast.LENGTH_SHORT).. .id.nav_item_four -> Toast.makeText (this, "Le quatrième élément sélectionné", Toast.LENGTH_SHORT) .show () tray.closeDrawer (GravityCompat.START) return true

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

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

6. Manipulation du bouton Retour sur lequel vous appuyez

Lorsque le tiroir est ouvert, il serait plus agréable pour l'utilisateur de ne pas fermer l'activité à domicile si le Retour bouton est enfoncé. C’est ainsi que fonctionnent les applications populaires telles que les applications de la boîte de réception de Google.. 

Ainsi, lorsque le tiroir est ouvert et que le Retour Lorsque vous appuyez sur le bouton, fermez uniquement le tiroir au lieu de l’activité à la maison actuelle. Ensuite, si l'utilisateur appuie sur la touche Retour bouton à nouveau, l'activité à la maison doit être fermée. 

Voici comment nous pouvons y parvenir: 

remplacez fun onBackPressed () if (tiroir.isDrawerOpen (GravityCompat.START)) tiroir.closeDrawer (GravityCompat.START) autre super.onBackPressed ()

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

7. Bonus: utilisation des modèles Android Studio

Maintenant que vous connaissez les API nécessaires à la création d'un tiroir de navigation, je vais vous montrer un raccourci qui accélérera la prochaine fois. Vous pouvez simplement utiliser un modèle au lieu de coder un tiroir de navigation. 

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

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

Pour un nouveau projet, lancez Android Studio. 

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

Vous pouvez laisser les valeurs par défaut telles qu’elles sont dans Périphériques Android cibles dialogue. Clique le Suivant bouton à nouveau. 

dans le Ajouter une activité sur mobile dialogue, faites défiler et sélectionnez Activité du tiroir de navigation. Clique le Suivant bouton après ça. 

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

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

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

Vous pouvez également utiliser des modèles pour un projet Android Studio déjà existant. Il suffit d'aller à Fichier> Nouveau> Activité> Activité du tiroir de navigation.  

Les modèles fournis avec Android Studio conviennent à la mise en page simple et à la création d'applications de base, mais si vous souhaitez donner un coup de pouce supplémentaire à votre application, vous pouvez envisager certains modèles disponibles sur Envato Market.. 

Ils permettent aux développeurs expérimentés de gagner beaucoup de temps en les aidant à réduire le coût de la création d'application à partir de zéro et en concentrant leurs talents sur les éléments uniques et personnalisés de la création d'une nouvelle application..

Conclusion

Dans ce didacticiel, vous avez appris à créer un tiroir de navigation sous Android à l'aide du logiciel DrawerLayout et NavigationView API à partir de zéro. Nous avons également exploré comment utiliser facilement et rapidement les modèles Android Studio pour créer un tiroir de navigation.. 

Je recommande vivement de consulter les directives officielles de conception des supports de navigation pour savoir comment concevoir et utiliser correctement les tiroirs de navigation sous Android..   

Pour en savoir plus sur le codage pour Android, consultez certains de nos autres cours et tutoriels ici sur Envato Tuts.+!