在Android的輸入框中加入清除按鈕，是很常見的設(shè)計，本文介紹如何創(chuàng)建一個控件，
在輸入框中加入清除按鈕。
我們來看看實(shí)現(xiàn)這個控件都需要做什么：
- 清除按鈕在輸入框中有內(nèi)容時出現(xiàn)
- 清除按鈕必須出現(xiàn)在輸入框內(nèi)
- 點(diǎn)擊清除按鈕，清除輸入框中的所有內(nèi)容
- 清除按鈕的顏色必須與主題一致
實(shí)現(xiàn)第一點(diǎn)，我們可以通過加入TextWatcher來監(jiān)聽EditText的變化，在onFocusChangeListener方法中處理清除按鈕是否可見。
實(shí)現(xiàn)第二點(diǎn)，我們需要使用compound drawable作為清除按鈕，然后在 OnTouch listener中處理點(diǎn)擊事件。
開始實(shí)現(xiàn)我們的EditText
我們使用AppCompatEditText作為基類
public class ClearableEditText extends AppCompatEditText
implements View.OnTouchListener, View.OnFocusChangeListener, TextWatcher {
接著加入構(gòu)造函數(shù)
public ClearableEditText(final Context context) {
super(context);
init(context);
}
public ClearableEditText(final Context context, final AttributeSet attrs) {
super(context, attrs);
init(context);
}
public ClearableEditText(final Context context, final AttributeSet attrs, final int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
實(shí)現(xiàn)init方法
- 創(chuàng)建drawable，并為其加入Touch、Focus事件處理
- 加入TextChangedListener，監(jiān)聽EditText內(nèi)容變化
private void init(final Context context) {
final Drawable drawable = ContextCompat.getDrawable(context, R.drawable.abc_ic_clear_mtrl_alpha);
final Drawable wrappedDrawable = DrawableCompat.wrap(drawable); //Wrap the drawable so that it can be tinted pre Lollipop
DrawableCompat.setTint(wrappedDrawable, getCurrentHintTextColor());
mClearTextIcon = wrappedDrawable;
mClearTextIcon.setBounds(0, 0, mClearTextIcon.getIntrinsicHeight(), mClearTextIcon.getIntrinsicHeight());
setClearIconVisible(false);
super.setOnTouchListener(this);
super.setOnFocusChangeListener(this);
addTextChangedListener(this);
}
我們默認(rèn)使用setClearIconVisible(false)隱藏了清除按鈕，在輸入文本時才會顯示
private void setClearIconVisible(final boolean visible) {
mClearTextIcon.setVisible(visible, false);
final Drawable[] compoundDrawables = getCompoundDrawables();
setCompoundDrawables(
compoundDrawables[0],
compoundDrawables[1],
visible ? mClearTextIcon : null,
compoundDrawables[3]);
}
加入Listener
private Drawable mClearTextIcon;
private OnFocusChangeListener mOnFocusChangeListener;
private OnTouchListener mOnTouchListener;
@Override
public void setOnFocusChangeListener(final OnFocusChangeListener onFocusChangeListener) {
mOnFocusChangeListener = onFocusChangeListener;
}
@Override
public void setOnTouchListener(final OnTouchListener onTouchListener) {
mOnTouchListener = onTouchListener;
}
實(shí)現(xiàn)Listener
最后我們來實(shí)現(xiàn)3個Listener，先來看focus Listener
@Override
public void onFocusChange(final View view, final boolean hasFocus) {
if (hasFocus) {
setClearIconVisible(getText().length() > 0);
} else {
setClearIconVisible(false);
}
if (mOnFocusChangeListener != null) {
mOnFocusChangeListener.onFocusChange(view, hasFocus);
}
}
在獲取焦點(diǎn)時，判斷輸入框中內(nèi)容是否大于0，有內(nèi)容則顯示清除按鈕。
接著我們來看onTouch方法：
@Override
public boolean onTouch(final View view, final MotionEvent motionEvent) {
final int x = (int) motionEvent.getX();
if (mClearTextIcon.isVisible() && x > getWidth() - getPaddingRight() - mClearTextIcon.getIntrinsicWidth()) {
if (motionEvent.getAction() == MotionEvent.ACTION_UP) {
setText("");
}
return true;
}
return mOnTouchListener != null && mOnTouchListener.onTouch(view, motionEvent);
}
在這里，我們首先檢查了清除按鈕是否為顯示狀態(tài)，然后判斷點(diǎn)擊的范圍是否在清除按鈕內(nèi)，
如果在范圍內(nèi)的話，在ACTION_UP時清空輸入框內(nèi)容，否則執(zhí)行mOnTouchListener的
onTouch方法。
最后，我們實(shí)現(xiàn)TextWatcher：
@Override
public final void onTextChanged(final CharSequence s, final int start, final int before, final int count) {
if (isFocused()) {
setClearIconVisible(s.length() > 0);
}
}
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
@Override
public void afterTextChanged(Editable s) {
}
判斷輸入框中的字?jǐn)?shù)，大于0則顯示清除按鈕，否則隱藏。
如果你使用的是AutoCompleteTextView，我們也可以使用同樣的方法添加清除按鈕：
public class ClearableAutoCompleteTextView extends AppCompatAutoCompleteTextView
implements View.OnTouchListener, View.OnFocusChangeListener, TextWatcher {
該控件的源碼已上傳到Github: ClearableEditText
本文譯自：Giving your Edit Texts the All Clear
本文作者： 陽春面
原文地址：http://www.aswifter.com/2015/07/31/android-edittext-add-clear-button/
歡迎關(guān)注我的微信公眾號，分享Android 開發(fā)，IOS開發(fā)，Swift開發(fā)和互聯(lián)網(wǎng)內(nèi)容
微信號：APP開發(fā)者
