Saisie automatique dans Compose

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. Ces applications sont ce que l'on appelle des 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.

Avec seulement quelques lignes de code, vous pouvez implémenter la saisie automatique dans Compose. 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 dans 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 différentes manières :

• Le système déclenche une boîte de dialogue d'enregistrement, qui invite l'utilisateur à enregistrer des informations lorsqu'il saisit des informations nouvelles ou mises à jour dans un champ compatible avec la saisie automatique. L'enregistrement peut se faire de deux manières :
  • Explicitement, en validant 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 automatique à votre champ de texte à l'aide du type de contenu

Pour indiquer qu'un TextField est compatible avec la saisie 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 renseigner avec leur nom d'utilisateur.

En définissant la sémantique ContentType, vos utilisateurs peuvent accéder aux informations de saisie 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.

Champ de texte basé sur une valeur

TextField(
    value = textFieldValue.value,
    onValueChange = { textFieldValue.value = it },
    modifier = Modifier.semantics { contentType = ContentType.Username }
)
AutofillSnippets.kt

Champ de texte basé sur un état

TextField(
    state = rememberTextFieldState(),
    modifier = Modifier.semantics { contentType = ContentType.Username }
)
AutofillSnippets.kt

Ajouter des champs de saisie automatique avec plusieurs types

Dans certains cas, vous pouvez souhaiter que votre TextField accepte 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 avec l'opérateur +.

Pour connaître tous les types de données disponibles à enregistrer avec la saisie automatique, consultez la ContentType référence.

Champ de texte basé sur une valeur

TextField(
    value = textFieldValue.value,
    onValueChange = { textFieldValue.value = it },
    modifier = Modifier.semantics {
        contentType = ContentType.Username + ContentType.EmailAddress
    }
)
AutofillSnippets.kt

Champ de texte basé sur un état

TextField(
    state = rememberTextFieldState(),
    modifier = Modifier.semantics {
        contentType = ContentType.Username + ContentType.EmailAddress
    }
)
AutofillSnippets.kt

Remplir les 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 leurs identifiants.

Lorsqu'un utilisateur clique sur un champ compatible avec la saisie automatique, s'il existe des données pertinentes stockées, une puce s'affiche dans la barre d'outils au-dessus du clavier, l'invitant à renseigner ses identifiants.

Enregistrer des données avec la saisie automatique via 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 compatible avec 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 :

1. Créez une variable locale pour contenir le gestionnaire de saisie automatique, qui peut être récupéré de la manière suivante :

   val autofillManager = LocalAutofillManager.current
   AutofillSnippets.kt

2. Dans votre TextField(s), ajoutez le type de contenu de votre choix via Modifier.semantics :

   • Avec des champs de texte basés sur une valeur :

     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 }
         )
     }
     AutofillSnippets.kt

   • Avec des champs de texte basés sur un état :

     val autofillManager = LocalAutofillManager.current
     
     Column {
         TextField(
             state = rememberTextFieldState(),
             modifier = Modifier.semantics { contentType = ContentType.NewUsername }
         )
     
         Spacer(modifier = Modifier.height(16.dp))
     
         TextField(
             state = rememberTextFieldState(),
             modifier = Modifier.semantics { contentType = ContentType.NewPassword }
         )
     }
     AutofillSnippets.kt

3. Validez le contexte de saisie automatique selon vos besoins en cliquant sur un bouton :

   • Avec des champs de texte basés sur une valeur :

     val autofillManager = LocalAutofillManager.current
     
     Column {
         TextField(
             value = usernameTextFieldValue.value,
             onValueChange = { usernameTextFieldValue.value = it },
             modifier = Modifier.semantics { contentType = ContentType.NewUsername },
         )
     
         Spacer(modifier = Modifier.height(16.dp))
     
         TextField(
             value = passwordTextFieldValue.value,
             onValueChange = { passwordTextFieldValue.value = it },
             modifier = Modifier.semantics { contentType = ContentType.NewPassword },
         )
     
         // Submit button
         Button(onClick = { autofillManager?.commit() }) { Text("Reset credentials") }
     }
     AutofillSnippets.kt

   • Avec des champs de texte basés sur un état :

     val autofillManager = LocalAutofillManager.current
     
     Column {
         TextField(
             state = rememberTextFieldState(),
             modifier = Modifier.semantics { contentType = ContentType.NewUsername },
         )
     
         Spacer(modifier = Modifier.height(16.dp))
     
         TextField(
             state = rememberTextFieldState(),
             modifier = Modifier.semantics { contentType = ContentType.NewPassword },
         )
     
         // Submit button
         Button(onClick = { autofillManager?.commit() }) { Text("Reset credentials") }
     }
     AutofillSnippets.kt

Commit est appelé chaque fois qu'un utilisateur quitte l'écran. Si un bouton Envoyer est associé à la navigation, il n'est pas nécessaire d'appeler Commit. Si vous souhaitez toujours que le fait de cliquer sur Envoyer déclenche la boîte de dialogue d'enregistrement, ajoutez Commit ici.

Lorsque l'utilisateur clique sur le bouton, la feuille inférieure suivante s'affiche, l'invitant à enregistrer les identifiants auprès du fournisseur d'identifiants sélectionné :

Enregistrer des données avec la saisie automatique via la suggestion de mot de passe sécurisé

En fonction de votre fournisseur d'identifiants, lorsque vous utilisez les types de contenu NewUsername et NewPassword, les utilisateurs peuvent voir un bouton dans le clavier pour Suggérer un mot de passe sécurisé. Lorsqu'ils cliquent dessus, une bottom sheet s'affiche, ce qui leur permet d'enregistrer leurs identifiants. Vous n'avez rien d'autre à implémenter pour que les utilisateurs bénéficient de cette expérience.

Dépannage

Lorsque vous appelez le parcours utilisateur "Enregistrement", si vous cliquez sur "Pas maintenant" plus d'une fois, votre fournisseur d'identifiants risque de ne plus afficher la feuille inférieure. Pour la réactiver et la faire apparaître à nouveau, vous devez supprimer des applications spécifiques qui ont bloqué le message "Mémoriser ce mot de passe ?".

Personnaliser davantage la saisie automatique

Dans un parcours utilisateur de saisie automatique typique, lorsqu'un composant compatible avec la saisie automatique a été renseigné avec des identifiants, il change de couleur et est mis en surbrillance pour signaler à l'utilisateur que la saisie automatique a réussi.

Pour personnaliser cette couleur de surbrillance, utilisez CompositionLocal et fournissez la couleur de votre choix. La couleur de surbrillance par défaut de la saisie automatique est définie comme Color(0x4dffeb3b).

Champs de texte basés sur une valeur

val customHighlightColor = Color.Red

CompositionLocalProvider(LocalAutofillHighlightColor provides customHighlightColor) {
    TextField(
        value = textFieldValue.value,
        onValueChange = { textFieldValue.value = it },
        modifier = Modifier.semantics { contentType = ContentType.Username }
    )
}
AutofillSnippets.kt

Champs de texte basés sur un état

val customHighlightColor = Color.Red

CompositionLocalProvider(LocalAutofillHighlightColor provides customHighlightColor) {
    TextField(
        state = rememberTextFieldState(),
        modifier = Modifier.semantics { contentType = ContentType.Username }
    )
}
AutofillSnippets.kt