Conception d'interface utilisateur Android Confirmation du mot de passe

Il existe de nombreux types de boîtes de dialogue disponibles dans le SDK Android, tels que DatePickerDialogs, ProgressDialogs et des boîtes de dialogue génériques telles que AlertDialogs. Vous pouvez également créer vos propres boîtes de dialogue personnalisées à utiliser dans vos applications..

Les boîtes de dialogue personnalisées, telles que la boîte de dialogue de confirmation du mot de passe (Figure 1), sont générées à partir d'une classe spéciale AlertDialog (android.app.AlertDialog). L'aspect personnalisé de la boîte de dialogue provient du fait qu'au lieu d'utiliser les types de boîte de dialogue intégrés, avec leurs dispositions par défaut, vous chargez une disposition définie par le développeur à utiliser à la place. Dans ce didacticiel rapide, nous expliquons les étapes nécessaires pour implémenter une boîte de dialogue de confirmation de mot de passe personnalisée afin de collecter un nouveau mot de passe de l'utilisateur..

Prérequis: bases du dialogue

Nous avons déjà expliqué comment ajouter des commandes de dialogue de base à vos classes d'activité. Ce didacticiel rapide s’appuie sur vos connaissances tirées du didacticiel Conception de l’interface utilisateur Android: Utilisation des dialogues. Vous pouvez soit ajouter cette boîte de dialogue à l'exemple d'application de la boîte de dialogue fournie dans le didacticiel susmentionné, ou créer votre propre application..

Étape 1: Conception de la disposition de la boîte de dialogue personnalisée

Vous devez d’abord concevoir le contenu de votre boîte de dialogue personnalisée dans un fichier de ressources de présentation. Dans ce cas, notre présentation personnalisée sera une boîte de dialogue de confirmation du mot de passe, ce qui signifie que nous aurons besoin de deux contrôles EditText pour saisir le mot de passe. Nous voudrons également d’autres contrôles de texte pour les étiquettes, etc..

Créez une ressource de présentation appelée /res/layout/password_dialog.xml. Le contenu de ce fichier de ressources est présenté ci-dessous:

        

Ce fichier de présentation simple repose sur quelques autres ressources de chaîne que vous devez définir (étiquettes, consultez le code source complet pour plus de détails si vous avez besoin d’aide pour définir les ressources de chaîne), ainsi que l’attribut de type de saisie EditText appelé textPassword, qui masque le mot de passe. comme il est tapé dans le contrôle. Cette figure montre à quoi ressemble le schéma de configuration:

Étape 2: Définition d'un dialogue de nouveau mot de passe dans votre classe d'activité

Ajoutons maintenant le nouveau dialogue à votre classe d'activité de base.

Commencez par modifier votre classe d'activité et en ajoutant la variable de membre de classe suivante:

 int statique final final MY_PASSWORD_DIALOG_ID = 4;

Ceci définit un identifiant de dialogue unique pour notre classe d'activité. La valeur est un nombre arbitraire, mais doit être unique dans l'activité..

Étape 3: gonfler la disposition de la boîte de dialogue personnalisée

Pour créer des instances de dialogue, vous devez fournir un cas pour votre boîte de dialogue de confirmation de mot de passe personnalisé dans la méthode onCreateDialog () de votre classe d'activité. Lorsque la méthode showDialog () est appelée, elle déclenche un appel à cette méthode, qui doit renvoyer l'instance de dialogue appropriée. Par conséquent, nous commençons ici l'instruction de cas spécifique pour votre nouveau dialogue dans la méthode onCreateDialog () en gonflant notre fichier de présentation personnalisé conçu à l'étape précédente et en récupérant les contrôles importants avec lesquels nous souhaitons interagir à l'aide de findViewById ( ) méthode.

 case MY_PASSWORD_DIALOG_ID: LayoutInflater inflater = (LayoutInflater) getSystemService (Context.LAYOUT_INFLATER_SERVICE); final View layout = inflater.inflate (R.layout.password_dialog, (ViewGroup) findViewById (R.id.root)); final EditText password1 = (EditText) layout.findViewById (R.id.EditText_Pwd1); final EditText password2 = (EditText) layout.findViewById (R.id.EditText_Pwd2); erreur TextView finale = (TextView) layout.findViewById (R.id.TextView_PwdProblem); // TODO: Créer un dialogue ici et le renvoyer (voir les étapes suivantes)

Comme vous pouvez le constater, nous saisissons les deux contrôles EditText qui stockeront les données de mot de passe, ainsi que le contrôle TextView où nous pouvons afficher le texte d'erreur du mot de passe (les mots de passe correspondent ou ne correspondent pas)..

Étape 4: Implémentez le mot de passe TextWatcher

La prochaine étape de notre implémentation d'instruction de cas onCreateDialog () pour la boîte de dialogue personnalisée consiste à enregistrer un TextWatcher sur le deuxième contrôle EditText afin que nous puissions écouter et détecter les correspondances de mot de passe lorsque l'utilisateur tape pour afficher le texte de chaîne correct dans l'erreur. Contrôle TextView (correspond / ne correspond pas).

Voici l'implémentation de TextWatcher, qui est affecté au contrôle EditText du deuxième mot de passe à l'aide de la méthode addTextChangedListener ()..

 password2.addTextChangedListener (new TextWatcher () public void afterTextChanged (Modifiable s) String strPass1 = password1.getText (). toString (); String strPass2 = password2.getText (). toString (); si (strPass1.equals (strPass2 )) error.setText (R.string.settings_pwd_equal); else error.setText (R.string.settings_pwd_not_equal); public void beforeTextChanged (Sondage de type, début, nombre, nombre après, int après)  public void onTextChanged (CharSequence s, int start, int avant, int compte) );

TextWatcher a trois méthodes de rappel, mais l'implémentation de la méthode afterTextChanged () ne nous intéresse vraiment que. Ici, nous vérifions le texte des deux contrôles EditText, les comparons et définissons le texte d'erreur dans TextView. Voici ce que TextWatcher pourrait afficher lorsque les mots de passe correspondent:

Étape 5: Utiliser le générateur de boîtes de dialogue pour configurer la boîte de dialogue

La prochaine étape de notre implémentation d'instruction de cas onCreateDialog () pour la boîte de dialogue de confirmation de mot de passe personnalisée consiste à utiliser la classe AlertDialog.Builder pour commencer à configurer les paramètres de la boîte de dialogue..

 Générateur AlertDialog.Builder = new AlertDialog.Builder (this); builder.setTitle ("Enter Password"); builder.setView (layout);

Nous définissons le titre de la boîte de dialogue à l'aide de la méthode setTitle (), mais la chose la plus importante à faire est d'utiliser la méthode setView () pour attacher notre mise en page personnalisée que nous venons de gonfler à la boîte de dialogue. C’est ainsi que nous modifions les contrôles utilisés dans notre boîte de dialogue pour lui donner un affichage personnalisé et un comportement défini par le développeur..

Étape 6: Définition des gestionnaires de boutons positifs et négatifs pour la boîte de dialogue Mot de passe personnalisé

Ensuite, nous devons configurer les boutons positifs et négatifs associés à notre dialogue. Rappelez-vous que les boîtes de dialogue seront réutilisées si elles sont affichées plus d'une fois. Avec notre boîte de dialogue de confirmation du mot de passe, nous voulons nous assurer de bien supprimer la boîte de dialogue du pool de boîtes de dialogue de l'activité afin qu'elle ne puisse pas être réutilisée. Nous ne voulons pas que des informations de mot de passe résiduelles soient stockées après que notre boîte de dialogue de mot de passe soit fermée, qu'elle soit confirmée ou rejetée..

 builder.setNegativeButton (android.R.string.cancel, new DialogInterface.OnClickListener () public void onClick (boîte de dialogue DialogInterface, int whichButton) removeDialog (MY_PASSWORD_DIALOG_ID);); builder.setPositiveButton (android.R.string.ok, nouvelle boîte de dialogue DialogInterface.OnClickListener () public void onClick (boîte de dialogue DialogInterface, int) String, strPassword1 = password1.getText (). toString (); String strPassword2 = password2.getText ( if (strPassword1.equals (strPassword2)) Toast.makeText (SuperSimpleDialogsActivity.this, "Correspondance des mots de passe =" + strPassword2, Toast.LENGTH_SHORT) .show (); removeDialog (MY_PASSWORD_JPN). ;

Nous nous débarrassons de la boîte de dialogue dans les gestionnaires de clic sur les boutons négatif et positif en utilisant la méthode removeDialog (). Cependant, dans le gestionnaire de boutons positifs, nous récupérons également le contenu des contrôles EditText et, s'ils correspondent, affichons le mot de passe sous forme de message Toast. Dans la plupart des cas, vous n'utiliseriez pas de pain grillé, mais vous économiseriez le mot de passe en utilisant la méthode de votre choix (préférences, etc.)..

Étape 7: Générez le dialogue AlertDialog personnalisé à partir du générateur

Votre dialogue est complètement configuré. Utilisez maintenant la méthode create () de la classe AlertDialog.Builder pour générer le bon AlertDialog et le renvoyer, mettant ainsi fin à votre déclaration de cas pour cette boîte de dialogue dans la méthode onCreateDialog () de la classe Activity.

 AlertDialog passwordDialog = builder.create (); retour motdepasseDialog;

Étape 8: Déclenchement de la boîte de dialogue de confirmation du mot de passe

Enfin, vous êtes prêt à déclencher l'affichage de la boîte de dialogue de confirmation du mot de passe, si nécessaire. Par exemple, vous pouvez ajouter un autre contrôle Button à l'écran de votre activité pour déclencher l'affichage de votre boîte de dialogue. Son gestionnaire de clics pourrait ressembler à quelque chose comme ceci:

 public void onPasswordDialogButtonClick (Afficher v) showDialog (MY_PASSWORD_DIALOG_ID); 

Conclusion

Les boîtes de dialogue sont un outil d'interface utilisateur puissant qui peut vous aider à garder l'interface utilisateur de votre application flexible et dégagée. Les boîtes de dialogue peuvent contenir vos propres ressources de présentation avec différents contrôles, ce qui vous permet de créer des contrôles personnalisés tels que des boîtes de dialogue de confirmation de mot de passe. Les dialogues personnalisés sont généralement créés à l'aide de la classe AlertDialog, avec toutes ses fonctionnalités..

à propos des auteurs

Les développeurs mobiles Lauren Darcey et Shane Conder ont co-écrit plusieurs livres sur le développement Android: un livre de programmation en profondeur intitulé Développement d'applications sans fil Android, deuxième édition et Sams Teach Yourself Développement d'applications Android dans 24 heures, Deuxième édition. Lorsqu'ils n'écrivent pas, ils passent leur temps à développer des logiciels mobiles dans leur entreprise et à fournir des services de conseil. Vous pouvez les contacter par courrier électronique à l'adresse [email protected], via leur blog à l'adresse androidbook.blogspot.com et sur Twitter @androidwireless..

Besoin d'aide pour écrire des applications Android? Consultez nos derniers livres et ressources!

я я