Listviews Android avec Dynamic Data - tutoriel Android - développeur Fusion
Dans beaucoup de cas, listviews doivent afficher des ensembles de données dynamiques qui sont chargés lors de l'exécution. Avoir un penser à quelques-unes des applications que vous pouvez utiliser, nouvelles applications de lecture, les médias sociaux, les guides de télévision, et ainsi de suite. Toutes ces applications charger des données lors de l'exécution d'un serveur. Souvent, les applications afficheront ces données dans une liste. Pour ce faire, ils utilisent généralement un service Web REST, où les demandes sont faites en utilisant des messages HTTP et les réponses sont retournées sous forme d'objets sérialisés, généralement dans un format XML ou JSON. Jetons un coup d'oeil à un exemple afin que nous puissions explorer certains de ces concepts.
Un échantillon ListView dynamique à l'aide Picasa
Dans cet exemple, nous allons construire un ListView qui charge les données de l'API Web Picasa et l'affiche dans la liste. Nous allons faire cela dans un certain nombre d'étapes.
- Tout d'abord, nous allons créer un ListView avec un jeu de données vide.
- D'autre part, les données relatives à l'alimentation seront récupérés.
- Enfin, nous allons paresseusement charger les images pour chaque élément de la liste car ils sont nécessaires
ListView Initialisation
Avant de pouvoir commencer le chargement de données pour le ListView, nous avons d'abord besoin de le mettre dans un état initial vide. Pour ce faire, nous allons utiliser un ListActivity qui charge la mise en page pour la liste. La mise en page contient une vue liste et une vue vide. Le ListActivity crée alors un adaptateur qui est vide et l'affecter à la ListView. Étant donné que l'adaptateur est vide et ne contient pas de données, le ListView affiche la vue vide, dans ce cas, un TextView chargé de la mise en page. La figure 1 décrit le processus d'initialisation.
Figure 1: Initialiser un Listview vide
Charger des données avec une tâche Async
Figure 2 Chargement des données Picasa avec Async Task
Chargement des bitmaps d'image
Les données que nous venons chargé et peuplé dans le Arraylist contient des informations telles que le titre, la description et les chemins d'URL vers des images. Il ne contient pas les données bitmap réelles pour les images elles-mêmes. Par conséquent, la dernière chose qui doit être fait est de charger les données d'image pour les images dans chaque élément de la liste. Comme déjà mentionné, les données d'image est chargé paresseusement, et, jusqu'à ce que l'élément de la liste avec une image est affichée, les données de l'image ne sera pas récupéré. Alors, comment les données sont chargées d'images que lorsque nous en avons besoin?
Chaque adaptateur a une méthode getView qui est appelée lorsqu'une liste a besoin d'afficher un élément de liste. Ainsi, lorsque vous faites défiler une liste, getView sera appelée à chaque fois une nouvelle vue est affichée. Il est ici getView que nous mettons en œuvre le chargement paresseux des données d'image. Rappelez-vous que nous avons déjà rempli une ArrayList des données d'alimentation. Ainsi, chaque getView de temps est appelé, nous attribuons simplement les chaînes de texte pour le titre et la description des vues appropriées dans l'élément de liste.
Pour chaque image, nous devons faire un peu de travail supplémentaire. Les données d'alimentation nous donne seulement une URL de l'image. Nous utilisons cette URL pour faire un autre appel asynchrone au serveur Picasa à partir de la méthode adaptateurs getView. La classe que nous allons utiliser pour faire cet appel asynchrone est ImageDownloader. Une fois que les données sont chargées, nous mettons à jour le ImageView pour l'élément de la liste respective. Pour ajouter un peu de magie de l'interface utilisateur, nous utilisons également un effet de fondu enchaîné entre l'image par défaut et l'image vient d'être chargée.
La figure 3 décrit ce processus.
Figure 3 Chargement de l'image pour chaque élément de la liste des listviews appel à getView
Essentiellement, il y a trois étapes à notre exemple: d'abord, nous initialisons un ListView vide; en second lieu, on charge les données d'alimentation; et, pour finir, nous avons ensuite charger paresseusement les données d'image que chaque élément de la liste est affichée.
La mise en œuvre d'une dynamique ListView
Avec la vue d'ensemble de la façon dont nous allons mettre en œuvre notre ListView frais dans nos esprits, nous allons jeter un regard sur les détails de mise en œuvre de la façon dont nous allons vraiment charger dynamiquement des données dans un ListView. La première chose que nous devrons faire est de créer le XML pour notre mise en page Listview, comme le montre la liste 1.
Listing 1 XML pour la mise en page contenant le Listview
C'est donc la mise en page principale fait, il ne faut pas oublier que nous avons également besoin d'une mise en page pour chaque élément de la liste. Pour cela, nous allons réutiliser la mise en page de l'élément de la liste que nous avons défini dans l'exemple précédent ici, il est à nouveau dans le listing 2.
Listing 2 XML pour la mise en page de chaque élément de la liste
Après avoir défini les mises en page, nous avons maintenant besoin d'un ListActivity. Listing 3 montre notre ListActivity appelé DynamicListviewActivity. Ceci est encore assez simple activité.
Listing 3 ListActivity pour le ListView dynamique
L'adaptateur dans cette activité fait un peu plus que l'adaptateur dans notre exemple précédent, mais, pour l'instant, regardons la classe LoadFeedData que nous instancier et appeler exécuter sur n ° 3 dans la méthode onCreate de notre ListActivity. La classe a LoadFeedData, espérons un nom assez d'explicite. Son travail consiste à charger les données d'alimentation; dans cet exemple, il récupérera que les données de l'API Web Picasa. Jetons un coup d'oeil à cette classe.
Listing 4 classe LoadFeedData utilisé pour le chargement des données de flux
Parcourant le code dans cette classe, nous pouvons voir que la première chose que nous faisons est mis en place une URL (# 2). Cette URL fait une requête à l'API Picasa. Les arguments indiquent que nous voulons récupérer un maximum de 20 images qui sont de la taille des vignettes et se rapportent aux paysages et couchers de soleil. De plus, nous affirmons que nous voulons que les données soient retournés dans un format JSON. Aux fins de simples garder les choses cette URL est codé en dur, mais il est bien sûr possible de construire des URL qui peuvent faire des requêtes de nombreux types différents lors de l'exécution. Le constructeur de la classe LoadFeedData prendre une référence à l'adaptateur pour le ListView (# 3), afin que nous puissions en informer quand nous avons récupéré les données d'alimentation de l'API Picasa.
Tout le travail principal de cette classe se produit dans la méthode doInBackground. Ici, nous utilisons la méthode privée retrieveStream (# 4) pour retourner un InputStream. Le InputStream contient un objet de données sérialisé dans un format JSON. Pour transformer la chaîne JSON en objets que nous pouvons travailler, nous utilisons une classe de la bibliothèque GSON et appelez la méthode fromJson (# 5) en passant InputStream une classe que nous voulons que les données JSON cartographiés dans.
Tout ce que nous devons faire pour obtenir les données de la chaîne JSON est de fournir des classes qui ont des attributs qui correspondent directement aux attributs de la chaîne JSON. La classe GSON prendra soin des détails pour nous.
Une fois que nous avons récupéré les données de l'API Web Picasa, nous passons ensuite ces données comme un tableau d'objets d'entrée à l'adaptateur via la méthode UpdateEntries (# 6). puis l'adaptateur aura un ArrayList peuplé de données d'image et informer également ListView que ce soit le cas afin que le ListView peut afficher ces données. Jetons un coup d'oeil de plus près l'adaptateur que nous utilisons dans cet exemple.
Listing 5 ImageListAdapter utilisée pour alimenter ListView avec des données et des images
Ici, nous pouvons voir que notre adaptateur est appelé ImageListAdapter. Cet adaptateur est un adaptateur assez typique avec toutes les méthodes que nous attendre. Bien sûr, getView (# 5) est l'endroit où la majeure partie du travail est fait.
Quand getView appelé?
Rappelez-vous que la méthode getView d'un adaptateur est appelé à chaque fois une liste doit afficher un élément de liste. Ainsi, lorsqu'un élément de liste est affichée au départ, cette méthode est appelée plusieurs fois afin que chaque élément de la liste affichée peut être remplie avec les données contenues dans l'adaptateur. Comme nous faire défiler la liste et les nouveaux éléments de liste en vue venir, getView sera de nouveau appelé comme chaque élément de la liste est affichée.
Notre méthode de getView est un exemple assez standard. L'objectif global de cette méthode est de remplir chaque élément de la liste avec des données, dans ce cas, le ArrayList des classes d'entrée que nous avons récupéré de l'API Web Picasa.
La seule chose qui se fait différemment est ici que nous remplissons l'image pour l'élément de liste. Ici, nous avons l'URL (# 8) pour l'image de cet élément de liste, et passer à la fois l'URL et une référence à la ImageView pour l'élément de liste à la classe ImageDownloader en appelant sa méthode de téléchargement (# 9). Cette méthode se charge de manière asynchrone les données de l'image et mettre à jour l'image une fois qu'il est fait. Cela se fait de façon paresseuse parce getView ne sera appelée lorsqu'un des éléments de liste doit être affichée, d'où l'image ne sera récupéré que lorsqu'un élément de liste est affichée et l'image est nécessaire.
Le but principal de la ImageDownloader consiste à charger de façon asynchrone des images, mais il met également en cache des images dans la mémoire. Notre classe a ImageDownloader quelques modifications apportées à ce que nous pouvons ajouter la possibilité de mise en cache des images sur le disque et aussi afin que nous puissions ajouter une transition entre l'image Crossfade initiale, nous montrons dans la liste et l'image téléchargée finale.
Pour ajouter la fonctionnalité Crossfade nous utilisons une autre classe appelée CrossFadeDrawable. Cette classe est à nouveau basé sur le code déjà écrit. Romain Guy, un ingénieur de Google, créé à l'origine de cette classe dans un projet open source appelé étagères, qui a quelques techniques de code dans de belles et vaut la peine de prendre le temps de regarder. Nous avons fait un tweak à cette classe il fait exactement ce dont nous avons besoin. Voici notre tweak est d'ajouter une transformation de matrice qui adapte notre image à la taille téléchargée de notre image de départ, puisque la classe d'origine suppose que l'image de démarrage par défaut est la même taille que l'image finale téléchargée.
Grand, voilà! Nous avons couvert toutes les différentes techniques dont nous avons besoin pour charger des données dynamiques et des images et de les afficher dans une liste, et de mettre un peu la cerise sur le gâteau, nous avons également ajouté quelques ajouts agréables comme un écran de chargement vide et un fondu enchaîné de transition entre chaque éléments de la liste d'images par défaut et son image téléchargée finale.