Le remplissage automatique du formulaire, souvent abrégé en simple remplissage automatique, est une fonctionnalité prise en charge par les navigateurs depuis des années. La plupart d’entre nous l’utilisent tout le temps. Pour ma part, je le trouve indispensable lors de tâches telles que remplir un formulaire d’inscription ou compléter un processus de paiement.
La dernière version d’Android, Android O, apporte des fonctionnalités similaires aux applications Android. En d’autres termes, Android peut désormais aider les utilisateurs à remplir des formulaires appartenant à toutes les applications qu’ils ont installées sur leurs appareils. C’était une fonctionnalité très attendue car taper avec un clavier virtuel sur un petit écran a tendance à être assez compliqué.
En tant que développeur d’applications, vous pouvez utiliser le nouveau cadre de saisie automatique pour créer votre propre service de saisie automatique personnalisé, un service qui décide de la manière de remplir les champs de saisie d’une application. Dans ce tutoriel, je vais vous montrer comment.
Conditions préalables
Pour pouvoir suivre ce tutoriel, vous aurez besoin de:
- Aperçu d’Android Studio 2.4 7 ou hauteuh
- Un émulateur ou un appareil exécutant Android O ou supérieur
1. Créer un nouveau projet
Lancez Android Studio et créez un nouveau projet avec une activité vide. Vous devez, bien sûr, vous rappeler de choisir Android 7+ dans le Ciblez les appareils Android dialogue.


Ce projet aura besoin de quelques widgets appartenant à la bibliothèque de support de conception, alors ouvrez le app
modules build.gradle fichier et ajoutez ce qui suit compile
dépendance à lui:
compile 'com.android.support:design:26.+'
Enfin, appuyez sur le Synchroniser maintenant bouton pour mettre à jour le projet.
2. Créer une activité Paramètres
Dans ce didacticiel, nous allons créer une application contenant un service de remplissage automatique très simple qui cible uniquement les champs de saisie dans lesquels l’utilisateur doit saisir une adresse e-mail. Parce que presque toutes les autres applications sur Google Play demandent aujourd’hui une adresse e-mail, ce service sera très utile.
Notre service a évidemment besoin de savoir quelles sont les adresses e-mail de l’utilisateur. Par conséquent, créons maintenant une activité dans laquelle l’utilisateur peut saisir et enregistrer deux adresses e-mail.
Étape 1: définir la disposition
Comme vous vous en doutez, la mise en page de l’activité contiendra deux EditText
widgets dans lesquels l’utilisateur peut saisir ses adresses e-mail. Si vous souhaitez qu’il respecte les directives de Material Design, placez le EditText
widgets à l’intérieur TextInputLayout
des conteneurs est une bonne idée.
De plus, la mise en page doit avoir un Button
widget sur lequel l’utilisateur peut appuyer pour enregistrer les adresses e-mail.
Vous êtes libre de placer les widgets où vous le souhaitez. Néanmoins, pour l’instant, je vous suggère de les placer tous dans un LinearLayout
dont l’orientation est verticale.
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:padding="16dp"> <android.support.design.widget.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/primary" android:hint="Your primary email address" android:inputType="textEmailAddress"/> </android.support.design.widget.TextInputLayout> <android.support.design.widget.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/secondary" android:hint="Your other email address" android:inputType="textEmailAddress"/> </android.support.design.widget.TextInputLayout> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/save_button" style="@style/Widget.AppCompat.Button.Colored" android:text="Save" android:onClick="saveEmailAddresses"/> </LinearLayout>
Dans le code ci-dessus, vous pouvez voir que le Button
widget a un onClick
attribut pointant vers une méthode. Cliquez sur l’ampoule jaune à côté de cet attribut dans Android Studio pour générer un talon pour celui-ci dans le Activity
classe.
public void saveEmailAddresses(View view) { // More code will be added here }
Étape 2: enregistrer les adresses e-mail
Nous utiliserons un fichier de préférences partagé appelé EMAIL_STORAGE pour sauvegarder nos données. Vous pouvez utiliser le getSharedPreferences()
méthode de votre Activity
class pour accéder au fichier. De plus, pour pouvoir écrire dans le fichier, vous devez appeler son edit()
méthode, qui génère un SharedPreferences.Editor
objet.
En conséquence, ajoutez le code suivant dans le saveEmailAddresses()
méthode:
SharedPreferences.Editor editor = getSharedPreferences("EMAIL_STORAGE", MODE_PRIVATE).edit();
Pour récupérer les adresses e-mail que l’utilisateur a saisies dans le EditText
widgets, vous devrez d’abord obtenir des références à ceux-ci en utilisant le findViewById()
méthode, puis appelez leur getText()
méthodes.
String primaryEmailAddress = ((EditText)findViewById(R.id.primary)) .getText().toString(); String secondaryEmailAddress = ((EditText)findViewById(R.id.secondary)) .getText().toString();
À ce stade, vous pouvez appeler le putString()
méthode de l’éditeur pour ajouter les adresses e-mail au fichier de préférences sous forme de deux paires valeur / clé. Après cela, n’oubliez pas d’appeler le commit()
méthode pour rendre vos modifications permanentes.
editor.putString("PRIMARY_EMAIL", primaryEmailAddress); editor.putString("SECONDARY_EMAIL", secondaryEmailAddress); editor.commit();
Étape 3: créer un fichier de métadonnées
L’activité de paramétrage que nous avons créée à l’étape précédente n’est actuellement qu’une activité ordinaire. Pour faire savoir à la plate-forme Android qu’il s’agit d’une activité de paramétrage pour un service de remplissage automatique, nous devons créer un fichier XML de méta-données le indiquant.
Créez un nouveau fichier XML appelé email_address_filler.xml dans le projet res / xml dossier. À l’intérieur, ajoutez un <autofill-service>
tag et définissez la valeur de son settingsActivity
attribuer au nom de votre Activity
classe.
<?xml version="1.0" encoding="utf-8"?> <autofill-service xmlns:android="http://schemas.android.com/apk/res/android" android:settingsActivity="com.tutsplus.simplefill.MainActivity"/>
Vous pouvez maintenant exécuter l’application, saisir deux adresses e-mail et appuyer sur le bouton sauvegarder bouton pour les enregistrer.


3. Créer un service de saisie automatique
Toute classe qui étend le résumé AutoFillService
class peut servir de service de remplissage automatique. Commencez donc par créer une nouvelle classe Java avec Fichier> Nouveau> Classe Java. Dans la boîte de dialogue qui apparaît, nommez la classe EmailAddressFiller et assurez-vous que vous définissez la valeur de Superclasse champ à AutoFillService
.


Android Studio vous invite maintenant à générer des stubs pour deux méthodes abstraites: onSaveRequest()
et onFillRequest()
. Dans ce tutoriel, nous allons nous concentrer uniquement sur onFillRequest()
, qui est automatiquement appelée chaque fois que l’utilisateur ouvre une activité (de n’importe quelle application) contenant des champs de saisie.
@Override public void onFillRequest(AssistStructure assistStructure, Bundle bundle, CancellationSignal cancellationSignal, FillCallback fillCallback) { // More code goes here }
Étape 1: analyser les hiérarchies de vues
Un service de remplissage automatique doit analyser l’interface utilisateur d’une application et identifier les champs de saisie qu’il peut remplir. C’est pourquoi le onFillRequest()
méthode reçoit un AssistStructure
objet, qui contient des détails sur tous les widgets actuellement visibles à l’écran. Plus précisément, il contient un arbre de ViewNode
objets.
Si vous n’avez jamais vu un tel arbre, je vous suggère d’utiliser le uiautomatorviewer , qui fait partie du SDK Android, pour analyser les hiérarchies de mise en page de quelques applications. Par exemple, voici à quoi ressemble la hiérarchie de mise en page de l’application de messagerie par défaut d’Android:


Naturellement, pour analyser tous les nœuds d’un arbre, vous avez besoin d’une méthode récursive. Créons-en un maintenant:
void identifyEmailFields(AssistStructure.ViewNode node, List<AssistStructure.ViewNode> emailFields) { // More code goes here }
Comme vous pouvez le voir, cette méthode a un ViewNode
et un List
comme ses paramètres. Nous utiliserons le List
pour stocker tous les champs de saisie qui attendent des adresses e-mail.
Vous vous demandez peut-être maintenant comment vous pouvez savoir par programme si un champ de saisie attend une adresse e-mail. Eh bien, il n’y a vraiment aucune approche infaillible que vous puissiez suivre. Pour l’instant, nous allons supposer que tous les développeurs d’applications donnent toujours des ID de ressources significatifs à leurs champs de saisie. Sur la base de cette hypothèse, nous pouvons simplement sélectionner tous les champs d’entrée dont les ID de ressource contiennent des chaînes telles que «email» et «username».
En conséquence, ajoutez le code suivant à la méthode:
if(node.getClassName().contains("EditText")) { String viewId = node.getIdEntry(); if(viewId!=null && (viewId.contains("email") || viewId.contains("username"))) { emailFields.add(node); return; } }
Ensuite, chaque fois que nous rencontrons un ViewNode
objet qui contient plus ViewNode
objets, nous devons appeler récursivement le identifyEmailFields()
méthode pour analyser tous ses enfants. Le code suivant vous montre comment:
for(int i=0; i<node.getChildCount();i++) { identifyEmailFields(node.getChildAt(i), emailFields); }
À ce stade, nous pouvons appeler le identifyEmailFields()
méthode à l’intérieur du onFillRequest()
et passez-lui le nœud racine de la hiérarchie de vues.
// Create an empty list List<AssistStructure.ViewNode> emailFields = new ArrayList<>(); // Populate the list identifyEmailFields(assistStructure .getWindowNodeAt(0) .getRootViewNode(), emailFields);
Si notre service ne parvient pas à identifier les champs de saisie des e-mails, il ne doit rien faire. Par conséquent, ajoutez-y le code suivant:
if(emailFields.size() == 0) return;
Étape 2: créer et remplir des vues distantes
Si notre service identifie un champ de saisie qu’il peut remplir, il doit remplir une liste déroulante qui sera affichée sous le champ de saisie. Cela n’est cependant pas simple car ni le champ de saisie ni la liste déroulante n’appartiennent à notre application.
Pour remplir la liste déroulante, nous devons utiliser RemoteViews
objets. Comme son nom l’indique, un RemoteViews
object est une collection de vues qui peuvent être affichées dans une autre application.
Pour initialiser un RemoteViews
objet, vous aurez besoin d’un fichier XML de mise en page. Créons-en un maintenant appelé email_suggestion.xml. Pour l’instant, il ne peut en contenir qu’un TextView
widget pour afficher une adresse e-mail.
En conséquence, ajoutez le code suivant à email_suggestion.xml:
<?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/email_suggestion_item" android:textSize="18sp" android:textStyle="bold" android:padding="5dp"> </TextView>
Vous pouvez maintenant revenir à la onFillRequest()
méthode et créez deux RemoteViews
objets: un pour l’e-mail principal et un autre pour le secondaire.
RemoteViews rvPrimaryEmail = new RemoteViews(getPackageName(), R.layout.email_suggestion); RemoteViews rvSecondaryEmail = new RemoteViews(getPackageName(), R.layout.email_suggestion);
le TextView
widgets dans le RemoteViews
les objets doivent afficher les deux adresses e-mail que nous avons précédemment stockées dans un fichier de préférences partagé. Pour ouvrir le fichier, utilisez le getSharedPreferences()
méthode à nouveau. Une fois ouvert, vous pouvez utiliser son getString()
méthode pour récupérer les deux adresses e-mail.
Enfin, pour définir le contenu de la télécommande TextView
widgets, vous devez utiliser le setTextViewText()
méthode.
// Load the email addresses from preferences SharedPreferences sharedPreferences = getSharedPreferences("EMAIL_STORAGE", MODE_PRIVATE); String primaryEmail = sharedPreferences.getString("PRIMARY_EMAIL", ""); String secondaryEmail = sharedPreferences.getString("SECONDARY_EMAIL", ""); // Update remote TextViews rvPrimaryEmail.setTextViewText(R.id.email_suggestion_item, primaryEmail); rvSecondaryEmail.setTextViewText(R.id.email_suggestion_item, secondaryEmail);
Étape 3: créer des ensembles de données
Nous pouvons désormais utiliser les vues distantes pour créer des ensembles de données à remplissage automatique pouvant être envoyés à n’importe quelle application. Pour éviter que ce didacticiel ne devienne trop long, nous créerons des ensembles de données uniquement pour le premier champ de saisie d’e-mail que nous rencontrons. Le code suivant montre comment sélectionner uniquement le premier champ de saisie d’e-mail:
AssistStructure.ViewNode emailField = emailFields.get(0);
Un ensemble de données à remplissage automatique n’est rien d’autre qu’une instance de Dataset
class, et peut être construit en utilisant le Dataset.Builder
classe.
Lorsque l’utilisateur sélectionne l’une des adresses e-mail que notre service affiche dans la liste déroulante, il doit définir le contenu du champ de saisie associé à l’aide du setValue()
méthode de la Dataset.Builder
classe. Cependant, vous ne pouvez pas passer un ViewNode
objecter à la setValue()
méthode. Il attend en fait un identifiant de remplissage automatique, qui doit être obtenu en appelant le getAutoFillId()
méthode de la ViewNode
objet.
De plus, pour spécifier le texte à écrire dans le champ de saisie, vous devez utiliser le AutoFillValue.forText()
méthode. Le code suivant vous montre comment:
Dataset primaryEmailDataSet = new Dataset.Builder(rvPrimaryEmail) .setValue( emailField.getAutoFillId(), AutoFillValue.forText(primaryEmail) ).build(); Dataset secondaryEmailDataSet = new Dataset.Builder(rvSecondaryEmail) .setValue( emailField.getAutoFillId(), AutoFillValue.forText(secondaryEmail) ).build();
Avant d’envoyer les ensembles de données à une application, vous devez les ajouter à un FillResponse
objet, qui peut être construit à l’aide de FillResponse.Builder
classe. Appelez son addDataset()
méthode deux fois pour ajouter les deux ensembles de données.
Une fois la FillResponse
l’objet est prêt, transmettez-le comme argument au onSuccess()
méthode de la FillCallback
objet, qui est l’un des paramètres du onFillRequest()
méthode.
FillResponse response = new FillResponse.Builder() .addDataset(primaryEmailDataSet) .addDataset(secondaryEmailDataSet) .build(); fillCallback.onSuccess(response);
Étape 4: mettre à jour le manifeste
Comme tous les services, le service de remplissage automatique doit également être déclaré dans le fichier AndroidManifest.xml fichier. Ce faisant, vous devez vous assurer qu’il est protégé par le android.permission.BIND_AUTO_FILL
autorisation.
Ce service nécessite également un <intent-filter>
balise qui lui permet de répondre au android.service.autofill.AutoFillService
action, et un <meta-data>
balise qui pointe vers le fichier XML de méta-données que nous avons créé à une étape précédente.
En conséquence, ajoutez les lignes suivantes à votre fichier manifeste:
<service android:name=".EmailAddressFiller" android:permission="android.permission.BIND_AUTO_FILL"> <meta-data android:name="android.autofill" android:resource="@xml/email_address_filler"/> <intent-filter> <action android:name="android.service.autofill.AutoFillService"/> </intent-filter> </service>
Notre service de remplissage automatique et notre application sont maintenant prêts. Créez le projet et installez l’application sur votre appareil.
4. Activer et utiliser le service de saisie automatique
Pour activer le service de saisie automatique, ouvrez Réglages app et accédez à Applications et notifications> Avancé> Applications par défaut> Application de saisie automatique. Dans l’écran suivant, sélectionnez votre application dans la liste des applications de saisie automatique disponibles.


Vous pouvez maintenant ouvrir n’importe quelle application qui demande une adresse e-mail pour voir votre service de saisie automatique en action. Par exemple, voici ce que vous verrez sur les écrans de connexion d’Instagram et de Pinterest:


Conclusion
Vous savez maintenant créer et utiliser un service de remplissage automatique personnalisé pour Android. N’hésitez pas à l’étendre pour prendre en charge d’autres champs courants, tels que le prénom ou le numéro de téléphone. Vous pouvez également essayer d’identifier les champs d’entrée à l’aide d’autres attributs, tels que des étiquettes et des conseils.
Pour en savoir plus sur le cadre de saisie automatique, reportez-vous à son documentation officielle. Et en attendant, consultez certains de nos autres articles sur le développement d’applications Android O et Android!
Laisser un commentaire