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

Le NavigationDrawer est un élément permettant de naviguer dans une application Android. Cet élément a la particularité d’être caché la plupart du temps et d’apparaitre en fonction des besoins de l’utilisateur. Cette fonctionnalité est disponible dans le compatibity package v4 d’Android.

Ce tutoriel se découpera en deux parties, la première partie abordera la création du Drawer et la deuxième partie abordera l’interaction avec le Drawer (clic sur un élément, ouverture / fermeture automatique du drawer …)

Création du Drawer

La création d’un Drawer s’effectue en plusieurs étapes :

Etape 1 : Création du Drawer dans votre vue

Votre vue (interface) qui contiendra un Drawer doit posséder un DrawerLayout comme parent. Ce DrawerLayout se composera de deux parties :

  • Une liste représentant votre Drawer
  • Le contenu de votre activité

Dans l’exemple suivant, notre vue, sera composée d’une liste (drawer) et d’une zone de texte (qui se mettra à jour en fonction du clic sur le Drawer)

<android.support.v4.widget.DrawerLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/display_drawer_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/mon_texte" />

    <ListView
        android:id="@+id/my_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#333"
        android:choiceMode="singleChoice"
        android:divider="#AAA"
        android:dividerHeight="1dp" />

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

Vous devez spécifier:

  • Un identifiant (@+id) à votre DrawerLayout : drawer_layout
  • Un identifiant à votre Drawer : my_drawer
  • La largeur du Drawer qui correspond à la largueur que prendra le Drawer quand il sera déployé : 240dp
  • La position du Drawer (layout_gravity) : start pour dire que le drawer se trouvera à gauche de l’activité et end pour positionner le drawer à droite
  • Le mode de sélection du Drawer (SingleChoice – Un seul élément sélectionnable à la fois)
  • Largueur et couleur du divider (séparateur entre les éléments)

Etape 2 : Création d’une vue représentant chaque ligne de votre Drawer

Chaque ligne du drawer sera représentée par la même vue (modèle pour les différentes lignes de la liste). Votre ligne peut par exemple, contenir une image ainsi qu’un texte représentant l’action qui sera effectuée lors du clic sur le Drawer.

Dans l’exemple notre ligne sera représentée uniquement par une zone de texte

<?xml version="1.0" encoding="utf-8"?>
 
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textColor="#fff"
    android:textSize="20sp"
    android:gravity="center"
    android:minHeight="40sp"
/>

On spécifie la taille du texte, sa position ainsi que la taille minimum de la zone donc la taille minimum d’une ligne (d’un élément) du Drawer.

Etape 3 : Initialisation du Drawer dans l’activité

public class MainActivity extends Activity {

	private String[] drawerItemsList;
	private ListView myDrawer;

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

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

}

On effectue les étapes suivantes :

  • On récupère la liste des données servant à remplir la liste (le drawer). Ici les données sont stockées simplement dans un string-array
     	<string-array name="items">
            <item>Item 1</item>
            <item>Item 2</item>
            <item>Item 3</item>
            <item>Item 4</item>
            <item>Item 5</item>
            <item>Item 6</item>
        </string-array>
    
  • On initialise la liste représentant le drawer à l’aide de son id et de la méthode findViewById
  • On spécifie l’adapter pour remplir notre liste, on utilise un ArrayAdapter prenant les paramètres suivants (context, layout représentant une ligne de la liste, la liste de données).

Résultat

Une fois ce code exécuté, vous obtiendrez le résultat suivant

Vous pouvez télécharger l’exemple ici 🙂

10 commentaires

Laisser un commentaire

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