Conception d'interface utilisateur Android Contrôles EditText

Dans ce didacticiel, vous apprendrez à créer des commandes de base Android EditText pour recueillir les entrées de texte de l'utilisateur. Ensuite, vous apprendrez à configurer, mettre en forme et manipuler ces contrôles de différentes manières..

Ce tutoriel vous montre les étapes à suivre pour créer un certain nombre de contrôles EditText différents dans votre application Android. Tout d'abord, vous apprendrez à ajouter des contrôles de saisie de texte de base à vos fichiers de présentation et à définir leurs attributs les plus utiles. Ensuite, vous apprendrez à récupérer le contenu du contrôle de texte. Enfin, nous discutons de certaines des autres fonctionnalités disponibles pour le contrôle EditText dans Android.

Le SDK Android comprend un contrôle de texte modifiable simple à utiliser dans vos modèles: EditText (android.widget.EditText). Un bon exemple d'utilisation du contrôle EditText serait de collecter des entrées de formulaire, telles que "Entrez un nom:" ou "Entrez un mot de passe:".

La figure 1 montre un exemple d'écran comportant de nombreux contrôles EditText différents..

Étape 1: Créer une application Android

Commencez par créer un projet Android. Implémentez votre application Android comme d'habitude. Une fois le projet configuré et l'application en cours d'exécution, déterminez dans quel écran vous souhaitez ajouter des contrôles. Peut-être avez-vous simplement créé un nouveau projet Android avec son activité et sa présentation par défaut (main.xml). Cela fonctionnera pour cet exercice. Une fois que votre projet Android est configuré, vous êtes prêt à poursuivre avec ce tutoriel..

Étape 2: Ajout d'un contrôle EditText à une mise en page

Les contrôles EditText sont généralement inclus dans le fichier de ressources de présentation de votre activité. Par exemple, pour ajouter un contrôle EditText à la ressource de présentation main.xml associée à votre application, vous devez modifier le fichier de présentation. Vous pouvez le faire dans Eclipse à l'aide du concepteur de ressources de mise en page ou en modifiant directement le code XML. Les contrôles peuvent également être créés par programme et ajoutés à votre écran lors de l'exécution. Créez simplement un contrôle EditText (android.widget.EditText) et ajoutez-le à votre mise en page dans votre activité..

Pour ajouter un contrôle EditText à un fichier de ressources de structure, ouvrez le fichier de structure /res/layout/main.xml faisant partie de votre projet Android. Cliquez sur le LinearLayout (ou le contrôle de disposition parent) auquel vous souhaitez ajouter le contrôle EditText. Dans Eclipse à partir du concepteur de ressources de présentation graphique, vous pouvez sélectionner le contrôle EditText et le faire glisser dans la présentation parent..

Pour configurer l'apparence et le comportement du contrôle EditText, ajustez les attributs du contrôle en sélectionnant le contrôle (dans l'onglet Structure ou dans la fenêtre Aperçu) et en modifiant ses attributs, comme indiqué dans l'onglet Propriétés. Vous pouvez également éditer le XML directement.

Voici à quoi ressemble la définition XML d'un contrôle EditText très basique:

  

Attributs spécifiques des contrôles EditText dont vous souhaitez être au courant:

  • Attribuez un nom unique au contrôle EditText à l'aide de la propriété id. C'est l'identifiant que vous devrez utiliser pour récupérer par programme la valeur de ce contrôle..
  • Définissez les propriétés de hauteur et de largeur de présentation du contrôle comme il convient.
  • La classe EditText est dérivée de la classe TextView. Par conséquent, la plupart des attributs de contrôle TextView statiques (et les méthodes associées) s'appliquent toujours. Par exemple, vous pouvez définir tout autre attribut souhaité pour ajuster l'apparence du contrôle. Par exemple, ajustez la taille du texte, la couleur, la police ou d'autres paramètres de style pour le contrôle EditText.

Discutons des attributs les plus courants pour les contrôles EditText..

Étape 3: récupération de la valeur d'un contrôle EditText par programme

Pour récupérer la valeur d'un contrôle EditText à partir de votre activité, vous pouvez utiliser la méthode getText () de la classe EditText. Par exemple, le code suivant récupère un descripteur du contrôle EditText défini en tant que editTextSimple:

 final EditText simpleEditText = (EditText) findViewById (R.id.editTextSimple); String strValue = simpleEditText.getText (). ToString ();

Étape 4: Surveillance d'un contrôle EditText pour les actions

Vous souhaitez normalement récupérer le contenu de EditText, ainsi que d'autres contrôles de formulaire lors d'un événement spécifique. Souvent, ce type de collecte d'informations est déclenché lorsque l'utilisateur appuie sur un bouton (par exemple, OK ou Soumettre) ou sur le bouton Précédent..

Cependant, vous pouvez surveiller de plus près des contrôles comme EditText si vous le souhaitez en utilisant les écouteurs de contrôle de vue typiques..

En règle générale, l’écoute d’événements tels que:

1. Lorsqu'un utilisateur clique sur le contrôle. Dans ce cas, enregistrez un écouteur à l'aide de la méthode setOnClickListener ()..

1. Lorsqu'un utilisateur clique longuement sur le contrôle. Dans ce cas, enregistrez un écouteur à l'aide de la méthode setOnLongClickListener ()..

1. Lorsqu'un utilisateur appuie sur une touche du contrôle. Dans ce cas, enregistrez un écouteur à l'aide de la méthode setOnKeyListener ()..

1. Lorsqu'un utilisateur modifie le focus vers ou depuis le contrôle. Dans ce cas, enregistrez un écouteur à l'aide de la méthode setOnFocusChangedListener ()..

Regardons l'exemple de changement de focus. Lorsque le contrôle obtient le focus pour la première fois, vous verrez un événement de changement de focus. Une fois que l'utilisateur se détourne de ce contrôle, vous le verrez à nouveau. Voici un exemple de surveillance du contenu d'un contrôle EditText sur les changements de focus dans votre classe d'activité:

 final EditText simpleEditText = (EditText) findViewById (R.id.editTextSimple); simpleEditText.setOnFocusChangeListener (new OnFocusChangeListener () public void onFocusChange (Voir v, boolean hasFocus) String strValue = simpleEditText.getText (). toString (); Log.d (DEBUG_TAG, "User set EditText" à );

Étape 5: collecte de différents types d’entrées

Par défaut, tout contenu de texte dans un contrôle EditText est affiché sous forme de texte brut. Le clavier logiciel par défaut est utilisé pour la saisie de texte brut. Cependant, en définissant un attribut simple appelé inputType, vous pouvez tous faciliter la saisie de différents types d'informations, tels que les numéros de téléphone et les mots de passe. En XML, cette propriété apparaîtra dans votre contrôle EditText comme suit:

 Android: inputType = "phone"

Ou

 android: inputType = "textPassword"

Il existe une grande variété de types d’entrées à des fins différentes. Le type d’entrée du téléphone limitera l’utilisateur à des nombres; le clavier logiciel fournit des options numériques, comme illustré à la figure 2.

De même, la méthode de saisie du mot de passe masque le mot de passe lorsque vous le tapez, comme illustré à la figure 3..

La récupération de cette information à partir du contrôle s'effectue exactement comme si vous collectiez du texte de base, à l'aide de la méthode getText ()..

Étape 6: Définition des indicateurs et des valeurs des contrôles EditText

En règle générale, les contrôles EditText sont utilisés pour collecter les entrées, pas pour les afficher. Cela dit, vous pouvez toujours définir la valeur d'un contrôle EditText à l'aide de la méthode setText (), comme vous le feriez avec un contrôle TextView standard..

Vous pouvez également définir l'indicateur du contrôle EditText pour inviter un utilisateur à saisir une entrée spécifique. Lorsque l'utilisateur tape ce contrôle, l'indice est écrasé. Vous pouvez définir la chaîne de conseil de votre contrôle EditText dans votre présentation à l'aide de l'attribut conseil:

 android: hint = "@ string / hint"

La figure 4 illustre deux contrôles EditText. Le premier a un indice pour inviter l'utilisateur. La seconde définit la valeur (et la couleur du texte - rouge) du contrôle. Ce n'est pas un indice, mais la valeur réelle définie dans le contrôle.

Étape 7: Faciliter la saisie textuelle dans les contrôles EditText

Vous pouvez simplifier la vie de vos utilisateurs en définissant quelques attributs supplémentaires dans vos contrôles EditText. Par exemple, vous pouvez utiliser l'attribut capitalize pour mettre automatiquement en majuscule chaque phrase, mot ou caractère d'un contrôle EditText:

 android: capitalize = "phrases"

Bien que l’option phrases soit probablement la plus populaire, vous pouvez mettre chaque mot en majuscule comme des noms et chaque caractère pour les abréviations à deux lettres..

De même, vous pouvez limiter les caractères pouvant être entrés dans un champ à l'aide de l'attribut digits. Par exemple, vous pouvez limiter un champ numérique à des zéros et à ceux-ci:

 Android: digits = "01"

Par défaut, le curseur s’affiche dans un EditText lors de la saisie. Vous pouvez désactiver le curseur à l'aide de l'attribut cursorVisible, comme suit:

 android: cursorVisible = "false"

Conclusion

Nous n'avons fait qu'effleurer ce que vous pouvez faire avec un contrôle EditText. Les contrôles EditText sont couramment utilisés dans les interfaces utilisateur des applications Android pour recueillir les entrées textuelles de l'utilisateur. Dans ce didacticiel, vous avez appris à créer et à personnaliser des contrôles Android EditText. L'une des fonctionnalités les plus puissantes des contrôles EditText est la possibilité de définir son type inputType afin de collecter du texte, des chiffres, des adresses électroniques et d'autres informations de l'utilisateur. Ces attributs peuvent être mélangés et combinés pour permettre des contrôles d'entrée très souples à l'écran.

à 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!

я я