NavigationDrawer sous Android : La nouvelle façon de naviguer – Partie 2

Voici la suite du tutoriel sur le NavigationDrawer, vous trouvez la première partie ici : http://www.tutos-android.com/navigationdrawer-android-naviguer-1 (Le projet utilisé sur ce tuto correspond à celui réalisé lors du tuto précédant)

Cette partie abordera :

  • La gestion du clic sur les différents éléments d’un NavigationDrawer
  • La gestion de l’ouverture et la fermeture du NavigationDrawer lors du clic sur l’icône de l’application située sur l’ActionBar

Gestion du clic sur le NavigationDrawer

La première étape consiste à créer une classe qui hérite de la class ListView.OnItemClickListener puis surcharger la méthode onItemClick (fonctionne identique à la gestion du clic sur une liste).

private class MyDrawerItemClickListener implements
			ListView.OnItemClickListener {
		@Override
		public void onItemClick(AdapterView<?> adapter, View v, int pos, long id) {
			String clickedItem = (String) adapter.getAdapter().getItem(pos);
			myTextView.setText(clickedItem);
			drawerLayout.closeDrawer(myDrawer);
		}
	}

Lors du clic sur un élément de la liste, on récupère l’élément cliqué depuis l’adapter. Puis, on affecte cette valeur à la zone de texte située dans notre vue. Pour finir on ferme le drawer à l’aide de la méthode closeDrawer (elle prend en argument le Drawer à fermer).

Puis vous affecter votre classe au Drawer inutilisé précédemment

private String[] drawerItemsList;
	private ListView myDrawer;
	private TextView myTextView;
	private ActionBarDrawerToggle mDrawerToggle;
	private DrawerLayout drawerLayout;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

		myTextView = (TextView) findViewById(R.id.display_drawer_txt);

		drawerItemsList = getResources().getStringArray(R.array.items);
		myDrawer = (ListView) findViewById(R.id.my_drawer);
		myDrawer.setAdapter(new ArrayAdapter<String>(this,
				R.layout.drawer_item, drawerItemsList));

		myDrawer.setOnItemClickListener(new MyDrawerItemClickListener());
}

Ouverture du Drawer lors du clic sur l’icône de l’application

Maintenant on souhaite que le clic sur l’icône de l’application (située sur l’action bar) ouvre automatiquement le Drawer.

La première étape consiste à rendre l’icône de l’application cliquable :

getActionBar().setDisplayHomeAsUpEnabled(true);
getActionBar().setHomeButtonEnabled(true);

Vous devez ensuite créer une variable de type ActionBarDrawerToggle qui vous permettra de gérer le comportement de votre Drawer lors de sa fermeture et de son ouverture.
Le but est de faire en sorte de changer le titre de notre ActionBar lorsque le Drawer s’ouvre et se ferme.

mDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout,
R.drawable.ic_launcher, R.string.ouverture, R.string.fermeture) {
	public void onDrawerClosed(View view) {
		getActionBar().setTitle(R.string.titre);
		invalidateOptionsMenu();
	}

	public void onDrawerOpened(View drawerView) {
		getActionBar().setTitle(R.string.titre_apres_ouverture);
		invalidateOptionsMenu();
	}
};

Le constructeur de la classe ActionBarDrawerToggle possède les paramètres suivant :

  • Le contexte
  • Le layout du drawer initialisé précédemment
  • L’icône utilisant pour l’indicateur du drawer
  • Le texte décrivant l’ouverture de l’action bar
  • Le texte décrivant la fermeture de l’action bar

Les deux méthodes onDrawerClosed et onDrawerOpened sont des callbacks sont utilisées pour indiquer l’ouverture ou la fermeture du Drawer.
Dans ces deux méthodes, on défini le texte utilisé pour l’action bar et indique à l’activité que l’action bar à changée et doit être mise à jour (invalidateOptionsMenu).

Pour finir, on affecte le lister à notre Drawer

drawerLayout.setDrawerListener(mDrawerToggle);

Pour finir, on met à jour la méthode onOptionsItemSelected pour gérer le Drawer, pour cela, il suffit d’appeler la méthode onOptionsItemSelected (disponible dans la classe ActionBarDrawerToggle), si cette dernière renvoie true, il faut quitter la méthode onOptionsItemSelected en renvoyant true.

@Override
public boolean onOptionsItemSelected(MenuItem item) {
	if (mDrawerToggle.onOptionsItemSelected(item)) {
		return true;
	}
	switch (item.getItemId()) {
	  case R.id.action_settings:
		return true;
	  default:
		return super.onOptionsItemSelected(item);
	}
}

Ce qui donnera :

Vous pouvez télécharger le projet ici

2 commentaires


  1. Bonjour,
    je suis entrain de developpé une appli pour un projet d’étude et je n’arrive pas a faire cohabité la navigationdrawer avec une map. quelqu’un pourait m’aider ou m’envoyer un code source pour que je regarde comment faire? merci

    Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *