web-dev-qa-db-fra.com

Android EditText avec une étiquette flottante et un espace réservé différent

Comment puis-je créer un editText qui ressemble à ceci?

 Edit Text with placeholder and label

androidmaterial-design
11
Mohammad Shabaz Moosa

Vous pouvez le faire en utilisant TextInputLayout et EditText.

Voici votre XML:

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

    <EditText
        Android:id="@+id/edit_text"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:inputType="text" />

</Android.support.design.widget.TextInputLayout>

1. Ajoutez l'attribut Android:hint="Label" à TextInputLayout pour afficher ses astuces Label toujours.

2. Définissez par programme les indicateurs EditTextPlaceholder uniquement lorsque EditText est concentré.

Ajoutez les lignes ci-dessous dans votre activité:

    .........
    .................

    final EditText editText = (EditText) findViewById(R.id.edit_text);

    editText.setOnFocusChangeListener(new View.OnFocusChangeListener() {
        @Override
        public void onFocusChange(View view, boolean hasFocus) {
            if (hasFocus) {
                editText.setHint("Placeholder");
            } else {
                editText.setHint("");
            }
        }
    });

    .........
    ..................

OUTPUT:

 enter image description here

J'espère que cela aidera ~

15
Ferdous Ahamed
<Android.support.design.widget.TextInputLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:hint="Label">

    <Android.support.design.widget.TextInputEditText
        Android:hint="Placeholder"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:inputType="textEmailAddress" />

</Android.support.design.widget.TextInputLayout>

Notez que Android:hint="Placeholder" de TextInputEditText est visible en même temps que Android:hint="Label" de TextInputLayout lorsque la vue n'est pas centrée. Vous pouvez effectuer des vérifications supplémentaires dans votre code Java pour afficher et masquer cette étiquette. Ou laissez simplement Android:hint="Placeholder" de TextInputLayout.

Pour changer de couleur, vous devez définir un thème à l'aide de Android:theme="@style/TextLabel pour TextInputLayout et définir votre accent de couleur.

<style name="TextLabel" parent="TextAppearance.AppCompat.Light">
   <item name="colorAccent">@color/yourColor</item>
</style>
4
Florescu Cătălin

Vous pouvez utiliser le code suivant (en kotlin). Il affichera un espace réservé après un délai de 200 ms (pour éviter le chevauchement des indicateurs et des espaces réservés).

class PlaceholderEditText : TextInputEditText {

    constructor(context: Context) : super(context)
    constructor(context: Context, attrs: AttributeSet) : super(context, attrs)
    constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int) : super(context, attrs, defStyleAttr)

    private val placeholder = hint

    init {
        hint = ""
        onFocusChangeListener = OnFocusChangeListener { _, hasFocus ->
            if (hasFocus) {
                postDelayed({ hint = placeholder }, 200)
            } else {
                hint = ""
            }
        }
    }
}

puis dans la classe XML de mise en page:

    <Android.support.design.widget.TextInputLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:hint="ALWAYS VISIBLE LABEL">

        <com.myapp.widget.PlaceholderEditText
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:hint="DISAPPEARING PLACEHOLDER" />

    </Android.support.design.widget.TextInputLayout>
2
tymbark

DONNÉ: Une TextInputEditText imbriquée dans TextInputLayout!

TL; DR !: Utilisez cette fonction d'extension Kotlin

fun EditText.setHintAndLabel(
        textInputLayout: TextInputLayout,
        label: String?, // hint in the TextInputLayout
        hint: String? // hint in the EditText
) {
    this.hint = ""
    textInputLayout.hint = label

    this.onFocusChangeListener = View.OnFocusChangeListener { _, hasFocus ->
        if (hasFocus) {
            this.hint = hint ?: ""
        } else {
            this.hint = ""
        }
    }
}

Quel est le problème et comment le résout-il?

Le problème est que l'indice de la EditText se chevauche s'il y a un indice dans la TextInputLayout. Lequel montrer dans ce cas? Bonne question: nous souhaitons que l'indicateur EditText soit affiché lorsqu'il est activé/le curseur est à l'intérieur, mais l'indicateur TextInputLayout est toujours affiché.

⮑ Donc, nous ne configurons le repère que pour la EditText quand il a le focus et le supprimons une fois le focus perdu ????

0
Langusten Gustel

Vous pouvez utiliser le fichier XML de présentation ci-dessous comme ci-dessous.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:orientation="vertical" Android:layout_width="match_parent"
Android:layout_height="match_parent">
<TextView
    Android:text="Label"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:id="@+id/textView2"
    Android:textColor="@color/wallet_holo_blue_light" />
<EditText
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:inputType="textPersonName"
    Android:text="Name"
    Android:ems="10"
    Android:id="@+id/editText2"
    Android:hint="Placeholder" />
    </LinearLayout>
0
Sri

Si vous utilisez textinputlayout alors que vous vous concentrez sur edittext, vous n’obtenez aucun espace réservé.

Disposition: 

<Android.support.design.widget.TextInputLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content">

    <EditText
        Android:id="@+id/username_txt"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content" />

</Android.support.design.widget.TextInputLayout>

Vous devez définir un auditeur de changement de focus de l'edittext.

Java: 

usernameTxt.setOnFocusChangeListener(new View.OnFocusChangeListener() {
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        if (hasFocus) {
            usernameTxt.setHint("Label");
        } else {
            usernameTxt.setHint("Placeholder");
        }
    }
});
0
Avijit Karmakar