Premiers pas avec RecyclerView et CardView sur Android

Si vous souhaitez créer une application Android utilisant des listes pour afficher des données, Android Lollipop propose deux nouveaux widgets pour vous faciliter la vie, RecyclerView et CardView. À l’aide de ces widgets, il est très facile de donner à votre application une apparence conforme aux directives mentionnées dans les spécifications de conception matérielle de Google.

Un bon point de départ lors de la création d’une application est d’utiliser un Modèle d’application Android. Vous pouvez en trouver des centaines sur Envato Market, pour tout construire à partir d’un application de partage de musique à un amusement jeu d’évitement d’obstacles.

Ou tu peux essayer ça modèle d’application Android universel, ce qui vous donne une base solide pour créer presque tous les types d’applications.

Modèle d'application Android universelle
Modèle d’application Android universelle sur Envato Market

Conditions préalables

Pour suivre, vous devez utiliser la dernière version d’Android Studio. Vous pouvez l’obtenir auprès du Site Web des développeurs Android.

1. Soutenir les anciennes versions

Au moment de la rédaction de cet article, moins de 2% des appareils Android exécutent Android Lollipop. Cependant, grâce à la Bibliothèque de support v7, vous pouvez utiliser le RecyclerView et CardView widgets sur les appareils exécutant des versions plus anciennes d’Android en ajoutant les lignes suivantes à la dépendances section dans votre projet build.grade fichier:

2. Créer un CardView

UNE CardView est un ViewGroup. Comme n’importe quel autre ViewGroup, il peut être ajouté à votre Activity ou Fragment à l’aide d’un fichier XML de mise en page.

Pour créer un vide CardView, vous devrez ajouter le code suivant à votre mise en page XML, comme indiqué dans l’extrait de code suivant:

À titre d’exemple plus réaliste, créons maintenant un LinearLayout et placez un CardView à l’intérieur. le CardView pourrait représenter, par exemple, une personne et contenir les éléments suivants:

  • une TextView pour afficher le nom de la personne
  • une TextView pour afficher l’âge de la personne
  • un ImageView pour afficher la photo de la personne

Voici à quoi ressemblerait le XML:

Si ce XML est utilisé comme mise en page d’un Activity, avec le TextView et ImageView les champs sont définis sur des valeurs significatives, voici comment il s’afficherait sur un appareil Android:

Une carte autonome

3. Création d’un RecyclerView

Étape 1: le définir dans une mise en page

Utilisant un RecyclerView exemple est un peu plus compliqué. Cependant, le définir dans un fichier XML de mise en page est assez simple. Vous pouvez le définir dans une mise en page comme suit:

Pour obtenir une poignée dans votre Activity, utilisez l’extrait de code suivant:

En relation :  Protégez vos comptes Google avec cette extension officielle

Si vous êtes sûr que la taille du RecyclerView ne changera pas, vous pouvez ajouter les éléments suivants pour améliorer les performances:

Étape 2: Utilisation d’un LayoutManager

Contrairement à un ListView, une RecyclerView a besoin d’une LayoutManager pour gérer le positionnement de ses articles. Vous pouvez définir le vôtre LayoutManager en étendant le RecyclerView.LayoutManager classe. Cependant, dans la plupart des cas, vous pouvez simplement utiliser l’un des paramètres prédéfinis LayoutManager sous-classes:

  • LinearLayoutManager
  • GridLayoutManager
  • StaggeredGridLayoutManager

Dans ce tutoriel, je vais utiliser un LinearLayoutManager. Ce LayoutManager sous-classe, par défaut, rendra votre RecyclerView ressemble à un ListView.

Étape 3: Définition des données

Tout comme un ListView, une RecyclerView a besoin d’un adaptateur pour accéder à ses données. Mais avant de créer un adaptateur, créons des données avec lesquelles nous pouvons travailler. Créez une classe simple pour représenter une personne, puis écrivez une méthode pour initialiser un List de Person objets:

Étape 4: création d’un adaptateur

Pour créer un adaptateur qui RecyclerView peut utiliser, vous devez étendre RecyclerView.Adapter. Cet adaptateur suit le vue titulaire modèle de conception, ce qui signifie que vous devez définir une classe personnalisée qui étend RecyclerView.ViewHolder. Ce modèle minimise le nombre d’appels aux coûteux findViewById méthode.

Plus tôt dans ce tutoriel, nous avons déjà défini la mise en page XML pour un CardView qui représente une personne. Nous allons réutiliser cette mise en page maintenant. À l’intérieur du constructeur de notre coutume ViewHolder, initialisez les vues qui appartiennent aux éléments de notre RecyclerView.

Ensuite, ajoutez un constructeur à l’adaptateur personnalisé afin qu’il dispose d’un handle vers les données que le RecyclerView s’affiche. Comme nos données se présentent sous la forme d’un List de Person objets, utilisez le code suivant:

RecyclerView.Adapter a trois méthodes abstraites que nous devons remplacer. Commençons par le getItemCount méthode. Cela devrait renvoyer le nombre d’éléments présents dans les données. Comme nos données se présentent sous la forme d’un List, il suffit d’appeler le size méthode sur le List objet:

Ensuite, remplacez le onCreateViewHolder méthode. Comme son nom l’indique, cette méthode est appelée lorsque la coutume ViewHolder doit être initialisé. Nous spécifions la disposition que chaque élément du RecyclerView devrait utiliser. Cela se fait en gonflant la mise en page en utilisant LayoutInflater, en passant la sortie au constructeur du custom ViewHolder.

En relation :  12 conseils pour vendre avec succès votre collection de bandes dessinées

Remplacer le onBindViewHolder pour spécifier le contenu de chaque élément du RecyclerView. Cette méthode est très similaire à la getView méthode d’un ListViewl’adaptateur de. Dans notre exemple, c’est ici que vous devez définir les valeurs des champs nom, âge et photo du CardView.

Enfin, vous devez remplacer le onAttachedToRecyclerView méthode. Pour l’instant, nous pouvons simplement utiliser l’implémentation de cette méthode par la superclasse comme indiqué ci-dessous.

Étape 5: Utilisation de l’adaptateur

Maintenant que l’adaptateur est prêt, ajoutez le code suivant à votre Activity pour initialiser et utiliser l’adaptateur en appelant le constructeur de l’adaptateur et le RecyclerViewde setAdapter méthode:

Étape 6: Compilez et exécutez

Lorsque vous exécutez le RecyclerView exemple sur un appareil Android, vous devriez voir quelque chose de similaire au résultat suivant.

Conclusion

Dans ce didacticiel, vous avez appris à utiliser le CardView et RecyclerView widgets introduits dans Android Lollipop. Vous avez également vu des exemples d’utilisation de ces widgets dans les applications de conception de matériaux. Notez que même si un RecyclerView peut presque tout faire ListView peut, pour les petits ensembles de données, à l’aide d’un ListView est toujours préférable car il nécessite moins de lignes de code.

Vous pouvez consulter la référence des développeurs Android pour plus d’informations sur le CardView et RecyclerView Des classes.

Et si vous souhaitez accélérer le développement de votre application, n’oubliez pas de les consulter Modèles d’applications Android sur Envato Market.

Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.