Android ListView Tutorial
Combien de fois avez-vous besoin d'une application pour afficher un groupe d'éléments associés dans une liste? Que diriez-vous tout le temps. ]
Chaque fois que vous avez besoin d'afficher un grand nombre de données et de le rendre facile à naviguer, vous avez obtenu un emploi pour le ListView Android, ce qui crée haut la main une liste déroulante.
En travaillant dans ce tutoriel, vous familiariser avec un ListView, et vous le faites en créant une application de liste de recettes. Plus précisément, vous apprendrez:
- Comment construire et remplir un ListView
- Comment personnaliser la mise en page
- Comment le style et embellir un ListView
- Comment optimiser les performances d'un ListView
Remarque: Si vous êtes nouveau au développement Android, il est fortement recommandé de commencer par le tutoriel Android pour les débutants d'apprendre votre chemin autour des outils et concepts de base.
Commencer
Télécharger le projet de démarrage et ouvert Android Studio.
Dans la boîte de dialogue Bienvenue Android Studio, sélectionnez projet d'importation (Eclipse ADT, Gradle, etc.).
Dans la boîte de dialogue suivante, sélectionnez le répertoire de niveau supérieur du projet de démarrage AllTheRecipes-démarreur, puis cliquez sur OK.
A l'intérieur du projet importé, vous trouverez des actifs et des ressources que vous utiliserez pour créer votre application, telles que les chaînes, les couleurs, les fichiers de mise en page XML, et les polices. De plus, il y a un code de modélisation d'un objet boilerplate de recettes et une classe MainActivity nue os.
Construire et exécuter. Vous devriez voir quelque chose comme ceci:
Êtes-vous prêt à la fissuration sur cette chose liste? Impressionnant!
Ajouter votre premier ListView
Le premier ordre du jour est d'ajouter un ListView à MainActivity.
Ouvrez MainActivity.java et ajoutez une variable d'instance pour votre ListView avec la ligne suivante:
Ajouter l'extrait suivant en dessous du code existant dans la méthode onCreate:
Voici une ventilation de ce qui se passe là-bas:
- Cette charge une liste d'objets de recette d'un actif JSON dans l'application. Notez que le projet de démarrage contient une classe de recettes que les modèles et stocke les informations sur les recettes qui seront affichées.
- Cela crée un tableau de chaînes qui va contiennent le texte à afficher dans la liste Affichage.
- Cette opération remplit la source de données de ListView avec les titres des recettes chargées dans la première section.
- Cela crée et définit un adaptateur simple pour le ListView. Le ArrayAdapter prend dans le contexte actuel, un fichier de configuration spécifiant ce que chaque ligne de la liste devrait ressembler, et les données qui alimenter la liste comme arguments.
Assez parlé! Votre ListView a tout ce qu'il a besoin pour fonctionner. Construire et exécuter le projet. Vous devriez voir quelque chose comme ceci:
Adaptateurs: serviteurs du ListView
Votre application de la recette commence à regarder fonctionnelle, mais pas du tout appétissant. encore.
Pour ces cas, le simple ArrayAdapter vous venez d'utiliser ne sera pas coupé. Vous devrez prendre les choses en main et d'écrire votre propre adaptateur. Eh bien, vous écrirez pas vraiment votre propre adaptateur, en soi; vous prolongez simplement un adaptateur régulier et de faire quelques modifications.
Qu'est-ce qu'un adaptateur exactement?
Un adaptateur charge les informations à afficher à partir d'une source de données, tel qu'une requête de matrice ou base de données et crée une vue pour chaque élément. Ensuite, il insère les vues dans le ListView.
Adaptateurs existent non seulement pour listviews, mais pour d'autres types de vues aussi bien; ListView est une sous-classe de AdapterView, donc vous pouvez le remplir en le liant à un adaptateur.
L'adaptateur agit comme intermédiaire entre la ListView et source de données ou son fournisseur. Il fonctionne un peu comme ceci:
Adaptateurs de construction
Bon, maintenant que vous avez tâté en théorie, vous pouvez obtenir avec la construction de votre propre adaptateur.
Créer une nouvelle classe par un clic droit sur java / com.raywenderlich.alltherecipes et en sélectionnant Nouveau> Java Class. Nommez RecipeAdapter et définir ce qui suit:
Vous avez fait le squelette de l'adaptateur. Il étend la classe BaseAdapter, ce qui nécessite plusieurs méthodes héritées vous implémentez après avoir pris soin d'un détail.
Ajoutez l'extrait suivant dans la classe RecipeAdapter:
Ici, vous avez ajouté les variables d'instance qui seront associés à l'adaptateur et défini un constructeur pour RecipeAdapter.
L'étape suivante consiste à mettre en œuvre les méthodes d'adaptation. Le coup d'envoi en plaçant le code suivant au bas de RecipeAdapter.
Voici une ventilation étape par étape:
- getCount () permet ListView savoir le nombre d'éléments à afficher, ou en d'autres termes, il retourne la taille de la source de données.
- getItem () retourne un objet à placer dans une position donnée de la source de données, en particulier, les objets obtenus à partir de recette mDataSource.
- Ce procédé met en oeuvre le getItemID () qui définit un identifiant unique pour chaque ligne de la liste. Par souci de simplicité, il vous suffit d'utiliser la position de l'élément comme ID.
- Enfin, getView () crée en vue d'être utilisé comme une ligne dans la liste. Ici, vous définissez les informations et montre où il se trouve dans le ListView. Vous gonflez également une vue personnalisée à partir de la mise en page XML défini dans res / layout / list_item_recipe.xml - plus à ce sujet dans la section suivante.
Définition de la mise en page des lignes de la ListView
Vous avez sans doute remarqué que le projet de démarrage est livré avec le fichier res / layout / list_item_recipe.xml qui décrit comment chaque ligne de la ListView doit regarder et être aménagé.
Voici une image qui montre la mise en page de la vue de la ligne et de ses éléments:
Votre tâche est de remplir chaque élément de la vue les données supplémentaires de recettes pertinentes, par conséquent, vous définissez ce texte va dans l'élément « titre », l'élément « sous-titre » et ainsi de suite.
Dans la méthode getView (), ajoutez le code suivant juste avant la déclaration de retour:
On obtient ainsi des références à chacun des éléments (ou) de la subviews vue de la ligne, en particulier le titre, sous-titre, les détails et miniatures.
Maintenant que vous avez les références triées, vous devez remplir chaque élément avec des données pertinentes. Pour ce faire, ajoutez le code suivant sous le précédent mais avant la déclaration de retour:
Voici ce que vous faites dans l'extrait ci-dessus:
- Obtenir la recette correspondante pour la ligne en cours.
- Mise à jour du point de vue de texte de vue de la ligne afin qu'ils affichent la recette.
- Faisant usage de la bibliothèque Picasso open-source pour le chargement d'images asynchrone - il vous aide à télécharger les images miniatures sur un thread séparé au lieu du fil principal. Vous attribuer également un espace réservé temporaire pour la ImageView pour gérer la lenteur de chargement des images.
Maintenant, ouvrez MainActivity.java afin que vous puissiez vous débarrasser de l'ancien adaptateur. En onCreate. remplacer tout ci-dessous (mais non compris) cette ligne:
Vous venez de remplacer la ArrayAdapter assez simple avec votre propre RecipeAdapter pour rendre la liste plus d'information.
Générez et exécutez et vous devriez voir quelque chose comme ceci:
Maintenant, vous cuisinez pour de vrai! Regardez ces recettes - les vignettes et les descriptions assurez-vous une grande différence.
Maintenant que vous avez obtenu la fonction sous enveloppe, il est temps de tourner votre attention sur les choses de la vie. Dans ce cas, vos choses plus fines sont des éléments qui rendent votre application plus tape à l'oeil, telles que les couleurs attrayantes et les polices de fantaisie.
Commencez par les polices. Recherchez des polices personnalisées à l'actif / polices. Vous trouverez trois fichiers de police: JosefinSans-Bold.ttf. JosefinSans-SemiBoldItalic.ttf et Quicksand-Bold.otf.
Ouvrez RecipeAdapter.java et passez à la méthode getView (). Juste avant la déclaration de retour, ajoutez ce qui suit:
Ici, vous assigner une police personnalisée à chacune des vues de texte dans la mise en page de vos lignes. Vous accédez à la police en créant une police. qui spécifie le style intrinsèque et caractères de la police, à l'aide createFromAsset (). Ensuite, vous appelez setTypeface () pour le TextView correspondant pour définir la police personnalisée.
Maintenant, construire et exécuter. Votre résultat devrait ressembler à ceci:
Vous avez créé une carte de hachage qui corresponde à une étiquette de détail de recette avec l'identifiant de ressource d'une couleur définie dans Colors.xml.
Maintenant, passez à la méthode getView () et ajoutez cette ligne juste au-dessus de la déclaration de retour:
Travailler de l'intérieur:
- Ici, vous obtenez l'identifiant de ressource pour la couleur qui correspond à la recipe.label de la carte de hachage LABEL_COLORS.
- getColor () est utilisé à l'intérieur de ContextCompat pour récupérer la couleur hexadécimal associée à cet identifiant de ressource.
- Ensuite, vous définissez la propriété de couleur de la detailTextView à la couleur hexagonale.
Construire et exécuter. Votre application devrait ressembler à ceci:
Interaction de l'utilisateur
Maintenant, votre liste a la fonction et le style. Qu'est-ce qu'il manque maintenant? Essayez de taper ou de longue pressant. Il n'y a pas beaucoup de sensations fortes et plaisir à l'utilisateur.
Que pourriez-vous ajouter ici pour rendre l'expérience utilisateur beaucoup plus satisfaisant. Eh bien, lorsqu'un utilisateur tape sur une ligne, vous ne pensez pas que ce serait bien de montrer la recette complète, avec des instructions?
Vous allez faire usage de AdapterView.onItemClickListener et une marque fessée nouvelle activité à faire avec élégance.
Faire une nouvelle activité
Cette activité affiche lorsque l'utilisateur sélectionne un élément dans la liste.
Faites un clic droit sur java / com.raywenderlich.alltherecipes puis sélectionnez Nouveau> Activité> EmptyActivity pour faire apparaître une boîte de dialogue. Indiquez le nom de l'activité avec RecipeDetailActivity. Laissez les champs renseignés automatiquement en l'état. Vérifiez que vos paramètres correspondent à ceux-ci:
Ouvert res / layout / activity_recipe_detail.xml et ajoutez une WebView en insérant l'extrait suivant dans la balise RelativeLayout:
WebView sera utilisé pour charger et afficher une page Web contenant les instructions de la recette sélectionnée.
Ouvrez RecipeDetailActivity.java. et ajouter une référence WebView comme une variable d'instance en ajoutant la ligne suivante dans la définition de la classe:
Retournez à MainActivity.java et ajouter ce qui suit au fond de la méthode onCreate:
Remarque. Avant de plonger dans l'explication, assurez-vous de comprendre les quatre arguments qui sont fournis par onItemClick; ils fonctionnent comme suit:
- parent: Le point de vue où la sélection se produit - dans votre cas, il est le ListView
- voir: La vue sélectionnée (ligne) dans la ListView
- Position: La position de la ligne dans l'adaptateur
- id: L'identifiant de ligne de l'élément sélectionné
La première chose que vous faites dans le dernier extrait est défini l'objet OnItemClickListener pour le ListView. La classe OnItemClickListener a une méthode appelée onItemClick que vous substituez - plus que dans un moment.
- Obtenez l'objet de la recette de la ligne qui a été cliqué
- Créer une intention de naviguer à votre RecipeDetailActivity pour afficher plus d'informations
- Laissez le RecipeDetailActivity connaître le titre et l'URL de la recette pour afficher en passant que les données via l'intention.
- Lancez le RecipeDetailActivity en passant l'objet que vous venez de l'intention de créer la méthode startActivity ().
Remarque: Pour en savoir plus sur les intentions, consultez l'Androïde: Intentions Tutorial.
Encore une fois, RecipeDetailActivity.java ouvert et ajouter l'extrait suivant au bas de la méthode onCreate:
Vous pouvez voir quelques choses qui se passent ici:
- Vous récupérez les données de recette de l'intention adoptée par MainActivity en utilisant la méthode getExtras ().
- Vous définissez le titre sur la barre d'action de cette activité au titre de la recette.
- Vous initialisez mWebView à la vue Web défini dans la mise en page XML.
- Vous chargez la page Web de la recette en appelant LoadURL () avec l'URL de la recette correspondante sur l'objet d'affichage Web.
Construire et exécuter. Lorsque vous cliquez sur le premier élément dans la liste, vous devriez voir quelque chose comme ceci:
optimisation des performances
Chaque fois que vous faites défiler la méthode ListView, getView () de son adaptateur est appelé afin de créer une ligne et l'afficher à l'écran.
Maintenant, si vous regardez dans votre méthode getView (), vous remarquerez que chaque fois que cette méthode est appelée, il effectue une recherche pour chacun des éléments de la vue de la ligne à l'aide d'un appel à la méthode findViewById ().
Ces appels répétés peuvent sérieusement nuire à la performance du ListView, surtout si votre application est en cours d'exécution sur les ressources limitées et / ou vous avez une très grande liste. Vous pouvez éviter ce problème en utilisant le modèle de support de vue.
Mettre en œuvre un motif ViewHolder
Pour mettre en œuvre le modèle de ViewHolder, RecipeAdapter.java ouvert et ajouter ce qui suit après la définition de la méthode getView ():
Comme vous pouvez le voir, vous créez une classe pour tenir votre ensemble exact de vues composantes pour chaque vue de la ligne. Les magasins d'objets ViewHolder chacun des sous-vues de la ligne, et à son tour est stocké dans le champ de l'étiquette de la mise en page.
Cela signifie que vous pouvez immédiatement accéder sans avoir besoin de les consulter à plusieurs reprises les sous-vues de la ligne.
Maintenant, dans getView (). remplacer tout ce qui précède (mais non compris) cette ligne:
Voici le jeu par le jeu de ce qui se passe au-dessus.
- Vérifiez si la vue existe déjà. Dans le cas contraire, il n'y a pas besoin de gonfler de la mise en page et appelez findViewById () à nouveau.
- Si la vue n'existe pas, vous gonflez la mise en page de ligne personnalisée à partir de votre XML.
- Créer une nouvelle ViewHolder avec subviews initialisé en utilisant findViewById ().
- Accrochez-vous à ce support pour le recyclage futur en utilisant setTag () pour définir la propriété d'étiquette d'avis que le titulaire appartient.
- Passer toutes les étapes coûteuses d'inflation et juste obtenir le support que vous avez déjà fait.
- Obtenez subviews pertinentes de la vue de la ligne.
Enfin, mettez à jour la déclaration de retour de getView () avec la ligne ci-dessous.
Construire et exécuter. Si votre application en cours d'exécution a été un peu lent à la dernière version, vous devriez le voir courir plus lisse maintenant. ]
Où aller en partant d'ici?
Vous pouvez télécharger ici le projet terminé.
Lorsque vous développez pour Android, listviews (ainsi que d'autres AdapterViews) sont un concept commun que vous rencontrerez encore et encore.
Si vous voulez en savoir plus sur le fonctionnement interne des détails ListView et de performance, consultez cet article sur des conseils de performance pour Android listviews.
Ces deux alternatives imposent la restriction que l'activité ou le fragment respectif ne peut contenir un ListView comme son point de vue de l'enfant. Supposons que vous vouliez une activité qui avait un ListView ainsi que d'autres points de vue, il serait impossible avec un ListActivity. La même chose vaut pour le scénario de ListFragment.
Vous voulez apprendre encore plus vite? Gagnez du temps avec nos cours vidéo