Share
Dans ce tutoriel, je parlerai de nouveau de Material Design. Google I / O 2015 était un événement important pour tous les développeurs Android et la conception faisait bien sûr partie des discussions..
Google a compris que la compatibilité en amont est la partie la plus délicate de la mise en œuvre de la conception matérielle. Bien sûr, les bibliothèques de support, telles que appcompat-v4 et appcompat-v7, font partie de la solution. toutefois, Theme.AppCompat n'implémente pas tous les éléments matériels utilisés dans les applications officielles de Google. Une des caractéristiques qui n’est pas présente dans le AppCompat Le thème est la possibilité de positionner une étiquette flottante sur un Éditer le texte widget. Vous pouvez voir ce que je veux dire dans l'exemple ci-dessous.
Au cours de Google I / O 2015, l’équipe Android a publié une toute nouvelle bibliothèque de support, le Bibliothèque de support de conception. C'est très pratique pour ce genre de problème. Ce tutoriel va vous montrer comment utiliser le nouveau TextInputLayout widget qui est inclus dans le Bibliothèque de support de conception.
Accentsconagua
TextInputLayout Dans Android Studio, choisissez Nouveau> Nouveau projet du Fichier menu. Entrez les informations requises pour configurer le projet et créer le projet. Dans mon exemple, j'ai ciblé le projet sur API 7, qui correspond au niveau minimal d'API pris en charge par la bibliothèque de support de conception. En ciblant un niveau d'API aussi bas, votre application s'exécutera sur presque tous les appareils Android. J'ai nommé l'activité principale LoginActivité et son fichier de mise en page activity_login.xml.
Après avoir configuré le projet, supprimez de l’activité principale le onCreateOptionsMenuet onOptionsItemSelected méthode générée automatiquement par Android Studio. L'écran de connexion que nous sommes sur le point de créer ne nécessite pas de menu, il est donc bon de supprimer ces méthodes. Pensez aussi à supprimer le fichier de menu XML qui réside dans le res / menu dossier.
Pour utiliser le TextInputLayout widget, vous devez importer deux bibliothèques. Le premier est appcompat-v7, ce qui garantit que les styles de matériaux sont compatibles avec les versions antérieures. Le second est le Bibliothèque de support de conception.
Dans votre projet build.gradle fichier, ajoutez les lignes suivantes dans les dépendances du projet:
dependencies compile fileTree (dir: 'libs', include: ['* .jar']) compiler 'com.android.support:design:22.2.0' compiler 'com.android.support:appcompat-v7:22.2.0 '
Si Gradle ne vous demande pas automatiquement de synchroniser votre projet, choisissez Faire le module 'app' du Construire menu ou appuyez sur F9. Ce faisant, le système de compilation Android Studio récupérera automatiquement les ressources nécessaires et vous pourrez importer toutes les classes requises..
L'interface utilisateur de ce projet est très simple. Il affiche une étiquette de bienvenue (qui peut être facilement remplacée par un logo si vous en avez un) et deux Éditer le texte éléments, un pour le nom d'utilisateur et un pour le mot de passe. La mise en page comprend également un bouton qui déclenche la séquence de connexion. La couleur de fond est un joli gris plat.
Un autre détail important à retenir est le réglage correct de la type d'entrée attribut du Éditer le texte éléments. le type d'entrée du premier Éditer le texte l'élément doit être réglé sur textEmail tandis que celui du second devrait être réglé sur textPassword. Voici à quoi devrait ressembler la mise en page.
Vous voudrez peut-être également vous débarrasser de la barre d'applications, connue auparavant sous le nom de barre d'action, en modifiant le style.xml fichier comme indiqué ci-dessous.
TextInputLayoutNous sommes enfin arrivés à la partie la plus intéressante de ce tutoriel. UNE TextInputLayout widget se comporte exactement comme un LinearLayout fait, c'est juste un emballage. TextInputLayout accepte qu'un seul élément enfant, semblable à un ScrollView. L'élément enfant doit être un Éditer le texte élément.
Notez que j'ai spécifié un autre paramètre dans le Éditer le texte article, un allusion. Comme vous le savez déjà, cet attribut vous permet d’afficher un indice personnalisé s’il n’ya pas de contenu dans le Éditer le texte. Une fois que l'utilisateur commence à taper, l'indice disparaît. Ce n'est pas génial, car ils perdent le contexte des informations qu'ils saisissent.
Grâce à TextInputLayout, ce ne sera plus un problème. Tandis que le Éditer le texte seul masquera l’indice après la saisie du premier caractère, lorsqu'il est enveloppé dans un TextInputLayout l'indice va devenir une étiquette flottante au-dessus de la Éditer le texte. Une belle animation matérielle est également incluse.
Ensuite, faisons de même pour le champ mot de passe.
Si vous exécutez l'application maintenant, rien ne se passera. Bien sûr, le Éditer le texte L'attribut indice se comportera comme prévu. Cependant, il n'y a pas d'animation matérielle ni d'étiquettes flottantes. Pourquoi donc? Il nous manque encore du code pour que tout fonctionne.
Sous le setContentView méthode, initialiser les références à la TextInputLayout vues.
final TextInputLayout usernameWrapper = (TextInputLayout) findViewById (R.id.usernameWrapper); final TextInputLayout passwordWrapper = (TextInputLayout) findViewById (R.id.passwordWrapper);
Pour animer l’étiquette flottante, il vous suffit de définir un indice, en utilisant le setHint méthode.
usernameWrapper.setHint ("Nom d'utilisateur"); passwordWrapper.setHint ("Mot de passe");Et tu as fini. Votre écran de connexion suit maintenant correctement les directives de conception du matériel. Lancez l'application pour voir votre magnifique écran de connexion.
Une autre fonctionnalité intéressante de TextInputLayout est la façon dont il peut gérer les erreurs. En validant la saisie, vous empêchez les utilisateurs de mal épeler leur adresse e-mail ou de saisir un mot de passe trop court..
Avec la validation des entrées, des informations d'identification incorrectes seraient traitées par le backend, des erreurs seraient générées et envoyées au client, puis affichées à l'utilisateur (en attente). Une perte de temps considérable et une expérience utilisateur médiocre. Vous devriez vérifier l'entrée de l'utilisateur avant de l'envoyer au backend.
sur clic MéthodeVous devez d'abord gérer le clic du bouton. Il existe de nombreuses façons de gérer les clics de bouton. L’un d’eux consiste à écrire une méthode personnalisée et à la spécifier dans votre fichier XML via le sur clic attribut. je préfère setOnClickListener, mais c'est vraiment juste une question de goût personnel.
btn.setOnClickListener (new View.OnClickListener () @Override public void onClick (Affichage v) // STUB);
Nous savons que si cette méthode est appelée, l'utilisateur n'a plus besoin du clavier. Malheureusement, Android ne cache pas automatiquement le clavier virtuel, sauf indication contraire de votre part. Appel hideKeyboard dans le sur clic corps de la méthode.
private void hideKeyboard () Vue de vue = getCurrentFocus (); if (view! = null) ((InputMethodManager) getSystemService (Context.INPUT_METHOD_SERVICE)). hideSoftInputFromWindow (view.getWindowToken (), InputMethodManager.HIDE_NOT_ALWAYS);
Avant de définir les étiquettes d'erreur, nous devons définir ce qui est une erreur et ce qui ne l'est pas. Nous supposons que le nom d'utilisateur doit être une adresse électronique et nous voulons empêcher les utilisateurs d'entrer une adresse électronique non valide..
Valider une adresse email est un peu complexe. Nous devons compter sur des expressions régulières. Vous pouvez aussi utiliser la bibliothèque Apache Commons si vous le souhaitez..
J'ai écrit l'expression régulière suivante à l'aide des instructions suggérées par Wikipedia sur la validité des e-mails..
/^[a-zA-Z0-9#_~!$&'()*++,;=:."(),:;<>@\[\\\\\++@[a-zA-Z0 -9 -] + (\. [A-zA-Z0-9 -] +) * /
Le sens de cette expression régulière est assez simple. Il est composé de trois groupes de capture. Le premier correspond aux lettres de l'alphabet (majuscules et minuscules), aux nombres et à une série de symboles acceptés. En raison de l + quantificateur, ce groupe correspond à une chaîne composée d'au moins un caractère.
Ensuite, il y a la @ symbole, ce qui est bien sûr requis dans chaque adresse e-mail. Le deuxième groupe accepte uniquement les lettres, les chiffres et les traits d'union. La longueur doit également être d'au moins un (]+).
Enfin, il y a le dernier groupe, qui contient un point et dont le but est de faire correspondre les sous-domaines et le TLD. Son quantificateur est une étoile, *, ce qui signifie que ce groupe recherche une chaîne dont la longueur peut être zéro ou plus. En fait, les adresses e-mail avec un domaine, mais pas de TLD, sont réellement valides.
Puisque nous voulons valider un Chaîne, nous devons compter sur Modèle et Matcher cours, inclus dans le java.util.regex paquet. Importez ces classes dans votre activité, puis implémentez la méthode suivante:
private static final Chaîne EMAIL_PATTERN = "^ [a-zA-Z0-9 # _ ~! $ & '() * +,; =:. \" (),:; <> @ \\ [\\] \\ \\] + @ [a-zA-Z0-9 -] + (\\. [a-zA-Z0-9 -] +) $ "; private Pattern pattern = Pattern.compile (EMAIL_PATTERN); matcher privé Matcher ; public boolean validateEmail (email string) matcher = pattern.matcher (email); return matcher.matches ();
La validation du champ mot de passe est beaucoup plus simple. La plupart des organisations implémentent différentes stratégies pour la validité des mots de passe, mais tout le monde impose une longueur minimale. Une règle raisonnable est que le mot de passe ne doit jamais être inférieur à six caractères.
public boolean validatePassword (Mot de passe de la chaîne) return password.length ()> 5;
Comme j'ai dit, TextInputLayout est juste une enveloppe, mais contrairement à LinearLayout et ScrollView, vous pouvez obtenir son élément enfant en utilisant une méthode spécifique, getEditText. Il n'y a pas besoin d'utiliser findViewById.
Si TextInputLayout ne contient pas de Éditer le texte, getEditText résultats nul alors méfiez-vous d'un NullPointException.
vide publique onClick (Afficher v) hideKeyboard (); String username = usernameWrapper.getEditText (). GetText (). ToString (); String password = usernameWrapper.getEditText (). GetText (). ToString (); // TODO: Vérifications // TODO: Connexion
TextInputLayout la gestion des erreurs est facile et rapide. Les méthodes requises sont setErrorEnabled et setError.
setError définit un message d'erreur rouge qui sera affiché sous le Éditer le texte. Si le paramètre passé est nul, le message d'erreur est effacé. Cela change aussi la couleur de l'ensemble Éditer le texte widget à rouge.
setErrorEnabled active la fonctionnalité d'erreur. Cela affecte directement la taille de la mise en page, en augmentant le remplissage inférieur pour laisser de la place au libellé d'erreur. Activer cette fonctionnalité avant de définir un message d'erreur via setError signifie que cette disposition ne changera pas de taille lorsqu'une erreur est affichée. Vous devriez faire des tests en combinant ces deux méthodes afin de voir réellementde quoi je parle.
Un autre fait intéressant est que si la fonctionnalité d'erreur n'a pas encore été activée et que vous appelez setError passer un paramètre non nul, puis setErrorEnabled (true) sera appelé automatiquement.
Maintenant que nous avons défini ce qui est juste et ce qui ne va pas, et que nous savons comment récupérer des données et afficher les erreurs possibles, la mise en œuvre de la sur clic la méthode devient triviale.
vide publique onClick (Afficher v) hideKeyboard (); String username = usernameWrapper.getEditText (). GetText (). ToString (); String password = usernameWrapper.getEditText (). GetText (). ToString (); if (! validateEmail (nom d'utilisateur)) usernameWrapper.setError ("Adresse électronique non valide!"); else if (! validatePassword (password)) passwordWrapper.setError ("Ce n'est pas un mot de passe valide!"); else usernameWrapper.setErrorEnabled (false); passwordWrapper.setErrorEnabled (false); doLogin (); J'ai ajouté un doLogin méthode, mais elle est actuellement vide, car elle dépasse le cadre de ce tutoriel..
public void doLogin () Toast.makeText (getApplicationContext (), "OK! Je suis en train de me connecter.", Toast.LENGTH_SHORT) .show (); // TODO: procédure de connexion; pas dans le cadre de ce tutoriel.
Vous voudrez peut-être faire une dernière chose, changer la couleur de la TextInputLayout widget. Par défaut, le AppCompact le thème le met au vert, mais assez souvent cette couleur est en conflit avec votre palette de couleurs.
Google a très bien écrit la Design Support Library. La couleur de chaque widget est tirée directement des couleurs du thème, spécifiées dans votre style.xml fichier. Ouvrez-le et ajoutez le colorAccent élément de votre thème actif pour changer la palette de couleurs du formulaire.
Dans ce tutoriel, nous avons vu comment implémenter le nouvel élément de présentation TextInputLayout, grâce à la bibliothèque de support à la conception récemment introduite.
Le paradigme de conception mis en œuvre par ce widget permet aux utilisateurs de ne jamais perdre le contexte des informations qu'ils saisissent. Il a en fait été introduit par Google l'année dernière, avec Material Design..
À ce moment-là, il n'existait aucune bibliothèque de support offrant aux développeurs la possibilité de mettre ce widget en action dans leurs projets, jusqu'à Google I / O 2015. Désormais, si votre application attend une sorte de saisie de données, vous serez enfin véritablement conforme à la conception..
