[Tutoriel Android] Partie 4 – Au menu de ce soir

Qu’avons-nous au menu de ce soir ?

Bonjour et bienvenue dans la 4ème partie du tutoriel Android, nous allons aborder aujourd’hui le sujet sulfureux des menus !

Une bonne application mérite son menu de toute évidence et il est fort à parier qu’un jour vous ayez besoin d’en rajouter un dans votre application.

Commençons tout d’abord par lister les types de menus existants au sein de notre plateforme :

Les menus d’options : Nous les retrouvons quand nous cliquons sur le bouton “Menu” de notre téléphone, ils s’affichent en bas de l’écran.

Les menus d’options à préférences étendues : Ils permettent d’afficher un menu en bas de l’écran lors de l’appui sur une touche d’option d’un menu.

Les menus contextuels : On les retrouve généralement en cliquant sur un objet avec un appui long ou court, une fenêtre de choix s’affiche alors.

Voilà nous avons fait le tour des menus disponibles, on a largement de quoi faire n’est-ce pas ?

Création de notre premier menu d’options

Nous allons créer notre premier menu d’options, pour cela créez un tout nouveau projet.

Ouvrez le fichier contenant l’activité principale du projet “MonActitive.java”

Nous allons ajouter un Override à la méthode onCreateOptionsMenu(Menu menu)

Puis nous allons ajouter le code suivant :

@Override

public boolean onCreateOptionsMenu(Menu menu) {

menu.add("Options");

menu.add("Quitter");

return true;

}

Lancez l’application et cliquez sur le bouton “Menu”, tadam !

Le menu s’ouvre et nos deux options sont à l’intérieur. Je ne vais pas expliquer plus loin comment faire un menu manuellement, car ce n’est pas facile à maintenir au niveau code.

Nous allons utiliser une autre méthode de type XML, qui sera plus facile à gérer durant les phases de développement d’une application mobile.

Créez un nouveau fichier XML à l’aide de l’outils ADT comme suit :

Nous allons rajouter dans le fichier XML les différents menus, ce qui nous donnera quelque chose de similaire à ceci :

<?xml version="1.0" encoding="utf-8"?>

<menu

xmlns:android="http://schemas.android.com/apk/res/android">

<item android:title="Options" android:id="@+id/itemOptions"></item>

<item android:title="Quitter" android:id="@+id/itemQuitter"></item>

</menu>

Puis dans le code de la méthode onCreateOptionsMenu, nous allons récupérer notre menu sous forme XML et l’afficher.

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Création du menu inflater

MenuInflater inflater = getMenuInflater();

// On envoi a la variable menu le fichier xml parsé par l'inflater

inflater.inflate(R.menu.monmenu, menu);

return true;

}

Voilà, relançons l’application et nous nous retrouvons avec exactement le même menu que tout à l’heure à l’exception que celui-ci est en format XML, donc plus facilement éditable lors du développement.

Nous allons rajouter des événements lorsque l’on clique sur un des items du menu, grâce à la méthode onMenuItemSelected(int featureId, MenuItem item) que nous allons Override.

Les paramètres sont :

featureId : L’id du panel contenant le menu

Item : L’item qui est cliqué

L’objet item contient une méthode getItemId qui nous renvoie un entier que l’on compara au Id des items du fichier XML.

Le code :

@Override

public boolean onMenuItemSelected(int featureId, MenuItem item) {

// On récupère l'id de l'item et on le compare

switch (item.getItemId()) {

// S'il est égal à itemOptions

case R.id.itemOptions:

// On affiche un message

Toast.makeText(this, "Ouverture des options", Toast.LENGTH_SHORT).show();

return true;

// S'il est égal à itemQuitter

case R.id.itemQuitter:

// On ferme l'activité

finish();

return true;

}

return super.onMenuItemSelected(featureId, item);

}

Lancez à nouveau notre exemple et regardez le résultat ;)

Nous pouvons également créer des groupes de menus avec des items à l’intérieur pour plus de lisibilité : ajouter une icône à chaque menu etc…

La documentation android est disponible ici pour pour d’explication http://developer.android.com/guide/topics/ui/menus.html

Création d’un menu contextuel

Nous allons rajouter à notre application le pouvoir (de la force jeune jedi) d’ouvrir un menu contextuel.

Tout cela grâce à onCreateContextMenu(ContextMenu menu, View v,  ContextMenuInfo menuInfo) que nous allons également Override dans notre activité.

Créons une fois de plus un menu au format XML comme à l’étape précédente, je l’ai nommé “monmenucontextuel.xml” avec pour code :

<?xml version="1.0" encoding="utf-8"?>

<menu

xmlns:android="http://schemas.android.com/apk/res/android">

<item android:id="@+id/itemCoucou" android:title="Coucou"></item>

<item android:id="@+id/itemHello" android:title="Hello"></item>

</menu>

Puis dans le layout nommé main.xml je rajoute un identifiant au textview déjà existant.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

<TextView

android:id="@+id/monTextView"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/hello"

/>

</LinearLayout>

Et dans notre action onCreateOptionsMenu de notre activité, nous enregistrons le fait que lorsque l’on clique sur ce textview nous ouvrirons un menu contextuel.

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

registerForContextMenu((TextView)findViewById(R.id.monTextView));

}

Dans la méthode onCreateContextMenu, nous allons faire un inflate sur le menu contenu sous forme XML.

@Override

public void onCreateContextMenu(ContextMenu menu, View v,

ContextMenuInfo menuInfo) {

super.onCreateContextMenu(menu, v, menuInfo);

MenuInflater inflater = getMenuInflater();

inflater.inflate(R.menu.monmenucontextuel, menu);

}

Lancez l’application et voyez par vous-même que le menu s’ouvre lorsque l’on maintient le clique sur le textview. Maintenant, il ne reste plus qu’à vérifier les items cliqués du menu.

De même que pour le menu des options, une méthode existe pour vérifier cela, elle se nomme onContextItemSelected avec en paramètre l’item sélectionné.

Vérifions comme précédemment l’item qui est sélectionné à l’aide d’un switch et affichons quelque chose :

@Override

public boolean onContextItemSelected(MenuItem item) {

// On récupère l'id de l'item et on le compare

switch (item.getItemId()) {

// S'il est égal à itemCoucou

case R.id.itemCoucou:

// On affiche un message

Toast.makeText(this, "Coucou tout le monde !", Toast.LENGTH_SHORT).show();

return true;

// S'il est égal à itemHello

case R.id.itemHello:

// On affiche un message

Toast.makeText(this, "Hello World !", Toast.LENGTH_SHORT).show();

return true;

}

return super.onContextItemSelected(item);

}

A l’affichage cela nous donne :

Et si l’on choisit l’item “Coucou” :

Et voilà, vous savez désormais faire des menus d’options et des menus contextuels.

A la prochaine ;)