Gibt es ein Widget, EditText
das eine Kreuzschaltfläche enthält, oder gibt es eine Eigenschaft, für EditText
die es automatisch erstellt wird? Ich möchte, dass die Kreuztaste den eingegebenen Text löscht EditText
.
Gibt es ein Widget, EditText
das eine Kreuzschaltfläche enthält, oder gibt es eine Eigenschaft, für EditText
die es automatisch erstellt wird? Ich möchte, dass die Kreuztaste den eingegebenen Text löscht EditText
.
Antworten:
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_light
aus ActionBarSherlock aus :
EditText
. Thx @yanchenko
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
<androidx.appcompat.widget.AppCompatEditText/>
?
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 onCreate
Methode und Sie sollten gut zu gehen sein-
yourEditText.setupClearButtonWithAction()
Übrigens müssen Sie R.drawable.ic_clear
zuerst das Symbol hinzufügen oder löschen. Dieser stammt von google- https://material.io/tools/icons/?icon=clear&style=baseline
this.clearFocus()
vor der return true-Anweisung einfügen , können Sie dieses Ereignis im EditText-Aufrufer mit dem onFocusChange
Listener
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.
Android Support-Bibliothek hat eine SearchView
Klasse, die genau dies tut. (Nicht abgeleitet von EditText
, muss also a SearchView.OnQueryTextListener
anstelle 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 resource
Sie 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" />
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 drawableEnd
in 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 OnTouchListener
direkt 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;
}