29/10/2021

Institut Supérieur des Etudes Technologiques de Béja

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

CHAPITRE 4 : INTERFACE GRAPHIQUE AVANCEE

Niveau : SEM2/DSI3

121 Mme. HAIFA CHORFI

121

Introduction

Listes de vues Fragments

Barre d’action
122 Mme. HAIFA CHORFI

122

Mme Haifa Chorfi 1

 29/10/2021

Listes de Vues
Les listes de vues sont les widgets permettant de présenter les
listes de choix.

ListView GridView RecyclerView

123 Mme. HAIFA CHORFI

123

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.

124 Mme. HAIFA CHORFI

124

Mme Haifa Chorfi 2

 29/10/2021

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.
125 Mme. HAIFA CHORFI

125

Liste de vues

126 Mme. HAIFA CHORFI

126

Mme Haifa Chorfi 3

 29/10/2021

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
127 Mme. HAIFA CHORFI

127

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
l’identifiant de ressource de la vue à utiliser ;
le tableau ou la liste d’éléments à afficher.

128 Mme. HAIFA CHORFI

128

Mme Haifa Chorfi 4

 29/10/2021

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.

129 Mme. HAIFA CHORFI

129

Exercice
On propose de créer une application
affichant une liste de systèmes
d’exploitation mobile.
La description d’un élément de la liste est
représenté par la mise en page

130 Mme. HAIFA CHORFI

130

Mme Haifa Chorfi 5

 29/10/2021

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

131 Mme. HAIFA CHORFI

131

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.

132 Mme. HAIFA CHORFI

132

Mme Haifa Chorfi 6

 29/10/2021

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.

133 Mme. HAIFA CHORFI

133

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.

134 Mme. HAIFA CHORFI

134

Mme Haifa Chorfi 7

 29/10/2021

Exercice
On propose de créer une application
affichant une liste d’émoticônes en utilisant
un gridView

135 Mme. HAIFA CHORFI

135

Recyclerview

RecyclerView est une version modernisée de la ListView et des

GridView fournies par le framework Android.
Il s'agit d'un conteneur utilisé pour afficher une grande quantité
d'ensembles de données qui peuvent défiler très efficacement en
conservant un nombre limité de vues.
RecyclerView a été introduit dans Material Design dans l'API niveau
21 (Android 5.0 ie Lollipop).

136 Mme. HAIFA CHORFI

136

Mme Haifa Chorfi 8

 29/10/2021

Recyclerview
On utilise le RecyclerViewwidget lorsque on dispose de collections
de données dont les éléments changent lors de l'exécution en
fonction de l'action de l'utilisateur ou des événements du réseau.
Il fournit aussi un support d'animation pour
les RecyclerViewéléments chaque fois qu'ils sont ajoutés ou
supprimés, ce qui avait été extrêmement difficile à faire ListView.

137 Mme. HAIFA CHORFI

137

Recyclerview
Pour utiliser un RecyclerView, on doit travailler avec les éléments
suivants:
RecyclerView.Adapter - Pour gérer la collecte de données et la lier à la
vue
LayoutManager - Aide au positionnement des articles
ItemAnimator - Aide à animer les éléments pour les opérations
courantes telles que l'ajout ou la suppression d'éléments

138 Mme. HAIFA CHORFI

138

Mme Haifa Chorfi 9

 29/10/2021

Vues de sélection – Recyclerview

139 Mme. HAIFA CHORFI

139

RecyclerView vs ListView

140 Mme. HAIFA CHORFI

140

Mme Haifa Chorfi 10

 29/10/2021

RecyclerView vs ListView
Modèle ViewHolder
Dans un ListView, il était recommandé
d'utiliser le modèle ViewHolder mais
ce n'était jamais une contrainte. Dans
le cas de RecyclerView, cela est
obligatoire en utilisant
la classe RecyclerView.ViewHolder .
De nombreux problèmes rencontrés
dans ListView sont résolus
efficacement.

141 Mme. HAIFA CHORFI

141

RecyclerView vs ListView
LayoutManager
Il s'agit d'une autre amélioration massive apportée à RecyclerView.
Dans un ListView, le seul type de vue disponible est le ListView vertical. Il
n'y a aucun moyen officiel d'implémenter même un ListView horizontal.
En utilisant un RecyclerView, nous pouvons avoir un
LinearLayoutManager - qui prend en charge les listes verticales et
horizontales,
StaggeredLayoutManager - qui prend en charge Pinterest comme des
listes échelonnées,
GridLayoutManager - qui prend en charge l'affichage des grilles comme
vu dans les applications Galerie.
tout cela dynamiquement comme nous le voulons.
142 Mme. HAIFA CHORFI

142

Mme Haifa Chorfi 11

 29/10/2021

RecyclerView vs ListView
Animateur d'objets
ListViews ne prend pas en charge de bonnes animations, mais le
RecyclerView lui apporte une toute nouvelle dimension. En utilisant
la classe RecyclerView.ItemAnimator , l'animation des vues
devient tellement facile et intuitive.
Décoration d'article
Dans ListView, la décoration dynamique d'éléments comme l'ajout de
bordures ou de séparateurs n'a jamais été facile. Mais dans le cas de
RecyclerView, la classe RecyclerView.ItemDecorator donne un
énorme contrôle aux développeurs mais rend les choses un peu plus
longues et complexes.

143 Mme. HAIFA CHORFI

143

RecyclerView vs ListView
OnItemTouchListener
L'interception des clics sur un élément sur un ListView était simple,
grâce à son interface AdapterView.OnItemClickListener .
Le RecyclerView donne beaucoup plus de puissance et de contrôle à
ses développeurs par le RecyclerView.OnItemTouchListener

Le RecyclerView est beaucoup plus personnalisable que

le ListView et donne beaucoup de contrôle et de
puissance à ses développeurs.

144 Mme. HAIFA CHORFI

144

Mme Haifa Chorfi 12

 29/10/2021

ActionBar

L’ActionBar (la barre d'action) est introduite à partir d’Android

3.0 (API niveau 11)
Elle est placée en haut de l’écran.
Elle contient principalement quatre zones fonctionnelles : l'icône
de l'application, le contrôle de la vue, des boutons d'action et du
débordement d'action

Mme. HAIFA
145 CHORFI

145

ToolBar

La barre d'outils peut contenir une

combinaison d'éléments.
App icon (Icône de l'application) :
Le logo ou l'icône de l'application
View Control (Contrôle de la vue) :
Un espace dédié pour afficher le titre de
l'application. Fournit également une
option pour basculer entre les vues en
ajoutant une navigation à double flèche ou
à onglets.
Actions Buttons (Boutons
d'action):Certaines actions importantes
de l'application peuvent être y ajoutées.
Overflow icon (Débordement
d'action) : Toutes les actions moins
importante seront affichées sous forme de
menu.
146 Mme. HAIFA CHORFI

146

Mme Haifa Chorfi 13

 29/10/2021

Configuration ActionBar
Pour intégrer une ActionBar à Android, on peut utiliser un thème
d’activité qui propose un ActionBar.

Mme. HAIFA
147 CHORFI

147

Menu ActionBar

Pour obtenir des boutons d’action et

des éléments de débordement
d'action dans la barre d'action, on
peut créer un fichier de ressources
XML de menu trouvé dans
le dossier res/menu .

148 Mme. HAIFA CHORFI

148

Mme Haifa Chorfi 14

 29/10/2021

Menu ActionBar
Quatre éléments doivent être configurés pour chaque élément de menu.
android: id : spécifie l'ID de l'élément de menu.
android: title : contient le titre de l'élément de menu
android: icon : fait référence à une icône dans drawable
android: showAsAction : indique comment l'élément donné doit
être représenté dans la barre d'action.
Always: garder dans l'ActionBar à tout moment
ifRoom: pour le conserver uniquement si l'espace est disponible
Never :l'élément de menu ne sera pas placé dans l'ActionBar sous forme d'icône. Il ne sera
visible que lorsque le bouton de menu est cliqué, dans le menu qui apparaît
withText : peut être ajouter à always ou ifRoom, pour indiquer que le bouton de la barre
d'outils doit être à la fois l'icône et le titre, pas seulement l'icône

Mme. HAIFA
149 CHORFI

149

Affichage du menu dans l’Actionbar

Pour déclarer le menu dans l’activité, on doit le spécifier dans la

méthode onCreateOptionsMenu() de l'activité.

Mme. HAIFA
150 CHORFI

150

Mme Haifa Chorfi 15

 29/10/2021

Ajout des actions au bar items

• Pour ajouter à l’application

comment elle doit réagir
lorsqu’un utilisateur clique sur
une action de l’ActionBar, on
doit attribuer leurs fonctions
respectives dans la méthode
onOptionsItemSelected(M
enuItem item)

151 Mme. HAIFA CHORFI

151

Fragments
Nouveauté depuis Android 3.0 (pour gérer les écrans les plus
larges)
Un Fragment représente une partie comportementale et/ou
d’interface utilisateur dans une Activity.
Il peut inclure des listes, des écrans de préférences et toutes les
vues du framework Android pour constituer des portions
d’interfaces.

152 Mme. HAIFA CHORFI

152

Mme Haifa Chorfi 16

 29/10/2021

Fragments
•Les Fragments donnent la possibilité d’être séparés en plusieurs
écrans sur mobile et d’être combinés sur un seul écran sur tablette

153 Mme. HAIFA CHORFI

153

154 Mme. HAIFA CHORFI

154

Mme Haifa Chorfi 17

 29/10/2021

Création d’un fragment

Pour créer un fragment, il faut créer une classe qui hérite de
android.app.Fragment (ou une de ses sous-classes :
DialogFragment, ListFragment, PreferenceFragment).
Définir une interface pour le fragment dans un fichier Layout
séparé (fragment_container)
Implémenter la méthode de transition onCreateView pour
construire l’interface du fragment
java/ExempleFragment.java
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {

View view= inflater.inflate(R.layout.fragment_container, container,

false);
return view;

155 Mme. HAIFA CHORFI

155

Ajout d’un Fragment à une Activité

Créer une transaction de fragment (ajout, suppression…) grâce
au FragmentManager
java/MainActivity.java

ExempleFragment exempleFragment=new ExempleFragment();

FragmentManager fm=getSupportFragmentManager();
FragmentTransaction transaction=fm.beginTransaction();
transaction.replace(R.id.fragment_container,exempleFragment).commit();

156 Mme. HAIFA CHORFI

156

Mme Haifa Chorfi 18