Android输入框中加入清除按钮

在Android的输入框中加入清除按钮，是很常见的设计，本文介绍如何建立一个控件，
在输入框中加入清除按钮。

咱们来看看实现这个控件都须要作什么：
1. 清除按钮在输入框中有内容时出现
2. 清除按钮必须出如今输入框内
3. 点击清除按钮，清除输入框中的全部内容
4. 清除按钮的颜色必须与主题一致

实现第一点，咱们能够经过加入TextWatcher来监听EditText的变化，在onFocusChangeListener方法中处理清除按钮是否可见。
实现第二点，咱们须要使用compound drawable做为清除按钮，而后在 OnTouch listener中处理点击事件。

开始实现咱们的EditText

咱们使用AppCompatEditText做为基类

public class ClearableEditText extends AppCompatEditText 
implements View.OnTouchListener, View.OnFocusChangeListener, TextWatcher {

接着加入构造函数

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

实现init方法
* 建立drawable，并为其加入Touch、Focus事件处理
* 加入TextChangedListener，监听EditText内容变化

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

咱们默认使用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;
}

实现Listener

最后咱们来实现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);
    }
}

在获取焦点时，判断输入框中内容是否大于0，有内容则显示清除按钮。

接着咱们来看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);
}

在这里，咱们首先检查了清除按钮是否为显示状态，而后判断点击的范围是否在清除按钮内，
若是在范围内的话，在ACTION_UP时清空输入框内容，不然执行mOnTouchListener的
onTouch方法。

最后，咱们实现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) {
}

判断输入框中的字数，大于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/

欢迎关注个人微信公众号，分享Android 开发，IOS开发，Swift开发和互联网内容
微信号：APP开发者