Chapitre VI : Interfaces graphique avancées

Chapitre VI :

Interfaces graphique avancées

45
Chapitre VI : Interfaces graphique avancées

1 Menu
Un menu est une liste d’éléments (items) qui permet de proposer des fonctionnalités
supplémentaires qui n’apparaissent pas par défaut à l’écran, et de mieux gérer la taille
limitée de l’écran de dispositif mobile. Chaque menu est associé à une seule activité. La
sélection d’un élément (item) dans le menu déclenche une callback15.

Pour réaliser un menu, il faut définir :

• Un fichier de définition d’interface res/menu/nom_du_menu.xml,

• Les méthodes de callbacks pour gérer les menus : création et réaction.

1.1 La description XML de Menu

L'élément <item> prend en charge plusieurs attributs qu’on peut utiliser pour définir
l'apparence et le comportement d'un élément. Les éléments du menu
(res/menu/nom_du_menu.xml) suivant incluent les attributs nécessaires:

<menu xmlns:android="..." >

<item android:id="@+id/monMenu"
android:icon="@drawable/icon_monMenu"
android:showAsAction="ifRoom"
android:title="@string/monMenu"/>
<item android:id="@+id/autre_Menu" ... />
...
</menu>

Il faut définir les attributs ; identifiant (id), l’icône (icon) et le titre de menu (title). L’attribut
showAsAction spécifie quand et comment cet item doit apparaître en tant qu'élément
d'action dans la barre d'application. Il prend les valeurs suivantes :

- ifRoom : Ne placer cet élément dans la barre de l'application que s'il y a de la place.
- always : Placer toujours l’élément dans la barre d'applications (Si l’appariation de
l’élément dans la barre d'actions est indispensable).
- never : Ne maitre jamais cet élément dans la barre d'applications.

1.2 Les méthodes de callback

Deux méthodes sont utilisées. La première pour afficher le menu, la seconde pour réagir
quand l’utilisateur sélectionne un item de menu.

15
Une fonction de rappel (callback en anglais) est une fonction passée dans une autre fonction en tant qu'argument, qui est
ensuite invoquée à l'intérieur de la fonction externe pour accomplir une action.

46
Chapitre VI : Interfaces graphique avancées

Dans l’activité, afin d’utiliser nom_du_menu.xml en tant qu’icones dans ActionBar, il suffit de
l’indiquer à MenuInflater dans la méthode onCreateOptionsMenu afin d'ajouter les items au
menu.

Un MenuInflater est un lecteur/traducteur de fichier de description XML. La méthode inflate

permet de crée les vues.

public boolean onCreateOptionsMenu(Menu menu){

getMenuInflater().inflate(R.menu.nom_du_menu, menu);

return true;

Pour récupérer le click de l’utilisateur sur une action, il suffit de surcharger la méthode
d’activité onOptionsItemSelected(MenuItem item). En effectuant un switch sur l’identifiant
de l’item, on peut savoir lequel a été sélectionné.

public boolean onOptionsItemSelected(MenuItem item) {

switch (item.getItemId()) {
case R.id.monMenu:
// faire quelque chose
return true;
case R.id.auterMenu:
// faire quelque chose
return true;
...
default:
return super.onOptionsItemSelected(item);
}
}

2 Menu contextuel
Un menu contextuel propose des actions qui affectent un élément ou un cadre de contexte
spécifique dans l'interface utilisateur. On peut attribuer un menu contextuel à n'importe
quelle vue, mais il est le plus souvent utilisés pour les éléments d'une ImageView, ListView,
GridView ou d'autres collections de vues ou l'utilisateur peut réaliser des actions directes sur
chaque élément. La méthode registerForContextMenu (View v) permet d’associer un menu
contextuel à un composant graphique (vue). Quand l'utilisateur fait un click long sur cette
vue, ce menu contextuel s'ouvrira.

47
Chapitre VI : Interfaces graphique avancées

protected void onCreate(Bundle savedInstanceState){

super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ImageView img = (ListView)findViewById(R.id.image);
registerForContextMenu(img);
....
}

On peut aussi faire img.setOnCreateContextMenuListener(this) ou lieu de la méthode

registerForContextMenu(img);

La première méthode est utilisée pour l’affichage de menu contextuel, elle permet
d’expanser (inflate) le menu contextuel qui est stocké dans : res/menu/menu_context.

public void onCreateContextMenu(ContextMenu monMenu, View v,

ContextMenuInfo menuInfo){
super.onCreateContextMenu(menu, v, menuInfo);
getMenuInflater().inflate(R.menu.menu_context, monMenu);
}

monMenu : est le menu à construire, v : c’est la vue sur laquelle le menu a été appelé et
menuInfo : indique sur quel élément d'un adaptateur (par exemple liste) a été appelé le
menu.

La deuxième méthode de callback permet de répondre à l’utilisateur quand il choisit un item

du menu.

public boolean onContextItemSelected(MenuItem item) {

AdapterContextMenuInfo info = (AdapterContextMenuInfo)item.getMenuInfo();
switch (item.getItemId()) {
case R.id.ajouter:
. . .
return true;
case R.id.modifier:
. . .
return true;
}
return false;
}

L’objet AdapterContextMenuInfo renvoie l’identifiant de ce qui est sélectionné (c-a-d ce qui

a fait apparaître le menu contextuel).

48
Chapitre VI : Interfaces graphique avancées

3 Annonces
Afin d’annoncer à l’utilisateur des informations sans le déranger alors qu’il utilise une autre
application ou qu’il rédige un SMS par exemple. Android propose le concept de toast, un
message qui s’affiche en quelques secondes.

Toast : permet d’afficher un message de notification pendant quelques secondes de tel sort
que l’utilisateur soit informé de la réalisation d’une action. Il utilise trois paramètres :
Context de l’application, un message textuel (chaine de caractères) et une durée du temps
(courte : 2 seconds et long : 5 seconds).
public static Toast makeText (Context context, CharSequence text, int duree);

Le toast est affiché par la méthode show(), comme dans l'exemple suivant :
Toast.makeText(getApplicationContext(),"Mon message",

Toast.LENGTH_SHORT).show();

La durée d’affichage de message peut être prolongée avec Toast.LENGTH_LONG.

4 Dialogue
Une boîte de dialogue (Dialog) est une petite fenêtre qui ne remplit pas complètement la
taille de l'écran et qui invite l'utilisateur à prendre une décision ou à entrer des informations
supplémentaires avant de pouvoir continuer. Chaque boite de dialogue est composée de 3
parties :

• Titre : permet d’attribuer un titre à l'action de l'utilisateur.

• Contenu : peut inclure un simple texte ou un layout plus complexe comme un
formulaire. Il définit ce que peut faire l’utilisateur.
• Actions : support 3 boutons (positive, négative, neutre) qui permettent soit de valider
la décision de l'utilisateur, soit l’annuler ou de ne rien faire.

Il existe plusieurs types de dialogues, comme les

dialogues d’alerte, et les dialogues généraux.

Un dialogue d’alerte est construit à l’aide de la

classe AlertDialog.Builder. Elle permet de créer un
builder qui à son tour crée la boite de dialogue.

49
Chapitre VI : Interfaces graphique avancées

AlertDialog.Builder dialog = new AlertDialog.Builder(this);

dialog.setTitle("Confirmation");
dialog.setMessage(" Voulez vous acceptez cette invitation?");
dialog.setPositiveButton("Oui", new DialogInterface.OnClickListener(){
public void onClick(DialogInterface dialog, int idBtn) {

// faire quelque chose

}
});
dialog.setNeutralButton("Plus tard", null);
dialog.setNegativeButton("Non", null);
AlertDialog confirm = dialog.create();
confirm.show();

Pour demander des informations à l’utilisateur sans avoir besoin de créer une autre activité,
on peut utiliser un dialogue personnalisé. Pour ce faire, il faut définir un layout du dialogue
contenant tous les textes, à part le titre, et au moins un bouton pour valider, mais on peut
simplement fermer le dialogue avec le bouton back (retour) du smartphone. Ce layout est
ajouté avec la méthode :

dialog.setContentView(R.layout.nom_layout);

5 ListView
Android ListView est une vue qui contient un groupe d'éléments et s'affiche dans une liste
déroulante. ListView est implémenté en important la classe android.widget.ListView.

ListView utilise des classes d'adaptateurs qui ajoutent le contenu d’une source de données
(un tableau de chaînes, un tableau, une base de données, etc.) à ListView. L'adaptateur relie
les données entre un AdapterView et d'autres vues (ListView, ScrollView, etc.).

Données Adapter Adapter View

ArrayList ListView
Cursor GridView
Spinner

La gestion des listes est divisée en deux parties :

• Adapter : c’est un objet qui gère uniquement les données. II joue le rôle
d’intermédiaire entre les données et la vue qui représente ces données. Android
propose trois types d’adaptateurs simples :
1. ArrayAdapter : permet d'afficher les données simples (texte).
50
Chapitre VI : Interfaces graphique avancées

2. SimpleAdapter : affiche plusieurs informations pour chaque élément

(nom et prénom par exemple) de la liste.
3. CursorAdapter : expose le contenu d'une base de données SQLite locale.
• AdapterView : gère l'affichage et l'interaction avec l'utilisateur, mais il ne permet pas
d’effectuer d'opération de modification des données. Android propose trois types
AdapterView :
1. ListView : affiche de manière simple des éléments les uns après les
autres.
2. GridView : permet d'organiser les éléments sous la forme d'une grille.
3. Spinner : affiche les éléments dans une liste défilante.
Pour afficher une liste à partir d’un ensemble de données :
• On attribue à l'adaptateur une liste d'éléments à traiter.
• l'adaptateur crée une vue pour chaque élément en se basant sur les informations
fournies avec le layout.
• Ensuite, les vues sont fournies à un AdapterView pour être affichées dans l'ordre
fourni et avec le layout correspondant. L'AdapterView possède également un layout
pour le personnaliser.
Pour utiliser un ArrayAdapter de base, il suffit
d'initialiser l'adaptateur et de l’attacher à ListView.

ArrayAdapter requiert une déclaration du type de

l'élément à convertir en vue (une chaîne dans ce cas),
puis accepte trois arguments: contexte (instance
d'activité), disposition de l'élément XML et tableau de
données.

La mise en page choisie pour chacun des éléments est

basée sur le layout simple_list_item_1.xml qui est un simple TextView.

Il suffit de connecter cet adaptateur à un ListView à remplir:

ListView listview = (ListView) findViewById(R.id.list);

listview.setAdapter(itemsAdapter);

<LinearLayout xmlns: …
android:orientation="vertical" >

<ListView

android:id="@android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>

51
Chapitre VI : Interfaces graphique avancées

Par défaut, cela convertira désormais chaque élément du tableau de données en une vue en
appelant toString sur l'élément, puis en attribuant le résultat comme valeur d'un TextView
(simple_list_item_1.xml) qui est affiché comme ligne pour cet élément de données.

public class MainActivity extends Activity{

private String[] modules = new String[]{

"Applications Mobiles", "Rédaction Scientifique", "Administration BDD",

"Cryptographie", "Anglais"};

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

ListView mListView = (ListView) findViewById(R.id.list);

final ArrayAdapter<String> adapter = new ArrayAdapter<String>

(MainActivity.this, android.R.layout.simple_list_item_1, modules);
mListView.setAdapter(adapter);
}
}

Si l'application nécessite une traduction plus complexe entre l'élément et View, on peut
utiliser plutôt un ArrayAdapter personnalisé.

5.1 Gestion des événements

Pour ajouter un événement de click par exemple, on utilise la méthode :
void setOnItemClickListener(AdapterView.OnItemClickListener listener)

Pour un click simple sur un élément de la liste. La fonction de callback associée est :
void onItemClick (AdapterView<?> adapter, View v, int pos, long id)

• adapter l'AdapterView qui contient la vue sur laquelle le click a été effectué,
• v c’est la vue en elle-même,
• pos c’est la position de la vue dans la liste
• id représente est l'identifiant de la vue.

52
Chapitre VI : Interfaces graphique avancées

mListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView,View view,
int position, long id) {
// faire quelque chose
}
});

5.2 Sélection des éléments

Dans le cas où l'utilisateur aurait besoin de sélectionner
un ou plusieurs éléments, il suffit de spécifier le mode
de sélection dans la liste. Ce mode est défini en XML
par l’attribut android:choiceMode qui peut avoir les
valeurs suivantes:

• singleChoice (sélectionner un seul élément)

• multipleChoice (sélectionner plusieurs éléments
a la fois)
Dans le cas des sélections multiples, on utilise
android.R.layout.simple_list_item_multiple_choice dans le deuxième paramètre de
ArrayAdapter.

Lorsqu'on veut afficher un ensemble d'éléments dans une liste à l'aide d'une représentation
personnalisée des éléments, on peut utiliser notre propre disposition XML personnalisée
pour chaque élément au lieu de celles proposées par android (par exemple:
android.R.layout.simple_list_item_1). Pour ce faire, on doit créer notre
propre classe ArrayAdapter personnalisé.

6 Conclusion
Ce chapitre prolonge le Chapitre IV sur les interfaces utilisateur, en présentant
comment créer des interfaces beaucoup plus riches (menu, dialogue, annonce, et liste) qui
offrent des possibilités en ergonomie pour capter l’attention des utilisateurs.

Questions
- Quelle est la différence entre un Menu et un Menu Contextuel.
- Comment peut-on personnaliser une List pour pouvoir sélectionner plusieurs
éléments de cette List à la fois.
- Une boite de dialogue peut contenir uniquement du texte -Vrai -Faux

53