Institut Supérieur des Etudes Technologiques de Béja

DÉVELOPPEMENT MOBILE
Enseignante: Mme. Haïfa Chorfi

CHAPITRE 4 : INTERFACE GRAPHIQUE AVANCEE

Niveau : 2ème ANNÉE LICENCE APPLIQUÉE SEM2

Mme. Haifa CHORFI 143

Introduction

Listes de vues Fragments

Barre d’action
144 Mme. Haifa CHORFI
 Listes de Vues
Les listes de vues sont les widgets permettant de présenter les
listes de choix.

ListView GridView RecyclerView

145 Mme. Haifa CHORFI

Liste de vues
Elles sont transmises à un adaptateur pour fournir les choix
possibles.
Les adaptateurs d’Android se chargent de fournir la liste des
données d’un widget de sélection et de convertir les différents
éléments en vues spécifiques pour qu’elles s’affichent dans ce
widget de sélection.
Ils réalisent la liaison entre les sources de données (un simple
tableau de chaînes de caractères, une base de données, un
fournisseur de contenu, etc.) et les contrôles de votre interface
utilisateur.

146 Mme. Haifa CHORFI

 Liste de vues

Donner à l'adaptateur une liste d'éléments à traiter et la manière dont

ils doivent l'être
Passer cet adaptateur à un AdapterView.
Dans l’adaptaerView, l'adaptateur va créer un widget pour chaque
élément en fonction des informations fournies en amont.
147 Mme. Haifa CHORFI

Liste de vues

148 Mme. Haifa CHORFI

 Liste de vues
Pour afficher une liste d’éléments cliquables, on a besoin de trois éléments :
des données : Array, ArrayList, Cursor... ;
un Adapter qui fera l’interface entre données et les vues ;
Widget de sélection qui fera l’interface entre l’adaptateur et l’utilisateur.

La plate-forme Android contient plusieurs types d’adaptateurs permettant de

traiter les types les plus courants :
ArrayAdapter<T> : pour tous les types de tableaux
BaseAdapter : pour créer des adaptateurs personnalisés
CursorAdapter : pour traiter les données de type Cursor
HeaderViewListAdapter : pour ajouter des entêtes et pieds de page aux ListView
ResourceCursorAdapter : pour la création de vues à partir d’une disposition XML
SimpleAdapter : pour les données complexes Il est utile pour afficher plusieurs
informations par élément.
SimpleCursorAdapter : sur-couche du CursorAdapter permettant de lier un modèle XML
aux données
149 Mme. Haifa CHORFI

Liste de vues
L’adaptateur le plus simple est ArrayAdapter puisqu’il suffit
d’envelopper un tableau ou une instance de java.util.List pour disposer
d’un adaptateur prêt à fonctionner.

Exemple:
String[] T = {"UN","DEUX","TROIS","QUATRE","CINQ","SIX","SEPT"};
new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,T);

Le constructeur d’ArrayAdapter attend trois paramètres :

le contexte d’utilisation (généralement, il s’agit de l’instance de l’activité) ;
l’identifiant de ressource de la vue à utiliser ;
le tableau ou la liste d’éléments à afficher.
150 Mme. Haifa CHORFI
 ListView
Le widget classique d’Android pour les listes
s’appelle ListView.
Pour disposer d’une liste complètement
fonctionnelle, il suffit
d’inclure un objet ListView dans votre
présentation,
d’appeler setAdapter() pour fournir les
données et les vues filles,
puis d’attacher un écouteur via
setOnItemSelectedListener() pour être
prévenu de toute modification de la sélection.

151 Mme. Haifa CHORFI

ListView
Exemple : Code XML :
<?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/selection"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<ListView
android:id="@android:id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:drawSelectorOnTop="false"/>
</LinearLayout>
Mme. Haifa CHORFI 152
 ListView
On peut configurer l’adaptateur d’une ListActivity par un appel à
setAdapter()
Pour être prévenu des changements dans la liste de sélection, on
redéfinit onListItemClick() pour qu’elle agisse de façon
appropriée en tenant compte de la vue fille et de la position qui lui
sont passées en paramètre
Le second paramètre de notre ArrayAdapter
(android.R.layout.simple_list_item_1) contrôle l’aspect des lignes.
La valeur utilisée dans l’exemple précédent fournit une ligne
Android standard : grande police, remplissage important et texte
en blanc.

Mme. Haifa CHORFI 153

Listview
Code Java :
public class ListeExemple extends Activity {
TextView s;
String[] T={"UN","DEUX","TROIS","QUATRE","CINQ","SIX","SEPT"};

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
s=(TextView)findViewById(R.id.selection);
l=(ListView)findViewById(R.id.list);
ArrayAdapter<String> adapter=new ArrayAdapter<String>
(this,android.R.layout.simple_list_item_1,T));
l.setAdapter(adapter) ; }

public void onListItemClick (ListView parent, View v, int

position,long id) { s.setText(T[position]); }

Mme. Haifa CHORFI 154

 GridView
GridView affiche les éléments dans une grille de défilement
bidimensionnelle (lignes et colonnes) et les éléments de la grille ne
sont pas nécessairement prédéterminés mais ils sont
automatiquement insérés dans la mise en page à l'aide
d'un ListAdapter

155 Mme. HAIFA CHORFI

GridView
Le ListView et GridView sont sous classes de AdapterView
Ils peuvent être placés en les liant à un adaptateur ,
L’adaptateur récupère les données à partir d' une source externe
Il crée une vue qui représente chaque entrée de données.

156 Mme. HAIFA CHORFI

 GridView
Quelques attributs spécifiques à GridView:
android: columnWidth : spécifie la largeur fixe pour chaque colonne.
android: gravité: Spécifie la gravité dans chaque cellule.
android: horizontalSpacing: Définit l'espacement horizontal par défaut
entre les colonnes.
android: numColumns: Définit le nombre de colonnes à afficher. Peut
être une valeur entière, comme "100" ou auto_fit qui signifie afficher
autant de colonnes que possible pour remplir l'espace disponible.

157 Mme. HAIFA CHORFI

GridView
Quelques attributs spécifiques à GridView:
android: stretchMode: Définit comment les colonnes doivent s'étirer
pour remplir l'espace vide disponible, le cas échéant.
aucun - L'étirement est désactivé.
spacingWidth - L'espacement entre chaque colonne est étiré.
columnWidth - Chaque colonne est étirée de manière égale.
spacingWidthUniform - L'espacement entre chaque colonne est uniformément
étiré.
android: verticalSpacing: Définit l'espacement vertical par défaut
entre les lignes.

158 Mme. HAIFA CHORFI