:: Enseignements :: ESIPE :: E4INFO :: 2014-2015 :: Interface Graphique avec Android ::

GridView et MVC

Le but de ce TD est d'afficher des vignettes d'images et d'implanter un filtre en appliquant le patron MVC.

Exercice 1 - Une grille de vignettes

Télécharger ces images et les placer dans le répertoire res/drawable.
Ecrire une application android qui contient une grille de quatre vignettes, une vignette étant une image avec un titre en dessous. Le fond du titre peut avoir la couleur rouge ou bleue.

Exercice 2 - Une grille de vignettes avec un adapteur

Nous souhaitons maintenant écrire une application qui affiche une grille de vignettes et les filtre suivant la couleur du titre. Pour cela, il est nécessaire de passer par une GridView et un Adapter.

Ecrire une interface graphique avec une GridView vide.
Ecrire une classe ImageItem qui représente une vignette: l'id de l'image, son titre et une valeur booléenne indiquant la couleur (bleu ou rouge).
Ecrire un layout en xml représentant une vignette prototypique (avec une image et un titre juste en dessous avec une couleur de fond par défaut)
Ecrire un adapteur ImageAdapter qui hérite de ArrayAdapter qui représente une liste de vignettes.
Que fait la méthode getView? Pourquoi faut-il la réimplanter? Astuce: pour getView, penser à faire un "inflate" du layout prototypique et à modifier le texte et l'image.
Dans la méthode onCreate, associer l'adapteur à la GridView.
Nous souhaitons maintenant filtrer les vignettes en fonction de leur couleur. Ajouter trois items dans le menu: all, red et blue.
Nous souhaitons écrire ces méthodes de filtrage. Pour cela, nous allons utiliser la méthode filter qui se trouve dans le filtre renvoyé par la méthode getFilter de l'adapteur. Que modifier dans la classe ImageItem pour que filter filtre en fonction de la couleur.
Implanter dans l'adaptateur: (1) une méthode qui permet de n'afficher que les vignettes avec la couleur rouge, (2) une méthode qui permet de n'afficher que les vignettes avec la couleur bleu, (3) une méthode qui permet d'afficher toutes les vignettes.
Associer ces méthodes aux items du menu.