web-dev-qa-db-fra.com

Une étiquette et un indice différents pour TextInputLayout

Je veux créer une EditTextLayout, mais je veux un texte différent pour label et indice.

Par exemple: Le texte de l'étiquette est "Numéro de téléphone" et le texte indicatif est "+ 6281342134".

C'est possible?

Mon code est:

    <Android.support.design.widget.TextInputLayout
        Android:id="@+id/phone_layout"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content">

        <Android.support.design.widget.TextInputEditText
            Android:id="@+id/phone"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:hint="+6281342134"
            Android:inputType="phone" />
    </Android.support.design.widget.TextInputLayout>
androidandroid-textinputlayout
13
mutokenji

J'ai adopté une approche similaire à Rehan

<Android.support.design.widget.TextInputEditText
    Android:id="@+id/edit_text"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"/>


editText.setOnFocusChangeListener(new View.OnFocusChangeListener() {
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        if (hasFocus) {
            inputLayout.setHint("We did it!");
        } else {
            inputLayout.setHint("Testing 123");
        }
    }
});

L'animation était assez bonne pour moi sans la désactiver:

 Example

29
starkej2

Voici comment je le fais sans code (XML uniquement), tout en permettant à la fois une étiquette et un espace réservé, comme indiqué dans les instructions pour la conception de matériel.

Layout XML:

<Android.support.design.widget.TextInputLayout
  Android:layout_width="match_parent"
  Android:layout_height="wrap_content"
  Android:hint="My Label Text">
  <Android.support.design.widget.TextInputEditText
    Android:id="@Android:id/input"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:textColorHint="@drawable/hint_selector"
    Android:hint="Placeholder Text"/>
</Android.support.design.widget.TextInputLayout>

Sélecteur de couleur XML:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
  <item Android:state_focused="true" Android:color="?android:textColorHint" />
  <item Android:color="@Android:color/transparent" />
</selector>

La clé ici est simplement de le rendre transparent par défaut et de n’afficher que le texte d’espace réservé quand il a le focus. Pas besoin de changer de couleur non plus, car cela respectera tous les thèmes personnalisés en place, ainsi que les thèmes clairs et sombres. 

11
ShortFuse

Vous pouvez simplement le faire de cette manière:

<Android.support.design.widget.TextInputLayout
    Android:id="@+id/phone_layout"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:hint="Phone Number">

    <Android.support.design.widget.TextInputEditText
        Android:id="@+id/phone"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:hint="+6281342134"
        Android:inputType="phone"/>
</Android.support.design.widget.TextInputLayout>

Mais cela entraînera un chevauchement des deux indications, à savoir Numéro de téléphone et +6281342134. Vous devez donc implémenter OnFocusChangeListener pour cela. (Pas si bonne solution mais ça va marcher pour vous) .

Dans votre mise en page, ajoutez un indice à TextInputLayout uniquement. J'ai réglé hintAnimationEnabled sur false parce que j'estime que l'animation ne sera peut-être pas fluide avec des astuces différentes.

<Android.support.design.widget.TextInputLayout
    Android:id="@+id/phone_layout"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:hint="Phone Number"
    app:hintAnimationEnabled="false">

    <Android.support.design.widget.TextInputEditText
        Android:id="@+id/phone"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:inputType="phone"/>
</Android.support.design.widget.TextInputLayout>

Dans votre fichier Java, créez OnFocusChangeListener:

private View.OnFocusChangeListener onPhoneNumberFocusChangeListener = new View.OnFocusChangeListener() {
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        if (hasFocus) {
            ((EditText)v).setHint("+6281342134");
        } else {
            ((EditText)v).setHint("");
        }
    }
};

et réglez-le sur votre EditText

phone.setOnFocusChangeListener(onPhoneNumberFocusChangeListener);
4
Rehan

Allez dans le mode d'édition de texte XML et ajoutez ceci à l'edittext:

Android:label="Phone Number"
Android:hint="+6281342134"
0
Robert