Afficher ou masquer le mot de passe en fonction d'un bouton d'activation/de désactivation de l'utilisateur

Vous pouvez créer une icône pour masquer ou afficher un mot de passe en fonction d'un bouton d'activation/de désactivation de l'utilisateur afin d'améliorer la sécurité et l'expérience utilisateur.

Compatibilité des versions

Cette implémentation nécessite que la version minimale du SDK de votre projet soit définie sur le niveau d'API 21 ou supérieur.

Dépendances

Afficher ou masquer un mot de passe en fonction d'un bouton d'activation/de désactivation de l'utilisateur

Pour afficher ou masquer un mot de passe en fonction d'un bouton d'activation/de désactivation, créez un champ de saisie pour saisir des informations et utilisez une icône cliquable pour le bouton d'activation/de désactivation:

@Composable
fun PasswordTextField() {
    val state = remember { TextFieldState() }
    var showPassword by remember { mutableStateOf(false) }
    BasicSecureTextField(
        state = state,
        textObfuscationMode =
        if (showPassword) {
            TextObfuscationMode.Visible
        } else {
            TextObfuscationMode.RevealLastTyped
        },
        modifier = Modifier
            .fillMaxWidth()
            .padding(6.dp)
            .border(1.dp, Color.LightGray, RoundedCornerShape(6.dp))
            .padding(6.dp),
        decorator = { innerTextField ->
            Box(modifier = Modifier.fillMaxWidth()) {
                Box(
                    modifier = Modifier
                        .align(Alignment.CenterStart)
                        .padding(start = 16.dp, end = 48.dp)
                ) {
                    innerTextField()
                }
                Icon(
                    if (showPassword) {
                        Icons.Filled.Visibility
                    } else {
                        Icons.Filled.VisibilityOff
                    },
                    contentDescription = "Toggle password visibility",
                    modifier = Modifier
                        .align(Alignment.CenterEnd)
                        .requiredSize(48.dp).padding(16.dp)
                        .clickable { showPassword = !showPassword }
                )
            }
        }
    )
}
TextSnippets.kt

Points clés concernant le code

  • Maintient l'état de visibilité du mot de passe dans showPassword.
  • Utilise un composable BasicSecureTextField pour la saisie du mot de passe.
  • Possède une icône de fin cliquable, qui active/désactive la valeur de showPassword.
  • Définit l'attribut textObfuscationMode et l'état visible/non visible de l'icône de fin en fonction de l'état de showPassword.

Résultats

Figure 1 Activer/Désactiver l'icône d'affichage/masquage du mot de passe

Collections contenant ce guide

Ce guide fait partie de ces collections de guides rapides sélectionnées qui couvrent des objectifs de développement Android plus larges:

Texte à afficher

Le texte est un élément central de n'importe quelle interface utilisateur. Découvrez les différentes façons de présenter du texte dans votre application pour offrir une expérience utilisateur agréable.
Collection de guides rapides
Découvrez comment permettre aux utilisateurs d'interagir avec votre application en saisissant du texte et en utilisant d'autres modes de saisie.
Collection de guides rapides

Vous avez des questions ou des commentaires ?

Consultez notre page des questions fréquentes et découvrez les guides rapides, ou contactez-nous pour nous faire part de vos commentaires.
Accéder aux questions fréquentes Envoyer des commentaires