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


198

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.


2
Scheint kein Standard-Widget dafür zu sein. Bei einer Google-Suche nach "android edittext clear button x" finden Sie jedoch einige unterschiedliche Ansätze. Ich denke also, "Tasten löschen" nennen sie es. Siehe auch diese Antwort auf eine verwandte Frage: stackoverflow.com/questions/4175398/clear-edittext-on-click/…
HostileFork sagt, vertraue SE

Sie können die Quelle hier herunterladen: github.com/GhOsTTT/editTextXbutton haben einen schönen Tag
Gökhan Musapaşaoğlu 28

Eine andere Frage, die im Wesentlichen ein Duplikat ist ,
Alex Cohn

Antworten:


166

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.


8
Dies ist eine ineffiziente Methode. Yanchenkos Antwort ist der richtige Ansatz, zusammengesetzte Zeichen zu verwenden.
numan salati

4
Wenn Sie sich für diese Lösung entscheiden und feststellen, dass das Bild viel zu stark gedehnt ist, sollten Sie wahrscheinlich einen ImageButton anstelle eines normalen Buttons verwenden.
personne3000

3
Während diese Lösung "ineffizient" ist, ist sie für blinde Benutzer viel zugänglicher. Die Verwendung eines Zeichenzeichens zwingt Ihre Benutzer dazu, sehr komplizierte Vorgänge zum Löschen des Texts auszuführen - etwas, das Benutzer schnell mit der X-Taste tun können.
Daniel Monteiro

2
Was ist die Ineffizienz daran?
Denny

121

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 :

Geben Sie hier die Bildbeschreibung ein


11
Beste Lösung, weil die Klasse erweitert wird EditText. Thx @yanchenko
tbruyelle

2
@ Stephanek. Ich habe dies im Entwicklungszweig behoben und werde Teil der Version 1.4.3 sein.
Yanchenko

4
Vielen Dank! Es wäre allerdings sehr cool, wenn Sie auch eine ClearableAutoCompleteTextView in DroidParts aufnehmen könnten. Für andere Benutzer, die dies ebenfalls versuchen: Verwenden Sie die DroidParts-Bibliothek, kopieren Sie den Code aus ClearableEditText und erweitern Sie einfach AutoCompleteTextView.
RobinDeCroon

2
Das ist Bombe! Sie können es auch eigenständig verwenden, um die TextWatcherAdapter-Abhängigkeit mit einem normalen TextWatcher zu ändern.
Pimentoso

1
@yanchenko Wirf einen Blick auf deine Implementierung. Es scheint, als gäbe es einen kleinen Kompromiss zwischen dem eher kleinen akzeptierten Berührungsbereich und einem Bearbeitungstext mit einer größeren als der Standardhöhe, der Berührungsereignisse entlang der y-Achse innerhalb des Bearbeitungstextes akzeptiert. Ihre Implementierung war die erstere und meine die letztere. Würden Sie unter ähnlichen Umständen empfehlen, dasselbe zu tun? Das heißt, Sie entscheiden sich für ein kleineres Trefferfeld, das möglicherweise falsch gedrückt wurde, oder für ein größeres Trefferfeld, bei dem sich die Drucke bei einem expandierenden oder größeren Bearbeitungstext weit außerhalb der Grenzen des Zeichnungsobjekts befinden können.
Jack.Ramsden

63

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


10
Dies sollte die neu akzeptierte Antwort sein. In meinem Fall konnte ich nicht implementieren, ohne auf AndroidX-Bibliotheken zu aktualisieren.
Ben

@ Ben (Daumen hoch)
Kevoroid

Bitte lesen Sie unbedingt die Dokumentation durch, da noch nicht alle XML-Attribute unterstützt werden. Möglicherweise müssen Sie die Quell- oder Festschreibungsnachrichten durchsehen, da sich dort manchmal genaue Implementierungsdetails befinden. Ich hatte diese Art von Problem für ein benutzerdefiniertes endIcon. Eine Commit-Nachricht ergab, dass das XML-Attribut noch keine Implementierung hatte, die es unterstützt. Muss einen anderen Ansatz verwenden, bis die Implementierung abgeschlossen ist
M. Smith

Beste Antwort im Jahr 2020.
Sam Chen

funktioniert app: endIconMode = "clear_text" <androidx.appcompat.widget.AppCompatEditText/>?
Kannst

32

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


Wenn Sie this.clearFocus()vor der return true-Anweisung einfügen , können Sie dieses Ereignis im EditText-Aufrufer mit dem onFocusChangeListener
Joost Schepel

Großartig, es ist wotking, das einzige Problem ist, dass ich in AppCompatEditText ein zeichnbares linkes Symbol gesetzt habe und es entfernt wird, wenn ich diese Funktion aufrufe. Kannst du mir bitte sagen, was das Problem ist?
Arbaz.in

@ Arbaz.in Es liegt an der aufrufenden Methode setCompoundDrawablesWithIntrinsicBounds(0, 0, clearIcon, 0). Sie können die links zeichnbare Symbol-ID als neuen Parameter an diese Funktion übergeben und in den Aufruf einfügen.
Gulshan

@ Gulshan Ich habe das gleiche getan, entferne immer noch das Drawable
Arbaz.in

20

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

Suchansicht ohne Text (und Hinweistext "Suchen")

Geben Sie hier die Bildbeschreibung ein

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" />

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

wo x ist:

Geben Sie hier die Bildbeschreibung ein


8
Wir müssen trotzdem einen onClickListener zuweisen, oder? Eine schnelle Suche gab mir dies . Ich denke, eine bessere Lösung ist die mit dem Framelayout. Trotzdem danke!
VenoM


6

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.


4

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.pngGeben Sie hier die Bildbeschreibung ein

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("");
        }
    });


2

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:

Geben Sie hier die Bildbeschreibung ein


2

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("")
}

1

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);
                }
            }
        });
    }

0

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.


0
    <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;
}
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.