Android
Éditer le texte

Travailler avec EditTexts

EditText est le widget de saisie de texte standard dans les applications Android. Si l'utilisateur doit entrer du texte dans une application, c'est le principal moyen de le faire.

Éditer le texte

De nombreuses propriétés importantes peuvent être définies pour personnaliser le comportement d'un EditText. Plusieurs d'entre eux sont énumérés ci-dessous. Consultez le guide des champs de texte officiels pour encore plus de détails sur les champs de saisie.

Usage

Un EditText est ajouté à une présentation avec tous les comportements par défaut avec le code XML suivant:

<EditText
    android:id="@+id/et_simple"
    android:layout_height="wrap_content"
    android:layout_width="match_parent">
</EditText>

Notez qu'un EditText est simplement une mince extension de TextView et hérite de toutes les mêmes propriétés.

Récupération de la valeur

Pour obtenir la valeur du texte entré dans un EditText, procédez comme suit:

EditText simpleEditText = (EditText) findViewById(R.id.et_simple);
String strValue = simpleEditText.getText().toString();

Personnalisation de l'entrée supplémentaire

Nous pourrions vouloir limiter l'entrée à une seule ligne de texte (éviter les nouvelles lignes):

<EditText
  android:singleLine="true"
  android:lines="1"
/>

Vous pouvez limiter les caractères pouvant être saisis dans un champ en utilisant l'attribut digits:

<EditText
  android:inputType="number"
  android:digits="01"
/>

Cela limiterait les chiffres entrés à seulement "0" et "1". Nous pourrions vouloir limiter le nombre total de caractères avec:

<EditText
  android:maxLength="5"
/>

En utilisant ces propriétés, nous pouvons définir le comportement d'entrée attendu pour les champs de texte.

Réglage des couleurs

Vous pouvez ajuster la couleur d'arrière-plan de mise en évidence du texte sélectionné dans un EditText avec la propriété android:textColorHighlight :

<EditText
    android:textColorHighlight="#7cff88"
/>

Affichage des indicateurs d'espace réservé

Vous souhaiterez peut-être définir l'indicateur pour le contrôle EditText afin d'inviter un utilisateur pour une entrée spécifique avec:

<EditText
    ...
    android:hint="@string/my_hint">
</EditText>

Astuces

Changer la couleur de la ligne du bas

En supposant que vous utilisez la bibliothèque AppCompat, vous pouvez remplacer les styles colorControlNormal, colorControlActivated et colorControlHighlight:

<style name="Theme.App.Base" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorControlNormal">#d32f2f</item>
    <item name="colorControlActivated">#ff5722</item>
    <item name="colorControlHighlight">#f44336</item>
</style>

Si vous ne voyez pas ces styles appliqués dans un DialogFragment, il existe un bogue connu lors de l'utilisation de LayoutInflater passé dans la méthode onCreateView ().

Le problème a déjà été résolu dans la bibliothèque AppCompat v23. Voir ce guide sur la mise à niveau. Une autre solution temporaire consiste à utiliser le composant inflater layout au lieu de celui passé dans la méthode onCreateView ():

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = getActivity().getLayoutInflater().inflate(R.layout.dialog_fragment, container);
  }

Écoute de l'entrée EditText

Consultez les cliffnotes des écouteurs d'événement de base pour savoir comment écouter les modifications apportées à un EditText et effectuer une action lorsque ces modifications se produisent.

Affichage des commentaires sur les étiquettes flottantes

Traditionnellement, EditText masque le message de conseil (expliqué ci-dessus) après que l'utilisateur commence à taper. De plus, tout message d'erreur de validation devait être géré manuellement par le développeur.

Avec TextInputLayout vous pouvez configurer une étiquette flottante pour afficher les indicateurs et les messages d'erreur. Vous pouvez trouver plus de détails ici .

Personnalisation du InputType

Les champs de texte peuvent avoir différents types d'entrée, tels que le numéro, la date, le mot de passe ou l'adresse électronique. Le type détermine quels types de caractères sont autorisés dans le champ et peut inviter le clavier virtuel à optimiser sa disposition pour les caractères fréquemment utilisés.

Par défaut, tout contenu de texte dans un contrôle EditText est affiché en texte brut. En définissant l'attribut inputType , nous pouvons faciliter la saisie de différents types d'informations, tels que les numéros de téléphone et les mots de passe:

<EditText
    ...
    android:inputType="phone">
</EditText>

Les types d’entrée les plus courants sont les suivants:

L' android:inputType vous permet également de spécifier certains comportements de clavier, tels que la mise en majuscule de tous les nouveaux mots ou l'utilisation de fonctionnalités telles que la android:inputType automatique et les suggestions d'orthographe.
Voici certaines des valeurs de type d'entrée courantes qui définissent les comportements du clavier:

Vous pouvez définir plusieurs attributs inputType si nécessaire (séparés par '|').
Exemple:

<EditText
    android:id="@+id/postal_address"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:hint="@string/postal_address_hint"
    android:inputType="textPostalAddress|
                       textCapWords|
                       textNoSuggestions" />

Vous pouvez voir une liste de tous les types d'entrées disponibles ici .

Attribut `inputype`

attribut inputype dans le widget EditText : (testé sur Android 4.4.3 et 2.3.3)

<EditText android:id="@+id/et_test" android:inputType="?????"/>

textLongMessage = Clavier: alphabet / default. Bouton Entrée: Envoyer / Suivant. Emotion: oui. Cas: minuscule. Suggestion: oui. Ajouter. carbonise: et. et tout

textFilter = Clavier: alphabet / default. Bouton Entrée: Envoyer / Suivant. Emotion: oui. Cas: minuscule. Suggestion: non . Ajouter. carbonise: et. et tout

textCapWords = Clavier: alphabet / default. Bouton Entrée: Envoyer / Suivant. Emotion: oui. Affaire: Affaire Camel . Suggestion: oui. Ajouter. carbonise: et. et tout

textCapSentences = Clavier: alphabet / default. Bouton Entrée: Envoyer / Suivant. Emotion: oui. Cas: cas de phrase . Suggestion: oui. Ajouter. carbonise: et. et tout

time = Clavier: numérique. Bouton Entrée: Envoyer / Suivant. Emotion: non. Cas: -. Suggestion: non . Ajouter. caractères::

textMultiLine = Clavier: alphabet / default. Bouton Enter: nextline . Emotion: oui. Cas: minuscule. Suggestion: oui. Ajouter. carbonise: et. et tout

number = Clavier: numérique . Bouton Entrée: Envoyer / Suivant. Emotion: non. Cas: -. Suggestion: non. Ajouter. caractères: rien

textEmailAddress = Clavier: alphabet / default. Bouton Entrée: Envoyer / Suivant. Emotion: non . Cas: minuscule. Suggestion: non . Ajouter. caractères: @ et . et tout

(Aucun type) = Clavier: alphabet / default. Bouton Enter: nextline . Emotion: oui. Cas: minuscule. Suggestion: oui. Ajouter. carbonise: et. et tout

textPassword = Clavier: alphabet / default. Bouton Entrée: Envoyer / Suivant. Emotion: non. Cas: minuscule. Suggestion: non . Ajouter. carbonise: et. et tout

text = Clavier: Clavier: alphabet / default. Bouton Entrée: Envoyer / Suivant. Emotion: oui. Cas: minuscule. Suggestion: oui. Ajouter. carbonise: et. et tout

textShortMessage = Clavier: alphabet / default. Bouton Entrée: émotion . Emotion: oui. Cas: minuscule. Suggestion: oui. Ajouter. carbonise: et. et tout

textUri = Clavier: alphabet / default. Bouton Entrée: Envoyer / Suivant. Emotion: non. Cas: minuscule. Suggestion: non . Ajouter. caractères: / et . et tout

textCapCharacters = Clavier: alphabet / default. Bouton Entrée: Envoyer / Suivant. Emotion: oui. Case: UPPERCASE . Suggestion: oui. Ajouter. carbonise: et. et tout

phone = Clavier: numérique . Bouton Entrée: Envoyer / Suivant. Emotion: non. Cas: -. Suggestion: non . Ajouter. caractères: *** #. - / () WPN, + **

textPersonName = Clavier: alphabet / default. Bouton Entrée: Envoyer / Suivant. Emotion: oui. Cas: minuscule. Suggestion: oui. Ajouter. carbonise: et. et tout


Remarque: le paramètre de mise en Auto-capitalization modifiera le comportement par défaut.

Remarque 2: Dans le Numeric keyboard , TOUS les numéros sont en anglais 1234567890.

Remarque 3: Correction/Suggestion paramètre Correction/Suggestion changera le comportement par défaut.

Cacher SoftKeyboard

Le masquage du tableau de touches est généralement une exigence de base lorsque vous travaillez avec EditText. Le panneau de touches par défaut ne peut être fermé qu'en appuyant sur le bouton et la plupart des développeurs utilisent InputMethodManager pour forcer Android à masquer le clavier virtuel appelant hideSoftInputFromWindow et en transmettant le jeton de la fenêtre contenant votre vue focalisée. Le code pour effectuer les opérations suivantes:

public void hideSoftKeyboard()    
{
        InputMethodManager inputMethodManager = (InputMethodManager) getSystemService(Activity.INPUT_METHOD_SERVICE);
        inputMethodManager.hideSoftInputFromWindow(getCurrentFocus().getWindowToken(), 0);    
}

Le code est direct, mais un autre problème majeur est que la fonction hide doit être appelée lorsqu'un événement se produit. Que faire lorsque vous avez besoin du tableau de touches lorsque vous appuyez ailleurs que sur votre EditText? Le code suivant donne une fonction ordonnée qui doit être appelée dans votre méthode onCreate () une seule fois.

public void setupUI(View view) 
{
        String s = "inside";
        //Set up touch listener for non-text box views to hide keyboard.
        if (!(view instanceof EditText)) {

            view.setOnTouchListener(new View.OnTouchListener() {

                public boolean onTouch(View v, MotionEvent event) {
                    hideSoftKeyboard();
                    return false;
                }

            });
        }

        //If a layout container, iterate over children and seed recursion.
        if (view instanceof ViewGroup) {

            for (int i = 0; i < ((ViewGroup) view).getChildCount(); i++) {

                View innerView = ((ViewGroup) view).getChildAt(i);

                setupUI(innerView);
            }
        }    
}

Icône ou bouton dans Custom Edit Text et son action et cliquez sur auditers.

Cet exemple aidera à avoir le texte d'édition avec l'icône sur le côté droit.

Remarque: Dans ce cas, j'utilise setCompoundDrawablesWithIntrinsicBounds, donc si vous souhaitez modifier la position de l'icône, vous pouvez obtenir la même chose avec setCompoundDrawablesWithIntrinsicBounds dans setIcon.

public class MKEditText extends AppCompatEditText {

    public interface IconClickListener {
        public void onClick();
    }

    private IconClickListener mIconClickListener;

    private static final String TAG = MKEditText.class.getSimpleName();

    private final int EXTRA_TOUCH_AREA = 50;
    private Drawable mDrawable;
    private boolean touchDown;

    public MKEditText(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public MKEditText(Context context) {
        super(context);
    }

    public MKEditText(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public void showRightIcon() {
        mDrawable = ContextCompat.getDrawable(getContext(), R.drawable.ic_android_black_24dp);

        setIcon();
    }

    public void setIconClickListener(IconClickListener iconClickListener) {
        mIconClickListener = iconClickListener;
    }

    private void setIcon() {
        Drawable[] drawables = getCompoundDrawables();

        setCompoundDrawablesWithIntrinsicBounds(drawables[0], drawables[1], mDrawable, drawables[3]);

        setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
        setSelection(getText().length());
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        final int right = getRight();
        final int drawableSize = getCompoundPaddingRight();
        final int x = (int) event.getX();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                if (x + EXTRA_TOUCH_AREA >= right - drawableSize && x <= right + EXTRA_TOUCH_AREA) {
                    touchDown = true;
                    return true;
                }
                break;
            case MotionEvent.ACTION_UP:
                if (x + EXTRA_TOUCH_AREA >= right - drawableSize && x <= right + EXTRA_TOUCH_AREA && touchDown) {
                    touchDown = false;
                    if (mIconClickListener != null) {
                        mIconClickListener.onClick();
                    }
                    return true;
                }
                touchDown = false;
                break;

        }
        return super.onTouchEvent(event);
    }
}

Si vous souhaitez modifier la zone tactile, vous pouvez modifier les valeurs EXTRA_TOUCH_AREA par défaut que j'ai données comme 50.

Et pour activer le bouton et cliquer sur auditeur, vous pouvez appeler à partir de votre activité ou fragment comme ceci,

MKEditText mkEditText = (MKEditText) findViewById(R.id.password);
mkEditText.showRightIcon();
mkEditText.setIconClickListener(new MKEditText.IconClickListener() {
            @Override
            public void onClick() {
              // You can do action here for the icon.
               
            }
        });