Android RecyclerView : Qu'est-ce que c'est, apprenez avec des exemples simples

Qu'est-ce que RecyclerView dans Android?

Le RecycleurVoir RecyclerView est une version plus flexible et avancée de GridView et ListView. Il s'agit d'un conteneur permettant d'afficher de grands ensembles de données et de les parcourir efficacement grâce à un nombre limité de vues. Vous pouvez utiliser le widget RecyclerView lorsque vos collections de données sont modifiées en temps réel en fonction d'un événement réseau ou d'une action de l'utilisateur.

Vues

Le Android La plateforme utilise les classes View et ViewGroup pour dessiner des éléments à l'écran. Ces classes sont absolumenttracLes classes TextView et EditText sont étendues à différentes implémentations pour s'adapter à un cas d'utilisation. TextView, par exemple, a pour simple fonction d'afficher du texte à l'écran. EditText hérite de la même classe View et ajoute des fonctionnalités permettant à l'utilisateur de saisir des données.

Il est possible de créer nos propres vues personnalisées pour obtenir plus de flexibilité lors du développement.ping Interfaces utilisateur. La classe View fournit des méthodes que nous pouvons redéfinir pour dessiner à l'écran et un moyen de transmettre des paramètres tels que la largeur, la hauteur et nos propres attributs personnalisés que nous souhaitons ajouter à notre vue pour qu'elle se comporte comme nous le souhaitons.

Afficher les groupes

La classe ViewGroup est un type de vue, mais contrairement à la classe View simple dont le rôle se limite à l'affichage, ViewGroup permet d'intégrer plusieurs vues dans une seule vue, que l'on peut référencer comme un tout. Dans ce cas, la vue créée au niveau supérieur, à laquelle on ajoute d'autres vues simples, est appelée « parent », et les vues ajoutées à l'intérieur sont appelées « enfants ».

On peut se représenter une vue comme un tableau et un ViewGroup comme un tableau de tableaux. Puisqu'un tableau de tableaux est lui-même un tableau, on comprend qu'un ViewGroup peut être traité comme une vue.

var arr1 = [1,2,3] //imagine a simple View as an Array
//we can imagine this as a NumberTextView which doesn't really exist
//but we could imagine there's one that makes it easy to use numbers
var arr2 = ["a","b","c"] // We can imagine this as another simple view

var nestedArr = [arr1,arr2] //in our analogy, we can now group views
//together and the structure that would hold that would be what we call the ViewGroup

Le ViewGroup nous permet également de définir l'organisation des éléments enfants au sein de la vue, par exemple leur disposition verticale ou horizontale. Nous pouvons définir différentes règles d'interaction au sein de la vue. Par exemple, deux TextView consécutifs doivent être espacés de 12 dp, tandis qu'une ImageView suivie d'un TextView doit être espacée de 5 dp.

Ce serait le cas si nous étions développésping Nous avons créé notre propre ViewGroup à partir de zéro. Pour simplifier ces configurations, Android fournit une classe appelée LayoutParams, que nous pouvons utiliser pour saisir ces configurations.

Le Android Documentation Cette classe fournit des paramètres par défaut que nous utiliserons lors de la configuration de notre propre ViewGroup. Parmi les paramètres courants, on trouve la largeur, la hauteur et les marges. Par défaut, ces configurations utilisent la structure `android:layout_height` pour la hauteur et `android:layout_width` pour la largeur. Ainsi, lors de la création de votre ViewGroup, vous pouvez définir des LayoutParams spécifiques pour personnaliser son comportement.

Android Il est fourni avec des vues et des groupes de vues par défaut permettant d'effectuer la plupart des tâches courantes. Par exemple, nous avons mentionné la TextView. Il s'agit d'une vue simple dont les paramètres sont configurables, tels que la hauteur, la largeur et la taille du texte. Nous proposons également une ImageView pour afficher des images et un EditText, comme indiqué précédemment, parmi bien d'autres. Android dispose également de ViewGroups personnalisés auxquels nous pouvons ajouter nos vues et obtenir le comportement attendu.

Disposition linéaire

LinearLayout permet d'y ajouter des éléments View. Il possède un attribut d'orientation qui détermine sa disposition à l'écran. Il possède également LinearLayout.LayoutParams qui définit les règles d'affichage des vues. Par exemple, l'attribut android:center_horizontal centre les vues horizontalement, tandis que android:center_vertical centre le contenu de la vue verticalement.

Voici quelques images pour mieux comprendre le centrage. Prenons l'exemple d'un simple TextView dans un espace de 200 px par 200 px ; les attributs de centrage lui permettraient de se comporter comme suit.

Android : centre_horizontal

Contenu centré horizontalement

Android : centre_vertical

Contenu centré verticalement

Android:centre

Contenu centré

Composants principaux de RecyclerView

Composants principaux de RecyclerView

Voici les composants importants de RecyclerView :

RecyclerView.AdapterRecyclerView.Adapter

Base n°1 – Modèle d’adaptateur

Un adaptateur est un dispositif qui transforme les attributs d'un système ou d'un appareil pour les rendre compatibles avec un autre système ou appareil incompatible. Certains adaptateurs modifient les attributs du signal ou de l'alimentation, tandis que d'autres se contentent d'adapter la forme physique d'un connecteur à un autre.

Un exemple concret et simple illustrant l'utilité d'un adaptateur est celui où l'on souhaite connecter des appareils dont les ports de connexion ne sont pas compatibles. Cela peut arriver lors d'un voyage dans un pays utilisant des prises électriques différentes. Si vous emportez votre chargeur de téléphone ou d'ordinateur portable, il vous sera impossible de le brancher directement sur les prises de courant. Heureusement, il existe une solution : un adaptateur qui se place entre la prise de courant et votre chargeur, permettant ainsi la recharge.

C’est le cas en programmation lorsque l’on souhaite connecter deux structures de données pour accomplir une tâche, mais que leurs ports par défaut ne permettent pas de communiquer entre eux.

Nous utiliserons l'exemple simple d'un appareil et d'un chargeur. Nous aurons deux chargeurs : un américain et un britannique.

class AmericanCharger() {
    var chargingPower = 10
}
class BritishCharger(){
    var chargingPower = 5
}

Nous allons ensuite créer deux appareils.

class AmericanDevice()
class BritishDevice()

À titre d'exemple, nous pouvons ensuite créer des instances des appareils pour jouer.

var myAmericanPhone = new AmericanDevice()
var myBritishPhone = new BritishDevice()

Nous allons ensuite introduire le concept de charge pour les deux appareils en ajoutant une méthode appelée `charge()`. Cette méthode prendra en paramètre le chargeur correspondant et effectuera la charge en conséquence.

sealed trait Device
class AmericanDevice : Device{
    fun charge(charger:AmericanCharger){
        //Do some American charging
    }
}
class BritishDevice: Device{
    fun charge(charger:BritishCharger){
        //Do some British charging
    }
}

Dans ce cas, selon notre analogie, nous aurions besoin, pour une raison ou une autre, d'utiliser un chargeur britannique avec un appareil américain, ou inversement.

Dans le monde de la programmation, cela se produit généralement lors du mélange de bibliothèques offrant les mêmes fonctionnalités (dans notre contexte, notre fonctionnalité partagée est payante). Nous aurions besoin de trouver un moyen de permettre cela.

Si l'on suit l'analogie, il nous faudra aller dans un magasin d'électronique et acheter un adaptateur permettant de recharger des appareils américains avec des chargeurs britanniques. Du point de vue de la programmation, nous serons le fabricant de cet adaptateur.

Nous allons créer un adaptateur qui correspond exactement au modèle nécessaire à la création de l'autre. Nous l'implémenterons sous forme de classe, comme suit. Il ne s'agit pas nécessairement d'une classe ; une fonction illustrant le fonctionnement général du modèle d'adaptateur pourrait suffire. Nous utilisons une classe car elle correspond à la plupart des usages. Android.

class AmericanToBritishChargerAdapter(theAmericanCharger:AmericanCharger){
    fun returnNewCharger(): BritishCharger{
            //convert the American charger to a BritishCharger
            //we would change the American charging functionality
            //to British charging functionality to make sure the
            //adapter doesn't destroy the device. The adapter could
            //, for example, control the power output by dividing by 2
            //our adapter could encompass this functionality in here

           var chargingPower:Int = theAmericanCharger.chargingPower / 2
           var newBritishCharger = new BritishCharger()
           newBritishCharger.chargingPower = theAmericanCharger.chargingPower/2

        return newBritishCharger
    }
}

Dans le monde de la programmation, la différence entre les prises est analogue à la différence entre les méthodes de charge. Des chargeurs utilisant des méthodes différentes seraient inutilisables.

var myBritishDevice = new BritishDevice()
var americanChargerIFound = new AmericanCharger()

Tenter d'appeler la méthode charge() sur myBritishDevice avec americanChargerIFound ne fonctionnerait pas, car AmericanDevice n'accepte que des chargeurs américains. Il est donc impossible de procéder ainsi :

var myBritishDevice = new BritishDevice()
var americanChargerIFound = new AmericanCharger()
myBritishDevice.charge(americanChargerIFound)

Dans ce cas précis, l'adaptateur que nous avons créé, AmericanToBritishChargerAdapter, s'avère très utile. Nous pouvons utiliser la méthode returnNewCharger() pour créer un nouveau chargeur britannique, que nous pourrons ensuite utiliser pour recharger notre appareil. Il suffit de créer une instance de notre adaptateur et de lui fournir le chargeur américain existant ; l'adaptateur créera alors un chargeur britannique fonctionnel.

var myBritishDevice = new BritishDevice()
var americanChargerIFound = new AmericanCharger()
//We create the adapter and feed it the americanCharger
var myAdapter =  AmericanToBritishChargerAdapter(americanChargerIFound)
//calling returnNewCharger from myAdapter would return a BritishCharger
var britishChargerFromAdapter = myAdapter.returnNewCharger()
//and once we have the britishCharger we can now use it
myBritishDevice.charge(britishChargerFromAdapter)

RecyclerView.LayoutManager

Lorsqu'on travaille avec un ViewGroup, on y place des vues. Le LayoutManager a pour rôle de définir la disposition de ces vues.

À titre de comparaison, lorsqu'on travaille avec un LinearLayout ViewGroup, l'objectif est de pouvoir placer les éléments verticalement ou horizontalement. Cela se fait facilement en ajoutant un attribut d'orientation, qui indique comment le LinearLayout sera positionné à l'écran. On peut le faire en utilisant… android:orientation=VERTICAL|HORIZONTAL attribuer.

Nous disposons également d'un autre ViewGroup appelé GridLayout. Il est utilisé pour disposer les vues dans une structure de grille rectangulaire, notamment pour faciliter la consultation des données présentées à l'utilisateur. GridLayout offre des options de configuration permettant de définir les dimensions de la grille ; par exemple, une grille 4×4 ou 3×2.

RecyclerView.ViewHolderRecyclerView.ViewHolder

Le ViewHolder est un ABStracLa classe `t`, que nous héritons également de `RecyclerView`, nous fournit des méthodes communes permettant de référencer une vue placée dans le `RecyclerView`, même après que le mécanisme de recyclage de ce dernier a modifié diverses références dont nous n'avons pas connaissance.

Grandes listes

On utilise les RecyclerViews lorsqu'on souhaite présenter un très grand nombre de vues à l'utilisateur, sans pour autant épuiser la mémoire. RAM sur notre appareil pour chaque instance de la vue créée.

Prenons l'exemple d'une liste de contacts : nous avons une idée générale de l'apparence d'un contact dans cette liste. Nous créons ensuite un modèle de mise en page, qui est en réalité une vue, avec des emplacements pour insérer différentes données de notre liste de contacts. Voici un pseudo-code qui explique le principe :

//OneContactView
<OneContact>
<TextView>{{PlaceHolderForName}}</TextView>
<TextView>{{PlaceHolderForAddress}}</TextView>
<ImageView>{{PlaceHolderForProfilePicture}}</ImageView>
<TextView>{{PlaceHolderForPhoneNumber}}</TextView>
</OneContact>

Nous aurions alors une liste de contacts de ce type :

<ContactList>
</ContactList>

Si nous devions coder le contenu en dur, nous n'aurions aucun moyen d'ajouter du nouveau contenu à la liste par programmation sans réécrire l'application. Heureusement pour nous, l'ajout d'une vue à un ViewGroup est pris en charge par un addView(view:View) Cette méthode n'est toutefois pas celle qui permet d'ajouter des vues enfants au RecyclerView.

Dans notre cas d'utilisation, nous aurions une longue liste de contacts. Pour chaque contact, nous devrions créer une vue OneContactView et y renseigner les données correspondant aux champs de notre classe Contact. Une fois la vue créée, nous devrions l'ajouter au RecyclerView pour afficher la liste.

data  class Contact(var name:String, var address:String, var pic:String, var phoneNumber:Int)

var contact1 = Contact("Guru","Guru97", "SomePic1.jpg", 991)
var contact2 = Contact("Guru","Guru98", "SomePic2.jpg", 992)
var contact3 = Contact("Guru","Guru99", "SomePic3.jpg", 993)

var myContacts:ArrayList<Contact> = arrayListOf<Contact>(contact1,contact2,contact3)

Nous disposons d'un tableau de contacts. La vue OneContactView contient des emplacements pour récupérer les données de la classe Contact et les afficher. Dans RecyclerView, nous devons ajouter des vues pour qu'elle puisse gérer le recyclage des contacts.

Le RecyclerView ne nous permet pas d'ajouter directement une vue, mais nous permet d'ajouter un ViewHolder. Dans ce cas précis, nous avons deux éléments que nous souhaitons connecter, mais qui ne correspondent pas. C'est là qu'intervient notre adaptateur. Le RecyclerView nous fournit un adaptateur, tout comme notre… AmericanToBritishChargerAdapter() Cela nous a permis, comme précédemment, de convertir notre chargeur américain, inutilisable avec notre appareil britannique, en quelque chose d'utilisable, semblable à un adaptateur secteur dans la vie réelle.

Dans ce scénario, l'adaptateur prendrait notre tableau de contacts et notre vue, et générerait à partir de là des ViewHolders que le RecyclerView est prêt à accepter.

Le RecyclerView fournit une interface que nous pouvons étendre pour créer notre adaptateur via la classe RecyclerView.Adapter. Cet adaptateur contient un moyen de créer la classe ViewHolder avec laquelle le RecyclerView doit interagir. Nous nous retrouvons donc dans la même situation qu'auparavant, à un élément supplémentaire près : l'adaptateur.

Nous disposons d'un tableau de contacts, d'une vue affichant un contact (OneContactView) et d'un RecyclerView, une liste de vues permettant le recyclage des éléments, mais qui n'accepte que des ViewHolders. Dans ce cas, nous avons maintenant une classe RecyclerView.Adapter, qui possède une méthode permettant de créer des ViewHolders.

fun createViewHolder(@NonNull parent: ViewGroup, viewType: Int): ViewHolder

Le RecyclerView.ViewHolder est un absolutracCette classe prend notre vue comme argument et la convertit en ViewHolder. Elle utilise le modèle de conception Wrapper, qui permet d'étendre les fonctionnalités des classes.

Base #2 – Modèle d’emballage

Nous utiliserons un exemple simple pour démontrer comment faire parler les animaux.

sealed trait Animal{
    fun sound():String
}

data class Cat(name:String):Animal{
    fun sound(){
        "Meow"
        }
}
data class Dog(name:String):Animal{
    fun sound(){
        "Woof"
        }
}

var cat1 = Cat("Tubby")
var dog1 = Dog("Scooby")
cat1.sound() //meow
dog1.sound() //woof

Dans l'exemple ci-dessus, nous avons deux animaux. Si, par hasard, nous voulions ajouter une méthode pour les faire parler, mais que l'auteur de la bibliothèque n'était pas coopératif, nous pourrions tout de même trouver une solution. Il nous faudrait un wrapper pour notre classe Animal. Pour ce faire, nous prendrions l'objet Animal comme constructeur de notre classe.

class SpeechPoweredAnimalByWrapper(var myAnimal:Animal){

    fun sound(){
        myAnimal.sound()
    }

    fun speak(){
        println("Hello, my name is ${myAnimal.name}")
    }
}

Nous pouvons maintenant passer une instance d'animal à SpeechPoweredAnimalByWrapper. Appeler la méthode sound() sur cette instance appellera la méthode sound() de l'animal passé en paramètre. Nous disposons également d'une méthode speak() supplémentaire, qui constitue une nouvelle fonctionnalité ajoutée aux animaux passés en paramètre. Voici comment l'utiliser :

var cat1 =  Cat("Garfield")
cat1.sound()//"meow"
cat1.speak()// doesn't work as it isn't implemented
var talkingCat = new SpeechPoweredAnimalByWrapper(cat1)
talkingCat.sound() //"meow" the sound method calls the one defined for cat1
talkingCat.speak() //"Hello, my name is Garfield"

Grâce à ce modèle, nous pouvons prendre des classes et y ajouter des fonctionnalités. Il suffit de leur fournir une instance de classe et les nouvelles méthodes définies par notre wrapper.ping classe.

Dans l'exemple ci-dessus, nous avons utilisé une classe concrète. Il est également possible d'implémenter la même chose dans une classe abstraite.tracclasse t. Nous devrions modifier la classe SpeechPoweredAnimalByWrapper en abstracVoilà, c'est terminé. Nous allons raccourcir le nom de la classe pour le rendre plus lisible.

abstract class SpeechPowered(var myAnimal:Animal){

    fun sound(){
        myAnimal.sound()
    }

    fun speak(){
        println("Hello, my name is ${myAnimal.name}")
    }
}

C'est la même chose qu'avant, mais cela signifierait autre chose. Dans une classe normale, nous pouvons avoir une instance d'une classe de la même manière que nous avons créé cat1 et dog1. AbstracLes classes t, cependant, ne sont pas destinées à être instanciées mais à étendre d'autres classes. Alors, comment utiliserions-nous la nouvelle méthode SpeechPowered(var myAnimal:Animal) abs ?tracLa classe t ? Nous pouvons l’utiliser en créant de nouvelles classes qui l’étendront et qui, par conséquent, acquerront ses fonctionnalités.

Dans notre exemple, nous allons créer une classe SpeechPoweredAnimal qui étend la classe.

class SpeechPoweredAnimal(var myAnimal:Animal):SpeechPowered(myAnimal)

var cat1 =  Cat("Tubby")
var speakingKitty = SpeechPoweredAnimal(cat1)
speakingKitty.speak() //"Hello, my name is Tubby"

Il s'agit du même modèle utilisé dans le ViewHolder. La classe RecyclerView.ViewHolder est une classe absolue.tracCette classe ajoute des fonctionnalités à la vue, un peu comme nous avons ajouté la méthode « parler » aux animaux. C’est cette fonctionnalité supplémentaire qui permet son bon fonctionnement avec le RecyclerView.

Voici comment créer un OneContactViewHolder à partir d'un OneContactView :

//The View argument we pass is converted to a ViewHolder which uses the View to give it more abilities and in turn work with the RecyclerView
class OneContactViewHolder(ourContactView: View) : RecyclerView.ViewHolder(ourContactView)

RecyclerView possède un adaptateur qui nous permet de connecter notre tableau de contacts à ContactsView via RecyclerView.

Ajout d'une vue

Le ViewGroup ne se redessine pas automatiquement, mais selon une fréquence précise. Sur votre appareil, il se peut qu'il se redessine toutes les 10 ms ou 100 ms ; ou, si l'on prend un intervalle absurde, par exemple 1 minute, lorsque vous ajoutez une vue à un ViewGroup, les modifications seront visibles 1 minute plus tard, lorsque le ViewGroup se « rafraîchit ».

RecyclerView.Recycler

Travaux préparatoires n° 3 – La mise en cache

L'un des meilleurs exemples de situations où nous actualisons régulièrement la page est le navigateur. Imaginons, par exemple, que le site que nous visitons soit statique et ne mette pas à jour son contenu dynamiquement ; nous devrions alors actualiser la page régulièrement pour voir les changements.

Prenons l'exemple de Twitter. On y trouverait une liste de tweets statiques, et le seul moyen de voir les nouveaux tweets serait de cliquer sur le bouton d'actualisation pour mettre à jour le contenu.

Redessiner l'écran entier est évidemment une opération coûteuse. Imaginez si notre forfait téléphonique était limité et que notre liste de tweets contenait beaucoup d'images et de vidéos ; il serait coûteux de retélécharger tout le contenu de la page à chaque rafraîchissement.

Il nous faudrait un moyen de stocker les tweets déjà chargés et de faire en sorte que notre prochaine requête puisse identifier les tweets déjà présents. Ainsi, au lieu de tout retélécharger, seuls les nouveaux tweets sont récupérés. De plus, le système vérifie si un tweet enregistré localement a disparu afin de le supprimer, le cas échéant. Ce mécanisme s'appelle la mise en cache.

Les informations que nous envoyons au site web concernant son contenu sont appelées métadonnées. Concrètement, nous ne disons pas simplement « nous voulons charger votre site », mais plutôt « nous voulons charger votre site et voici une partie du contenu que nous avons déjà enregistré lors de notre dernier chargement ; veuillez l'utiliser pour ne nous envoyer que le contenu manquant, afin de ne pas consommer trop de bande passante. »

Appels de mise en page – La liste de tweets doit être folle

Un exemple d'appel de mise en page est scrollToPosition. C'est un exemple courant, notamment dans les applications de messagerie instantanée. Si une personne répond à une bulle de discussion précédente, certaines applications incluent la réponse et un lien vers la bulle ; en cliquant dessus, vous êtes redirigé vers votre message initial.

Dans le cas où nous appelons cette méthode avant d'avoir ajouté un LayoutManager à notre RecyclerView et avant d'avoir un RecyclerView.Adapter, scrollToPosition(n:Int) est simplement ignoré.

Communication entre les composants RecyclerView

Travaux préparatoires n° 4 – Rappels

Le RecyclerView, pour fonctionner, est un composant complexe. Il interagit avec le LayoutManager, qui détermine l'organisation des vues, linéairement ou sous forme de grille. Il gère également un adaptateur qui convertit les éléments (contactList) en vues (OneContactView), puis en ViewHolders (OneContactViewHolder), compatibles avec les méthodes du RecyclerView.

La matière première du RecyclerView est constituée de nos vues, par exemple OneContactView, et d'une source de données.

contactList:Array<Contact>

Nous avons utilisé un scénario simple comme point de départ pour comprendre le fonctionnement du RecyclerView. Le cas de base, à savoir un tableau statique de 1 000 contacts à afficher à l'utilisateur, est facile à appréhender. Le fonctionnement du RecyclerView prend tout son sens lorsque la liste n'est plus statique. Avec une liste dynamique, il faut anticiper l'évolution de l'affichage à l'écran lors de l'ajout ou de la suppression d'un élément.

RecyclerView.LayoutManager

Outre la décision de la disposition de nos vues, linéaire ou en grille, le LayoutManager effectue de nombreux travaux en arrière-plan.ping Les recycleurs savent quand effectuer le recyclage.

Il est responsable de garderping tracLe gestionnaire de mise en page (LayoutManager) récupère le nombre de vues actuellement affichées à l'écran et communique cette information au mécanisme de recyclage. Lorsque l'utilisateur fait défiler la page vers le bas, le LayoutManager informe le système de recyclage des vues qui perdent le focus en haut de la page afin qu'elles puissent être réutilisées, au lieu de rester affichées et de consommer de la mémoire ou d'être détruites uniquement pour en créer de nouvelles.

Cela signifie que le LayoutManager doit conserver tracLe système détermine la position de l'utilisateur lorsqu'il fait défiler la liste. Pour ce faire, il utilise une liste de positions indexées : le premier élément commence à 0 et les numéros augmentent jusqu'à correspondre au nombre d'éléments dans la liste.

Si nous pouvons visualiser 10 éléments sur une liste de, disons, 100, au début, le LayoutManager sait qu'il a le focus sur les vues 0 à 9. Au fur et à mesure que nous faisons défiler, le LayoutManager est capable de calculer les vues qui perdent le focus.

Le LayoutManager peut libérer ces vues dans le mécanisme de recyclage afin qu'elles puissent être réutilisées (de nouvelles données peuvent leur être liées ; par exemple, les données de contact d'une vue peuvent être supprimées et de nouvelles données de contact du segment suivant peuvent remplacer les espaces réservés).

Ce serait idéal si notre liste était statique, mais l'un des cas d'utilisation les plus courants d'un RecyclerView concerne les listes dynamiques, où les données peuvent provenir d'un point de terminaison en ligne ou même d'un capteur. Non seulement des données sont ajoutées, mais elles peuvent également être supprimées ou mises à jour.

L'état dynamique de nos données peut rendre l'analyse du LayoutManager très complexe. C'est pourquoi le LayoutManager conserve sa propre liste des éléments et de leurs positions, distincte de celle utilisée par le composant de recyclage. Ceci garantit un affichage correct.

Parallèlement, le LayoutManager du RecyclerView veille à afficher correctement les données. Pour ce faire, il se synchronise avec le RecyclerView.Adapter à intervalles réguliers (60 ms), partageant ainsi les informations relatives aux éléments de la liste (ajoutés, mis à jour, supprimés ou déplacés). Dès réception de ces informations, le LayoutManager réorganise l'affichage en conséquence.

La plupart des opérations essentielles liées à RecyclerView s'articulent autour de la communication entre RecyclerView.LayoutManager et RecyclerView.Adapter qui stocke nos listes de données, parfois statiques, parfois dynamiques.

De plus, RecyclerView nous offre des méthodes permettant d'écouter des événements, comme onBindViewHolder lorsque notre RecyclerView.Adapter lie le contenu de notre liste (par exemple un contact) à un ViewHolder afin qu'il soit utilisé pour afficher les informations à l'écran.

Une autre est onCreateViewHolder, qui nous indique quand RecyclerView.Adapter prend une vue régulière comme OneContactView et la convertit en un élément ViewHolder avec lequel RecyclerView peut fonctionner.

Outre les mécanismes de base permettant le recyclage, RecyclerView offre des possibilités de personnalisation du comportement sans incidence sur le recyclage. La réutilisation des vues complique les opérations courantes effectuées avec des vues statiques, comme la réaction aux événements onClick.

Comme nous le savons, RecyclerView.LayoutManager qui présente les vues à l'utilisateur peut avoir pendant un moment une liste d'éléments différente de celle de la RecyclerView.Adapter Cette liste est stockée dans une base de données ou provient d'une source externe. L'intégration directe d'événements OnClick dans les vues peut entraîner des comportements inattendus, comme la suppression du mauvais contact.

Gradle

Pour utiliser RecyclerView, il faut l'ajouter comme dépendance dans le fichier build.gradle. Dans l'exemple suivant, nous avons utilisé l'implémentation « androidx.recyclerview:recyclerview:1.1.0 », qui est la version la plus récente selon cet article.

Après avoir ajouté la dépendance à notre Gradle fichier, nous serons invités par Android Studio pour synchroniser les modifications. Voici comment notre Gradle Voici à quoi ressemblera le fichier après l'ajout d'un RecyclerView dans un projet vide avec uniquement les paramètres par défaut.

apply plugin: 'com.android.application'

apply plugin: 'kotlin-android'

apply plugin: 'kotlin-android-extensions'

android {
    compileSdkVersion 29
    buildToolsVersion "29.0.2"
    defaultConfig {
        applicationId "com.guru99.learnrecycler"
        minSdkVersion 17
        targetSdkVersion 29
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'),
             'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.core:core-ktx:1.1.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'

    implementation "androidx.recyclerview:recyclerview:1.1.0"
}

Nous n'avons pour l'instant qu'un seul fichier de mise en page. Nous allons commencer par un exemple simple où nous utilisons un RecyclerView pour afficher une liste de noms de fruits à l'écran.

Liste d'objets

Nous allons accéder à notre fichier MainActivity et créer un tableau contenant des noms de fruits, juste avant la méthode onCreate() générée lors de la configuration.

package com.guru99.learnrecycler

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {

    var fruitNames:Array<String> = arrayOf<String>("Banana", "Mango", "Passion fruit", "Orange", "Grape")

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

Notre prochain objectif sera d'afficher cette liste à l'écran à l'aide d'un RecyclerView. Pour ce faire, nous accéderons au répertoire de mise en page contenant nos mises en page et créerons une vue qui affichera un fruit.

Disposition à utiliser pour chaque élément de notre liste

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/fruitName"
    />
</TextView>

Dans le TextView ci-dessus, nous avons ajouté un champ id qui servira à identifier la vue. Ce champ n'est pas généré par défaut. Nous avons attribué à notre TextView l'identifiant fruitName afin qu'il corresponde aux données qui lui seront liées.

Ajout de RecyclerView à la mise en page principale

Dans la même activité, un fichier de mise en page main_layout.xml a été généré par défaut. Si nous avions choisi un projet vide, il aurait généré un fichier de mise en page. XML Ce RecyclerView contient un ConstraintLayout avec un TextView affichant le texte « Bonjour ». Nous allons supprimer tout son contenu pour ne conserver que le RecyclerView, comme ci-dessous :

<?xml version="1.0" encoding="utf-8"?>
<androidx.recyclerview.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/fruitRecyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" />

Nous avons également ajouté un attribut id au RecyclerView, que nous utiliserons pour le référencer dans notre code.

android:id="@+id/fruitRecyclerView"

Nous retournerons ensuite à notre fichier MainActivity. Grâce aux identifiants que nous avons créés, nous pourrons référencer les vues que nous venons de créer. Nous commencerons par référencer le RecyclerView à l'aide de la méthode findViewById() fournie par AndroidNous allons procéder ainsi dans notre méthode onCreate(). Voici à quoi ressemblera notre méthode onCreate().

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    var myFruitRecyclerView: RecyclerView = findViewById(R.id.fruitRecyclerView)
}

Créer un ViewHolder

Ensuite, nous allons créer un RecyclerView.ViewHolder, qui se chargera de convertir notre vue en un ViewHolder, que le RecyclerView utilisera pour afficher nos éléments. Nous effectuerons cette opération juste après l'exécution de notre méthode onCreate().

package com.guru99.learnrecycler

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import androidx.recyclerview.widget.RecyclerView

class MainActivity : AppCompatActivity() {

    var fruitNames:Array<String> = arrayOf<String>("Banana", "Mango", "Passion fruit", "Orange", "Grape")

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        var myFruitRecyclerView: RecyclerView = findViewById(R.id.fruitRecyclerView)
    }

    class FruitViewHolder(fruitView: View): RecyclerView.ViewHolder(fruitView)

}

Créer un RecyclerViewAdapter

Ensuite, nous allons créer une classe FruitArrayAdapter qui étend la classe RecyclerView.Adapter. Cette classe FruitArrayAdapter sera chargée des opérations suivantes : elle extraira les noms des fruits du tableau de fruits, créera un ViewHolder à partir de notre vue one_fruit_view.xml, puis liera les fruits à ce ViewHolder et enfin, liera dynamiquement le contenu à la vue créée.

package com.guru99.learnrecycler

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import androidx.recyclerview.widget.RecyclerView

class MainActivity : AppCompatActivity() {

    var fruitNames:Array<String> = arrayOf<String>("Banana", "Mango", "Passion fruit", "Orange", "Grape")

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        var myFruitRecyclerView: RecyclerView = findViewById(R.id.fruitRecyclerView)
    }

    class FruitViewHolder(fruitView: View): RecyclerView.ViewHolder(fruitView)

    class FruitArrayAdapter(var fruitArray: Array<String>) : RecyclerView.Adapter<FruitViewHolder>()
}

Android Studio ajoutera des traits rouges ondulés sur notre FruitArrayAdapter, nous indiquant que nous devons implémenter des méthodes que le RecyclerView peut utiliser pour connecter notre tableau à un ViewHolder.

class FruitListAdapter(var fruitArray: Array<String>) : RecyclerView.Adapter<FruitViewHolder>() {
     override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): FruitViewHolder {

     }

     override fun getItemCount(): Int {

     }

     override fun onBindViewHolder(holder: FruitViewHolder, position: Int) {

     }
 }

Nous allons commencer par la partie la plus simple du code généré : la méthode `getItemCount()`. Nous savons comment obtenir le nombre d'éléments dans notre tableau en appelant la propriété `size` du tableau.

class FruitListAdapter(var fruitArray: Array<String>) : RecyclerView.Adapter<FruitViewHolder>() {
        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): FruitViewHolder {

        }

        override fun getItemCount(): Int {
         return fruitArray.size
        }

        override fun onBindViewHolder(holder: FruitViewHolder, position: Int) {

        }
    }

Nous allons ensuite implémenter la méthode `onCreateViewHolder`. C'est à ce moment que le RecyclerView nous demande de l'aider à construire un `FruitViewHolder`. Pour rappel, voici à quoi ressemblait notre classe `FruitViewHolder` :

class FruitViewHolder(fruitView: View): RecyclerView.ViewHolder(fruitView)

Cela nécessite notre vue fruitView, que nous avons créée sous forme de fichier XML one_fruit_view.xml. Nous pouvons créer une référence à ce fichier XML et la convertir en vue comme suit.

class FruitListAdapter(var fruitArray: Array<String>) : RecyclerView.Adapter<FruitViewHolder>() {

        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): FruitViewHolder {

            var fruitView = LayoutInflater.from(parent.context).inflate(R.layout.one_fruit_view, parent, false)

            var fruitViewHolder = FruitViewHolder(fruitView)

            return fruitViewHolder

        }

        override fun getItemCount(): Int {
            return fruitArray.size
        }

        override fun onBindViewHolder(holder: FruitViewHolder, position: Int) {

        }
    }

La partie restante concerne la surcharge de la méthode onBindViewHolder.

fun onBindViewHolder(holder: FruitViewHolder, position: Int)

L'adaptateur RecyclerView demande un entier de position, que nous utilisons pour récupérer un élément de notre liste. Il nous fournit également un conteneur permettant de lier l'élément récupéré de fruitArray à la vue contenue dans ce conteneur. Cette vue est accessible via le champ ViewHolder.itemView. Une fois la vue récupérée, nous pouvons utiliser l'identifiant fruitName créé précédemment pour définir son contenu.

override fun onBindViewHolder(holder: FruitViewHolder, position: Int) {

          var ourFruitTextView = holder.itemView.findViewById<TextView>(R.id.fruitName)

          var aFruitName = fruitArray.get(position)

          ourFruitTextView.setText(aFruitName)
      }

Notre FruitArrayAdapter est ainsi terminé et ressemble à ceci.

class FruitListAdapter(var fruitArray: Array<String>) : RecyclerView.Adapter<FruitViewHolder>() {

        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): FruitViewHolder {

            var fruitView = LayoutInflater.from(parent.context).inflate(R.layout.one_fruit_view, parent, false)

            var fruitViewHolder = FruitViewHolder(fruitView)

            return fruitViewHolder
        }

        override fun getItemCount(): Int {
            return fruitArray.size
        }

        override fun onBindViewHolder(holder: FruitViewHolder, position: Int) {

            var ourFruitTextView = holder.itemView.findViewById<TextView>(R.id.fruitName)

            var aFruitName = fruitArray.get(position)

            ourFruitTextView.setText(aFruitName)
        }
    }

Enfin, nous sommes prêts à connecter les éléments restants de notre RecyclerView, à savoir la création d'un LayoutManager qui indiquera au RecyclerView comment afficher le contenu de la liste, soit de manière linéaire à l'aide de LinearLayoutManager, soit sous forme de grille à l'aide de GridLayoutManager ou de StaggeredGridLayoutManager.

Créer un gestionnaire de mise en page

Nous allons retourner dans notre fonction onCreate et ajouter le LayoutManager.

override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)

       var myFruitRecyclerView: RecyclerView = findViewById(R.id.fruitRecyclerView)

       var fruitLinearLayout = LinearLayoutManager(this)

       myFruitRecyclerView.layoutManager =fruitLinearLayout

   }

Accrochez notre adaptateur aux éléments et configurez-le sur RecyclerView

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        var myFruitRecyclerView: RecyclerView = findViewById(R.id.fruitRecyclerView)

        var fruitLinearLayout = LinearLayoutManager(this)

        myFruitRecyclerView.layoutManager =fruitLinearLayout

        var fruitListAdapter = FruitListAdapter(fruitNames)

        myFruitRecyclerView.adapter =fruitListAdapter
    }

Nous avons également créé une instance de fruitListAdapter et l'avons alimentée avec le tableau de noms de fruits. Et voilà, c'est terminé ! Voici à quoi ressemble le fichier MainActivity.kt complet.

package com.guru99.learnrecycler

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView

class MainActivity : AppCompatActivity() {

    var fruitNames:Array<String> = arrayOf<String>("Banana", "Mango", "Passion fruit", "Orange", "Grape")

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        var myFruitRecyclerView: RecyclerView = findViewById(R.id.fruitRecyclerView)

        var fruitLinearLayout = LinearLayoutManager(this)

        myFruitRecyclerView.layoutManager =fruitLinearLayout

        var fruitListAdapter = FruitListAdapter(fruitNames)

        myFruitRecyclerView.adapter =fruitListAdapter
    }

    class FruitViewHolder(fruitView: View): RecyclerView.ViewHolder(fruitView)

    class FruitListAdapter(var fruitArray: Array<String>) : RecyclerView.Adapter<FruitViewHolder>() {

        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): FruitViewHolder {

            var fruitView = LayoutInflater.from(parent.context).inflate(R.layout.one_fruit_view, parent, false)

            var fruitViewHolder = FruitViewHolder(fruitView)

            return fruitViewHolder
        }

        override fun getItemCount(): Int {
            return fruitArray.size
        }

        override fun onBindViewHolder(holder: FruitViewHolder, position: Int) {

            var ourFruitTextView = holder.itemView.findViewById<TextView>(R.id.fruitName)

            var aFruitName = fruitArray.get(position)

            ourFruitTextView.setText(aFruitName)
        }
    }
}

Téléchargez le projet

FAQ