Les
Slide Menus sont de plus en plus utilisés et on les retrouve notamment au
niveau des applications Facebook, Gmail etc.
Ce menu permet de mieux gérer l'espace puisqu'il apparait et disparait à la demande. Il permet également de disposer de l'ensemble des fonctionnalités de notre application. L'autre spécificité de ce menu est qu'il apparait par un simple mouvement du doigt de gauche vers la droite.
Ce menu permet de mieux gérer l'espace puisqu'il apparait et disparait à la demande. Il permet également de disposer de l'ensemble des fonctionnalités de notre application. L'autre spécificité de ce menu est qu'il apparait par un simple mouvement du doigt de gauche vers la droite.
Dans
le présent article je détaillerai étape par étape la construction d'une
application qui donne l’heure et la date actuelles partout dans le monde. Elle
aura un menu exposant les Time Zones. Le clic sur un élément nous donnera
l'heure actuelle dans ce fuseau horaire.
Le code source est disponible Code Source
Nous
commencerons par exposer la structure du fichier XML de notre activité. Nous
passerons ensuite à la définition des éléments de notre Slide Menu. Enfin, nous
décrirons la création et la manipulation du Slide Menu par l'activité (Java) à
partir des objets : DrawerLayout, ListView et
ActionBarDrawerToggle.
1. Structure du fichier XML de l’activité
Le
fichier XML doit respecter la structure suivante : un DrawerLayout
dans lequel nous mettons un
Layout qui contiendra le
contenu de notre écran et une ListView qui contiendra les éléments de notre menu.
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/menu_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- The LinearLayout consumes the entire space available
using
match_parent in both dimensions. -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/time_zone_current_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<!-- The menu elements ListView. -->
<ListView
android:id="@+id/menu_elements"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#123"
android:choiceMode="singleChoice"
android:divider="@android:color/transparent"
android:dividerHeight="0dp"/>
</android.support.v4.widget.DrawerLayout>
|
2. Définition de la structure des éléments du menu
Il
faut également définir la structure des éléments du SlideMenu dans le fichier element_menu.xml. Pour notre exemple
nous avons un élément qui contient uniquement un TextView. Mais rien n'empêche d'avoir des éléments à
structures complexes ou un menu ayant des éléments de différentes compositions.
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/menu_time_zone_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:text="@string/hello_world"
android:textColor="#fff"/>
|
C'est
déjà fini du côté XML. Passons maintenant du côté de l'activité pour voir
comment interagir avec le menu.
3. Implémentation de l’activité
Au
niveau du code Java nous disposons principalement des trois objets
suivants :
private
DrawerLayout menuLayout; //Layout Principal
private ListView
menuElementsList; //Menu
private
ActionBarDrawerToggle menuToggle;
//Gère l'ouverture et la fermeture du menu
Le
SlideMenu peut être appelé par le bouton home de notre activité, pour ce faire
nous devons activer ce dernier.
getActionBar().setDisplayHomeAsUpEnabled(true);
getActionBar().setHomeButtonEnabled(true);
Nous
commençons par récupérer le layout et la liste.
menuLayout = (DrawerLayout)
findViewById(R.id.menu_layout);
menuElementsList = (ListView) findViewById(R.id.menu_elements);
Nous
ajoutons un effet à appliquer quand le menu est ouvert, et nous spécifions la
direction d'ouverture du SlideMenu (ici GravityCompat.START donc de gauche
à droite).
menuLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
Attention, ceci doit être la même valeur que celle spécifiée en XML
dans la ListView (android:layout_gravity="start")
Nous créons un adapter et ajoutons la liste des éléments du SlideMenu.
Ensuite nous appliquons l’adapter à notre menuElementsList.
menuElementsList.setAdapter(adapter);
Passons maintenant à la
création du menuToggle
qui gérera l’ouverture et la fermeture du menu.
menuToggle = newActionBarDrawerToggle(this,menuLayout, R.drawable.ic_drawer,R.string.drawer_open,R.string.drawer_close)
{
//Exécutée à la fermeture du menu
publicvoidonDrawerClosed(View
view) {
getActionBar().setTitle(activityTitle);
invalidateOptionsMenu();
// calls onPrepareOptionsMenu()
}
//Exécutée à l’ouverture du menu
publicvoidonDrawerOpened(View
drawerView) {
getActionBar().setTitle(menuTitle);
invalidateOptionsMenu(); // calls onPrepareOptionsMenu()
}
};
menuLayout.setDrawerListener(menuToggle);
Afin d’interagir avec
les clics sur les éléments du SlideMenu, nous devons créer un OnItemClickListener.
menuElementsList.setOnItemClickListener(newOnItemClickListener() {
@Override
publicvoidonItemClick(AdapterView<?> arg0, View view, int position,long id) {
... Faites ce
que vous désirez suite au clic sur l’élément ayant comme index
"position"...
}
});
Et pour finir, comment
masquer les éléments du menu optionnel une fois que notre SlideMenu est ouvert
et comment les réafficher à sa fermeture ?
Rappelons que la
méthode onPrepareOptionsMenu() est
appelée à l’ouverture et à la fermeture de notre SlideMenu via invalidateOptionsMenu().
Ceci n'est nullement obligatoire. Vous pouvez garder
les actions de votre menu optionnel affichées. Pour cela ne faites pas appel à
la méthode invalidateOptionsMenu();
@Override
publicbooleanonPrepareOptionsMenu(Menu
menu) {
//
Cache l'élément du menu optionnel à l'ouverture et le fait réapparaitre à la
fermeture
booleandrawerOpen = menuLayout.isDrawerOpen(menuElementsList);
menu.findItem(R.id.action_search).setVisible(!drawerOpen);
returnsuper.onPrepareOptionsMenu(menu);
}
Le code source est disponible Code Source