Android: Как очистить EditText с помощью кросс-кнопки в правой части
Я создал EditText
для поиска, который содержит в левой части значок поиска и в правой части значка:
<EditText
android:id="@+id/Search"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:drawableLeft="@android:drawable/ic_menu_search"
android:drawableRight="@android:drawable/ic_delete"
android:hint="Search Product .." >
</EditText>
Я хочу знать, как я могу очистить содержимое EditText
, когда я нажимаю крестную кнопку.
Спасибо заранее.
Ответы
Ответ 1
Улучшенный ответ от @aristo_sh от Обработка событий кликов на чертеже в EditText
mQueryEditText.setOnTouchListener(new OnTouchListener() {
final int DRAWABLE_LEFT = 0;
final int DRAWABLE_TOP = 1;
final int DRAWABLE_RIGHT = 2;
final int DRAWABLE_BOTTOM = 3;
@Override
public boolean onTouch(View v, MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_UP) {
int leftEdgeOfRightDrawable = mQueryEditText.getRight()
- mQueryEditText.getCompoundDrawables()[DRAWABLE_RIGHT].getBounds().width();
// when EditBox has padding, adjust leftEdge like
// leftEdgeOfRightDrawable -= getResources().getDimension(R.dimen.edittext_padding_left_right);
if (event.getRawX() >= leftEdgeOfRightDrawable) {
// clicked on clear icon
mQueryEditText.setText("");
return true;
}
}
return false;
}
});
Ответ 2
Я предпочитаю использовать другое custome Edittex
, как показано ниже. Вы можете использовать его в xml как обычный edittext. Чтобы прослушать событие clear, вы можете setListener
для ClearableEdittext
/** Copyright 2014 Alex Yanchenko
* To change clear icon, set
* <p/>
* <pre>
* android:drawableRight="@drawable/custom_icon"
* </pre>
*/
public class ClearableEditText extends EditText implements OnTouchListener,
OnFocusChangeListener, TextWatcherAdapter.TextWatcherListener {
public interface Listener {
void didClearText();
}
public void setListener(Listener listener) {
this.listener = listener;
}
private Drawable xD;
private Listener listener;
public ClearableEditText(Context context) {
super(context);
init();
}
public ClearableEditText(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public ClearableEditText(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
@Override
public void setOnTouchListener(OnTouchListener l) {
this.l = l;
}
@Override
public void setOnFocusChangeListener(OnFocusChangeListener f) {
this.f = f;
}
private OnTouchListener l;
private OnFocusChangeListener f;
@Override
public boolean onTouch(View v, MotionEvent event) {
if (getCompoundDrawables()[2] != null) {
boolean tappedX = event.getX() > (getWidth() - getPaddingRight() - xD
.getIntrinsicWidth());
if (tappedX) {
if (event.getAction() == MotionEvent.ACTION_UP) {
setText("");
if (listener != null) {
listener.didClearText();
}
}
return true;
}
}
if (l != null) {
return l.onTouch(v, event);
}
return false;
}
@Override
public void onFocusChange(View v, boolean hasFocus) {
if (hasFocus) {
setClearIconVisible(!TextUtils.isEmpty(getText()));
} else {
setClearIconVisible(false);
}
if (f != null) {
f.onFocusChange(v, hasFocus);
}
}
@Override
public void onTextChanged(EditText view, String text) {
if (isFocused()) {
setClearIconVisible(!TextUtils.isEmpty(text));
}
}
private void init() {
xD = getCompoundDrawables()[2];
if (xD == null) {
xD = getResources()
.getDrawable(android.R.drawable.presence_offline);
}
xD.setBounds(0, 0, xD.getIntrinsicWidth(), xD.getIntrinsicHeight());
setClearIconVisible(false);
super.setOnTouchListener(this);
super.setOnFocusChangeListener(this);
addTextChangedListener(new TextWatcherAdapter(this, this));
}
protected void setClearIconVisible(boolean visible) {
Drawable x = visible ? xD : null;
setCompoundDrawables(getCompoundDrawables()[0],
getCompoundDrawables()[1], x, getCompoundDrawables()[3]);
}
}
Ответ 3
Попробуйте следующее:
activity_main.xml
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="9dp"
android:padding="5dp">
<EditText
android:id="@+id/Search"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:drawableLeft="@android:drawable/ic_menu_search"
android:hint="Search Product .." >
</EditText>
<Button
android:id="@+id/clearText"
android:layout_width="23dp"
android:layout_height="23dp"
android:layout_marginRight="10dp"
android:layout_gravity="right|bottom"
android:layout_marginBottom="10dp"
android:background="@android:drawable/ic_delete"
android:onClick="clear"/>
</FrameLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {
EditText mEditText;
Button mClearText;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mEditText = (EditText) findViewById(R.id.Search);
mClearText = (Button) findViewById(R.id.clearText);
//initially clear button is invisible
mClearText.setVisibility(View.INVISIBLE);
//clear button visibility on text change
mEditText.addTextChangedListener(new TextWatcher() {
@Override
public void afterTextChanged(Editable s) {
//do nothing
}
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
//do nothing
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
if(s.length() != 0) {
mClearText.setVisibility(View.VISIBLE);
} else {
mClearText.setVisibility(View.GONE);
}
}
});
}
//clear button onclick
public void clear(View view) {
mEditText.setText("");
mClearText.setVisibility(View.GONE);
}
}
Ответ 4
Пример, который я сделал:
mPasswordView = (EditText) findViewById(R.id.password);
mPasswordView.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
if (motionEvent.getAction() == MotionEvent.ACTION_UP){
// 100 is a fix value for the moment but you can change it
// according to your view
if (motionEvent.getX()>(view.getWidth()-100)){
((EditText)view).setText("");
}
}
return false;
}
});
mPasswordView.addTextChangedListener(new TextWatcher() {
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
if(s.toString().trim().length()==0){
mPasswordView.setCompoundDrawablesWithIntrinsicBounds(0, 0, 0, 0);
} else {
mPasswordView.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.ic_close_black_24dp, 0);
}
}
@Override
public void beforeTextChanged(CharSequence s, int start, int count,
int after) {
// TODO Auto-generated method stub
mPasswordView.setCompoundDrawablesWithIntrinsicBounds(0, 0, 0, 0);
}
@Override
public void afterTextChanged(Editable s) {
// TODO Auto-generated method stub
if (s.toString().trim().length() == 0) {
mPasswordView.setCompoundDrawablesWithIntrinsicBounds(0, 0, 0, 0);
} else {
mPasswordView.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.ic_close_black_24dp, 0);
}
}
});
Ответ 5
ответ пола Вереста неплох, но не учитывает отступы.
Вот пример (в Kotlin) для левого и правого щелчков, в том числе для отступа editText (который сдвигает рисованный объект относительно сторон editText).
editText.setOnTouchListener(View.OnTouchListener { _, event ->
val DRAWABLE_LEFT = 0
val DRAWABLE_RIGHT = 2
if (event.action == MotionEvent.ACTION_UP) {
if (event.x <= editText.compoundDrawables[DRAWABLE_LEFT].bounds.width() + (2 * editText.paddingStart)) {
// Left drawable clicked
[email protected] true
}
if (event.x >= editText.right - editText.compoundDrawables[DRAWABLE_RIGHT].bounds.width() - (2 * editText.paddingEnd)) {
// Right drawable clicked
[email protected]istener true
}
}
false
})
Примечание:
- Я использую
event.x
вместо event.rawX
, чтобы получить местоположение щелчка. event.rawX
- это необработанная X-координата на экране, она не учитывает местоположение editText (например, поля, которые предшествуют editText от обрезки сторон экрана). event.x
- это координата x относительно левой границы самого editText, что облегчает понимание вычислений.
- Всегда учитывайте отступы, когда делаете элементы кликабельными! Конечно, если вы слишком сильно смещаете рисование с помощью отступа editText, то нет смысла делать весь отступ интерактивным. В моем случае хорошо использовать дважды
editText.paddingStart
, поэтому он может быть активирован по обе стороны отрисовки. Вы можете рассмотреть возможность использования этого отступа один раз только для левой стороны начального рисования и добавить editText.compoundDrawablePadding
- отступ между рисованным и текстовым - для отступа справа. Конечно, вы также можете использовать некоторые постоянные значения dp, в зависимости от ваших собственных предпочтений. Концепция кликабельного отступа очень хорошо объяснена в этом блоге.