Certaines applications, telles que les gestionnaires de mots de passe, peuvent renseigner les composants d'autres applications à l'aide des données fournies par l'utilisateur. Les applications qui remplissent les composants d'autres applications sont appelées services de saisie automatique. La fonctionnalité Autofill Framework gère la communication entre une application et un service de saisie automatique.
Remplir des identifiants et des formulaires est une tâche fastidieuse sujette aux erreurs. La saisie automatique permet aux utilisateurs de gagner du temps lors du remplissage des champs et de limiter les erreurs de saisie par l'utilisateur.
Vous pouvez implémenter la saisie automatique dans Compose en seulement quelques lignes de code. Cette fonctionnalité offre les avantages suivants aux utilisateurs:
Remplir les identifiants
La saisie automatique permet aux utilisateurs de renseigner leurs identifiants de différentes manières:
- Le système affiche des suggestions de saisie automatique pour l'utilisateur lorsqu'il appuie sur un champ pour lequel la sémantique de saisie automatique est définie.
- Le système affiche des suggestions de saisie automatique pour l'utilisateur et les filtre en fonction de ce qu'il saisit.
Enregistrer les identifiants
Les utilisateurs peuvent enregistrer des identifiants via la saisie automatique de la manière suivante:
- Le système déclenche une boîte de dialogue d'enregistrement, qui invite l'utilisateur à enregistrer des informations lorsqu'il saisit de nouvelles informations ou des informations mises à jour dans un champ activé pour la saisie automatique.
Vous pouvez enregistrer une capture d'écran de deux manières :
- De manière explicite, en confirmant les informations (par exemple, en cliquant sur un bouton)
- Implicitement, lorsqu'un utilisateur quitte la page
- En fonction de votre fournisseur d'identifiants, le système peut suggérer un mot de passe sécurisé à l'utilisateur lorsqu'un champ est défini sur
ContentType.NewPassword.
Vous pouvez utiliser la saisie automatique dans votre application pour simplifier la récupération des données enregistrées pour les utilisateurs. La saisie automatique est compatible avec les composants de texte via BasicTextField et tous les champs de texte Material qui s'appuient sur ce composant.
Conf. saisie auto
Avant d'utiliser les API de saisie automatique sur votre appareil ou votre émulateur, vous devez activer la saisie automatique dans les paramètres. Vous pouvez y spécifier un fournisseur d'identifiants pour que la saisie automatique stocke vos identifiants.
Ajouter la saisie semi-automatique à votre champ de texte à l'aide du type de contenu
Pour indiquer qu'un TextField est compatible avec le remplissage automatique, définissez la sémantique ContentType avec les types que le champ peut accepter. Cela indique aux services de saisie automatique le type de données utilisateur qui peut être pertinent pour ce champ spécifique. Utilisez ContentType.Username pour définir un TextField que les utilisateurs peuvent remplir avec leur nom d'utilisateur.
TextField( value = textFieldValue.value, onValueChange = {textFieldValue.value = it}, modifier = Modifier.semantics { contentType = ContentType.Username } )
En définissant la sémantique ContentType, vos utilisateurs peuvent accéder aux informations de saisie semi-automatique déjà enregistrées dans le fournisseur d'identifiants de leur appareil. Par exemple, si un utilisateur s'est déjà connecté à votre application via le navigateur Chrome sur son ordinateur portable et a enregistré son mot de passe via un fournisseur d'identifiants, ses identifiants lui sont fournis via la saisie automatique.
Ajouter des champs de saisie semi-automatique avec plusieurs types
Dans certains cas, vous pouvez souhaiter que votre TextField gère plusieurs ContentType. Par exemple, un champ de connexion peut accepter une adresse e-mail ou un nom d'utilisateur. Vous pouvez ajouter plusieurs types de contenu à votre TextField à l'aide de l'opérateur +.
TextField( value = textFieldValue.value, onValueChange = { textFieldValue.value = it }, modifier = Modifier.semantics { contentType = ContentType.Username + ContentType.EmailAddress } )
Pour connaître tous les types de données pouvant être enregistrés avec la saisie automatique, consultez la documentation de référence sur ContentType.
Remplir des données avec la saisie automatique
Lorsque vous ajoutez un ContentType dans un TextField, vous n'avez rien d'autre à faire pour que les utilisateurs puissent renseigner des identifiants.
Lorsqu'un utilisateur clique dans un champ activé pour la saisie automatique, si des données pertinentes sont stockées, un chip s'affiche dans la barre d'outils au-dessus du clavier pour l'inviter à renseigner des identifiants.
Économiser des données avec la saisie automatique lors de la navigation
Compose tente automatiquement de déterminer quand un utilisateur quitte une page et valide les identifiants saisis. Une fois qu'un champ est activé pour la saisie automatique, il enregistre automatiquement les informations d'identification lorsqu'un utilisateur quitte la page, sans nécessiter de code supplémentaire.
Enregistrer des données explicitement avec la saisie automatique
Pour enregistrer explicitement de nouveaux identifiants via des champs de texte avec la saisie automatique, le contexte de saisie automatique doit être validé (ou annulé) par le gestionnaire de saisie automatique. Le gestionnaire de saisie automatique local communique ensuite avec le framework de saisie automatique chaque fois que cela est nécessaire. Si vous souhaitez supprimer les identifiants saisis par l'utilisateur, appelez AutofillManager.cancel pour supprimer toutes les données en attente sans les enregistrer.
Les extraits de code suivants montrent comment enregistrer des données avec la saisie automatique de manière explicite à l'aide d'un bouton:
Créez une variable locale pour contenir le Gestionnaire de saisie automatique, qui peut être récupéré comme suit:
val autofillManager = LocalAutofillManager.current
Dans votre
TextField(s), ajoutez le type de contenu souhaité viaModifier.semantics:val autofillManager = LocalAutofillManager.current Column { TextField( value = textFieldValue.value, onValueChange = { textFieldValue.value = it }, modifier = Modifier.semantics { contentType = ContentType.NewUsername } ) Spacer(modifier = Modifier.height(16.dp)) TextField( value = textFieldValue.value, onValueChange = { textFieldValue.value = it }, modifier = Modifier.semantics { contentType = ContentType.NewPassword } ) }
Enregistrez le contexte de saisie automatique si nécessaire en cliquant sur un bouton:
val autofillManager = LocalAutofillManager.current Column { TextField( value = textFieldValue.value, onValueChange = { textFieldValue.value = it }, modifier = Modifier.semantics { contentType = ContentType.NewUsername }, ) Spacer(modifier = Modifier.height(16.dp)) TextField( value = textFieldValue.value, onValueChange = { textFieldValue.value = it }, modifier = Modifier.semantics { contentType = ContentType.NewPassword }, ) // Submit button Button(onClick = { autofillManager?.commit() }) { Text("Reset credentials") } }
Commit est appelé chaque fois qu'un utilisateur quitte l'écran. Si un bouton Envoyer est associé à la navigation, Commit n'a pas besoin d'être appelé. Si vous souhaitez toujours cliquer sur un bouton Envoyer pour déclencher la boîte de dialogue d'enregistrement, ajoutez Commit ici.
Lorsque l'utilisateur clique sur le bouton, la bottom sheet suivante s'affiche et l'invite à enregistrer les identifiants auprès du fournisseur d'identifiants sélectionné:
Économiser des données avec la saisie automatique grâce à la suggestion de mot de passe sécurisé
Selon votre fournisseur d'identifiants, lorsque vous utilisez les types de contenu NewUsername et NewPassword, les utilisateurs peuvent voir un bouton sur le clavier pour suggérer un mot de passe sécurisé. Lorsqu'il clique dessus, une bottom sheet s'affiche, ce qui lui permet d'enregistrer ses identifiants. Vous n'avez pas besoin d'implémenter quoi que ce soit d'autre pour que les utilisateurs puissent profiter de cette expérience.
Dépannage
Lorsque vous appelez le parcours utilisateur "Enregistrer", si vous cliquez sur "Pas maintenant" plusieurs fois, il est possible que votre fournisseur d'identifiants n'affiche plus la feuille du bas. Pour réactiver cette option et la faire apparaître à nouveau, vous devez supprimer des applications spécifiques qui ont bloqué l'option "Mémoriser ce mot de passe ?".
Personnaliser davantage la saisie automatique
Dans un parcours utilisateur typique de saisie automatique, lorsqu'un composant compatible avec la saisie automatique a été renseigné avec des identifiants, il change de couleur et est mis en surbrillance pour indiquer à l'utilisateur que la saisie automatique a bien été effectuée.
Pour personnaliser cette couleur de surbrillance, utilisez CompositionLocal et indiquez la couleur de votre choix.
val customHighlightColor = Color.Red CompositionLocalProvider(LocalAutofillHighlightColor provides customHighlightColor) { TextField( value = textFieldValue.value, onValueChange = { textFieldValue.value = it }, modifier = Modifier.semantics { contentType = ContentType.Username } ) }
La couleur de surlignage par défaut de la saisie automatique est définie sur Color(0x4dffeb3b).