Wie erstelle ich EditText mit der Kreuztaste (x) am Ende?

Gibt es ein Widget, EditTextdas eine Kreuzschaltfläche enthält, oder gibt es eine Eigenschaft, für EditTextdie es automatisch erstellt wird? Ich möchte, dass die Kreuztaste den eingegebenen Text löscht EditText.

Verwenden Sie das folgende Layout:

<FrameLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="9dp"
    android:padding="5dp">

    <EditText
        android:id="@+id/calc_txt_Prise"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:inputType="numberDecimal"  
        android:layout_marginTop="20dp"
        android:textSize="25dp"
        android:textColor="@color/gray"
        android:textStyle="bold"
        android:hint="@string/calc_txt_Prise"
        android:singleLine="true" />

    <Button
        android:id="@+id/calc_clear_txt_Prise"      
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:layout_gravity="right|center_vertical"
        android:background="@drawable/delete" />

</FrameLayout>

Sie können auch die ID der Schaltfläche verwenden und die gewünschte Aktion für die onClickListener-Methode ausführen.

Wenn Sie zufällig DroidParts verwenden , habe ich gerade ClearableEditText hinzugefügt .

So sieht es mit einem benutzerdefinierten Hintergrund und einem klaren Symbol abs__ic_clear_holo_lightaus ActionBarSherlock aus :

2020-Lösung über Material Design Components für Android:

Fügen Sie Ihrem Gradle-Setup Materialkomponenten hinzu:

Suchen Sie hier nach der neuesten Version: https://maven.google.com/

implementation 'com.google.android.material:material:1.1.0'

Wenn Sie nicht auf AndroidX-Bibliotheken aktualisiert wurden, können Sie dies folgendermaßen hinzufügen:

implementation 'com.android.support:design:28.0.0'

Dann

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/hint_text"
    app:endIconMode="clear_text">

  <com.google.android.material.textfield.TextInputEditText
      android:layout_width="match_parent"
      android:layout_height="wrap_content"/>

</com.google.android.material.textfield.TextInputLayout>

Beachten Sie : app: endIconMode = "clear_text"

Wie hier beschrieben. Materialdesign-Dokumente

Dies ist eine Kotlin-Lösung. Fügen Sie diese Hilfsmethode in eine Kotlin-Datei ein.

fun EditText.setupClearButtonWithAction() {

    addTextChangedListener(object : TextWatcher {
        override fun afterTextChanged(editable: Editable?) {
            val clearIcon = if (editable?.isNotEmpty() == true) R.drawable.ic_clear else 0
            setCompoundDrawablesWithIntrinsicBounds(0, 0, clearIcon, 0)
        }

        override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) = Unit
        override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) = Unit
    })

    setOnTouchListener(View.OnTouchListener { _, event ->
        if (event.action == MotionEvent.ACTION_UP) {
            if (event.rawX >= (this.right - this.compoundPaddingRight)) {
                this.setText("")
                return@OnTouchListener true
            }
        }
        return@OnTouchListener false
    })
}

Und dann verwenden Sie es wie folgt in der onCreateMethode und Sie sollten gut zu gehen sein-

yourEditText.setupClearButtonWithAction()

Übrigens müssen Sie R.drawable.ic_clearzuerst das Symbol hinzufügen oder löschen. Dieser stammt von google- https://material.io/tools/icons/?icon=clear&style=baseline

Android Support-Bibliothek hat eine SearchView Klasse, die genau dies tut. (Nicht abgeleitet von EditText, muss also a SearchView.OnQueryTextListeneranstelle von a verwenden TextWatcher)

Verwenden Sie in XML wie folgt:

  <android.support.v7.widget.SearchView
            android:id="@+id/searchView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:iconifiedByDefault="false"
            android:queryHint="@string/SearchHint"
            app:iconifiedByDefault="false"
            app:queryHint="@string/SearchHint" />

Drawable x = getResources().getDrawable(R.drawable.x);
x.setBounds(0, 0, x.getIntrinsicWidth(), x.getIntrinsicHeight());
mEditText.setCompoundDrawables(null, null, x, null);

wo x ist:

Für drawable resourceSie können Standard-Android-Bilder verwenden:

http://androiddrawables.com/Menu.html

Zum Beispiel :

android:background="@android:drawable/ic_menu_close_clear_cancel"

Wenn Sie keine benutzerdefinierten Ansichten oder speziellen Layouts verwenden möchten, können Sie die Schaltfläche (X) mit 9 Patches erstellen.

Beispiel: http://postimg.org/image/tssjmt97p/ (Ich habe nicht genügend Punkte, um Bilder auf StackOverflow zu veröffentlichen.)

Der Schnittpunkt der rechten und unteren schwarzen Pixel repräsentiert den Inhaltsbereich. Alles außerhalb dieses Bereichs ist gepolstert. Um festzustellen, dass der Benutzer auf das x geklickt hat, können Sie einen OnTouchListener wie folgt einstellen:

editText.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                if (motionEvent.getAction() == MotionEvent.ACTION_UP){
                    if (motionEvent.getX()>(view.getWidth()-view.getPaddingRight())){
                        ((EditText)view).setText("");
                    }
                }
                return false;
            }
        });

Je nach Ihren Anforderungen kann diese Lösung in einigen Fällen besser funktionieren. Ich ziehe es vor, meine XML weniger kompliziert zu halten. Dies ist auch hilfreich, wenn Sie links ein Symbol haben möchten, da Sie es einfach in den 9-Patch aufnehmen können.

Ich habe den UI-Teil wie folgt gemacht:

<RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:layout_marginTop="9dp"
            android:padding="5dp">

            <EditText
                android:id="@+id/etSearchToolbar"
                android:layout_width="fill_parent"
                android:layout_height="match_parent"
                android:textSize="13dp"
                android:padding="10dp"
                android:textColor="@android:color/darker_gray"
                android:textStyle="normal"
                android:hint="Search"
                android:imeOptions="actionSearch"
                android:inputType="text"
                android:background="@drawable/edittext_bg"
                android:maxLines="1" />

            <ImageView
                android:id="@+id/ivClearSearchText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginRight="6dp"
                android:src="@drawable/balloon_overlay_close"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true" />


        </RelativeLayout>

edittext_bg.xml

<?xml version="1.0" encoding="utf-8"?>

<solid android:color="#FFFFFF" />

<stroke
    android:width="1dp"
    android:color="#C9C9CE" />

<corners
    android:bottomLeftRadius="15dp"
    android:bottomRightRadius="15dp"
    android:topLeftRadius="15dp"
    android:topRightRadius="15dp" />

balloon_overlay_close.png

Cross / Clear-Taste ein- / ausblenden:

searchBox.addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {}

        @Override
        public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            if(charSequence.length() > 0){
                clearSearch.setVisibility(View.VISIBLE);
            }else{
                clearSearch.setVisibility(View.GONE);
            }
        }

        @Override
        public void afterTextChanged(Editable editable) {}
    });

Behandeln Sie Suchanfragen (dh wenn der Benutzer auf die Suche über die Softkey-Tafel klickt)

searchBox.setOnEditorActionListener(new TextView.OnEditorActionListener() {
        @Override
        public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
            if (actionId == EditorInfo.IME_ACTION_SEARCH) {
                String contents = searchBox.getText().toString().trim();
                if(contents.length() > 0){
                    //do search

                }else
                    //if something to do for empty edittext

                return true;
            }
            return false;
        }
    });`

Clear / Cross-Taste

  clearSearch.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            searchBox.setText("");
        }
    });

Verwenden

android:drawableRight="@android:drawable/ic_input_delete"

Hier ist die vollständige Bibliothek mit dem Widget: https://github.com/opprime/EditTextField

Um es zu verwenden, sollten Sie die Abhängigkeit hinzufügen:

compile 'com.optimus:editTextField:0.2.0'

In der Datei layout.xml können Sie mit den Widget-Einstellungen spielen:

xmlns:app="http://schemas.android.com/apk/res-auto"

• app: clearButtonMode ， can hat solche Werte: niemals immer während der Bearbeitung, außer bei der Bearbeitung

• App: clearButtonDrawable

Beispiel in Aktion:

Setzen Sie einfach ein enges Kreuz wie drawableEndin Ihrem EditText:

<EditText
     ...
    android:drawableEnd="@drawable/ic_close"
    android:drawablePadding="8dp"
     ... />

und verwenden Sie die Erweiterung , um mit dem Klicken umzugehen (oder verwenden Sie sie OnTouchListenerdirekt auf Ihrem EditText):

fun EditText.onDrawableEndClick(action: () -> Unit) {
    setOnTouchListener { v, event ->
        if (event.action == MotionEvent.ACTION_UP) {
            v as EditText
            val end = if (v.resources.configuration.layoutDirection == View.LAYOUT_DIRECTION_RTL)
                v.left else v.right
            if (event.rawX >= (end - v.compoundPaddingEnd)) {
                action.invoke()
                return@setOnTouchListener true
            }
        }
        return@setOnTouchListener false
    }
}

Verwendung der Erweiterung:

editText.onDrawableEndClick {
    // TODO clear action
    etSearch.setText("")
}

Sie können dieses Snippet mit Jaydip-Antwort für mehr als eine Schaltfläche verwenden. Rufen Sie es einfach auf, nachdem Sie einen Verweis auf die ET- und Button-Elemente erhalten haben. Ich habe die vecotr-Schaltfläche verwendet, daher müssen Sie das Button-Element in ImageButton ändern:

private void setRemovableET(final EditText et, final ImageButton resetIB) {

        et.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View v, boolean hasFocus) {
                if (hasFocus && et.getText().toString().length() > 0)
                    resetIB.setVisibility(View.VISIBLE);
                else
                    resetIB.setVisibility(View.INVISIBLE);
            }
        });

        resetIB.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                et.setText("");
                resetIB.setVisibility(View.INVISIBLE);
            }
        });

        et.addTextChangedListener(new TextWatcher() {
            @Override
            public void afterTextChanged(Editable s) {}
            @Override
            public void beforeTextChanged(CharSequence s, int start,
                                          int count, int after) {
            }
            @Override
            public void onTextChanged(CharSequence s, int start,
                                      int before, int count) {
                if(s.length() != 0){
                    resetIB.setVisibility(View.VISIBLE);
                }else{
                    resetIB.setVisibility(View.INVISIBLE);
                }
            }
        });
    }

Wenn Sie sich im Rahmenlayout befinden oder ein Rahmenlayout erstellen können, habe ich einen anderen Ansatz ausprobiert.

<TextView
    android:id="@+id/inputSearch"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:drawableRight="@drawable/ic_actionbar"
    android:layout_alignParentBottom="true"
    android:layout_toRightOf="@+id/back_button"/>

<Button
    android:id="@+id/clear_text_invisible_button"
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:layout_gravity="right|center_vertical"
    android:background="@color/transparent"
    android:layout_alignBaseline="@+id/inputSearch"
    android:layout_alignBottom="@+id/inputSearch"
    android:layout_alignRight="@+id/inputSearch"
    android:layout_alignEnd="@+id/inputSearch"
    android:layout_marginRight="13dp"
    />

Dies ist ein Bearbeitungstext, bei dem ich ein Kreuzsymbol als rechts zeichnbares Zeichen und dann eine transparente Schaltfläche zum Löschen von Text eingefügt habe.

    <EditText
    android:id="@+id/idSearchEditText"
    android:layout_width="match_parent"
    android:layout_height="@dimen/dimen_40dp"
    android:drawableStart="@android:drawable/ic_menu_search"
    android:drawablePadding="8dp"
    android:ellipsize="start"
    android:gravity="center_vertical"
    android:hint="Search"
    android:imeOptions="actionSearch"
    android:inputType="text"
    android:paddingStart="16dp"
    android:paddingEnd="8dp"
/>

EditText mSearchEditText = findViewById(R.id.idSearchEditText);
mSearchEditText.addTextChangedListener(this);
mSearchEditText.setOnTouchListener(this);


@Override
public void afterTextChanged(Editable aEditable) {
    int clearIcon = android.R.drawable.ic_notification_clear_all;
    int searchIcon = android.R.drawable.ic_menu_search;
    if (aEditable == null || TextUtils.isEmpty(aEditable.toString())) {
        clearIcon = 0;
        searchIcon = android.R.drawable.ic_menu_search;
    } else {
        clearIcon = android.R.drawable.ic_notification_clear_all;
        searchIcon = 0;
    }
    Drawable leftDrawable =  null;
    if (searchIcon != 0) {
        leftDrawable = getResources().getDrawable(searchIcon);
    }
    Drawable rightDrawable = null;
    if (clearIcon != 0) {
        rightDrawable = getResources().getDrawable(clearIcon);
    }

    mSearchEditText.setCompoundDrawablesWithIntrinsicBounds(leftDrawable, null, rightDrawable, null);
}


@Override
public boolean onTouch(View aView, MotionEvent aEvent) {
    if (aEvent.getAction() == MotionEvent.ACTION_UP){
        if (aEvent.getX() > ( mSearchEditText.getWidth() - 
         mSearchEditText.getCompoundPaddingEnd())){
            mSearchEditText.setText("");
        }
    }
    return false;
}