Table des matières
Comment la liaison de données vous aide lorsque vous travaillez avec EditText dans RecyclerView
Tout d’abord, nous ajouterons la dépendance RecyclerView et l’activation de la liaison de données dans notre projet. Ouvrez votre build.gradle (Module: application) et allez à dépendances portée. Ajouter RecyclerView dépendances à l’intérieur.
Après cela, allez à Android portée, sous la buildTypes, activé la liaison de données en ajoutant cette ligne
Et votre build.gradle devrait ressembler à ceci
Cliquez sur Synchroniser maintenant dans le coin supérieur droit.
Nous allons créer un Étudiant modèle avec 2 propriétés: nom et score. Les deux sont des chaînes.
- Créer un fichier / classe Kotlin
2. Je l’ai nommé Étudiant et appuyez sur Entrer
3. Copiez et collez le code ci-dessous
Et notre modèle est prêt.
- Créons une disposition XML
2. Je l’ai nommé list_student_item et cliquez D’accord
Votre disposition initiale devrait ressembler à ceci
Avant de coder la disposition, convertissons-la en liaison de données
- Place votre curseur à la racine de votre mise en page (ContrainteMise en page étiquette)
- presse alt + enter (fenêtres)
3. Sélectionnez Convertir en disposition de liaison de données et votre mise en page devrait ressembler à ceci
Comme vous pouvez le voir, la liaison de données ajoutera un wrapper nommé
Nous ajouterons notre modèle dans tag en ajoutant cette ligne de code à l’intérieur:
Nous créons une variable nommée « étudiant » Et mettre Student.kt comme type. Et enfin, créons la mise en page
Notez que nous avons utilisé l’attribut android: text = ”@ = {student.name}”. C’est là que la liaison entre en jeu. En utilisant @{propriété}, nous lions le modèle avec l’interface utilisateur dans un sens. Pour appliquer une liaison bidirectionnelle, ajoutez simplement « =‘ après ‘@’Et il devient @ = {propriété}. Faites la même chose dans EditText pour le score de l’élève.
Ouvrez votre activity_main.xml et copiez collez ce code
Cette disposition se compose de 4 vues, TextView pour le titre, TextView pour ajouter un champ étudiant, RecyclerView et bouton pour soumettre.
Créons un fichier / classe Kotlin et appelons-le StudentAdapter. Ensuite, dans le constructeur principal, ajoutez 1 paramètre nommé studentList avec Liste des tableaux
Laissez le type générique vide pour l’instant, nous l’ajouterons plus tard après avoir créé une classe ViewHolder.
Ensuite, créons une classe intérieure StudentViewHolder qui agissent comme ViewHolder
Au lieu d’utiliser la classe View, nous utilisons la classe de liaison générée comme View. Nous avons également 1 méthode nommée lier() pour lier le modèle à l’interface utilisateur. Notez que nous utilisons binding.student ici, l’étudiant lui-même est une variable list_student_item.xml si tu te souviens.
Après cela, nous pouvons remplir le type générique dans notre classe étend avec StudentViewHolder.
Et, remplacez ces 3 méthodes pour RecyclerView
Ensuite, complétez ces 3 fonctions avec le code ci-dessous
Enfin, notre code StudentAdapter devrait ressembler à ceci
dans le MainActivity.kt, nous avons 3 propriétés privées
- studentList : enregistrer la liste des étudiants
- studentAdapter : adaptateur pour la liste des étudiants. il sera joint à RecyclerView ultérieurement.
- contraignant : c’est l’instance de notre liaison de mise en page activity_main.
onCreate ()
Dans cette méthode, nous allons définir la vue de contenu à l’aide de la liaison de données, définir l’adaptateur et définir l’écouteur.
Ne vous inquiétez pas de l’erreur dans setAdapter () et setListener (), nous ajouterons la fonction au fur et à mesure.
setAdapter ()
Ensuite, créons une méthode privée nommée setAdapter () au dessous de onCreate () méthode. Dans cette méthode, nous initialiserons l’adaptateur et le fixerons à RecyclerView
setListener ()
Dans cette méthode, nous enregistrerons notre vue sur sur clic auditeur.
sur clic()
Oh, setOnClickListener () donne une erreur car nous n’avons pas implémenté View.OnClickListener dans notre activité. Ajoutons-le et implémentons sur clic() méthode. Après cela, copiez et collez le code ci-dessous
Dans cette méthode, nous gérons 2 écouteurs pour:
-
tvAddItem
Lorsque l’utilisateur clique sur ce TextView, nous insérons un nouveau Étudiant à la liste et informez l’adaptateur qu’un élément est inséré à la fin de la liste. -
btnSubmit
Lorsque l’utilisateur clique sur ce bouton, nous ferons une boucle pour chaque Étudiant dans studentList, imprimer leur nom et marquer Logcat.
Et ici, le code complet pour MainActivity.kt
Lançons notre application dans un appareil / émulateur réel. Démo:
Et le résultat dans mon Logcat:
Cela fonctionne comme prévu sans aucun rappel et setter getter!
Donc, nous avons fait notre application! notre code semble être plus concis que jamais, grâce à la liaison de données. Je vais laisser le code source ci-dessous. Le code source se compose du code avec et sans liaison de données, vous pouvez donc le comparer. J’espère que cet article pourra vraiment vous aider dans votre projet!
