让你的 EditText 所有清除

原文地址：让你的 EditText 所有清除

參考原文：Giving your Edit Texts the All Clear

项目地址(欢迎 Star)：ClearEditText

在输入文本的时候，通常当前输入的地方的末尾会有一个 ‘x’ 来结束。它的作用是，假设我们想要清空这一整行输入的时候，点一下 ‘x’ 就能够了。它的存在。还是非常有必要的。

然后。Android UI 组件并没有提供这种功能，假设 Android 用户在输入了一段非常长的文本的时候，发现他全然输错了。这时候想要删除整行内容的话，他必须一直按删除键，或者长按选中整段文字，然后删除。所以说。事实上，这样一个简单 ‘x’ 的存在是非常又必要的。

对于这个 ‘x’ 我们有什么要求呢：

• ‘x’ 应该仅仅在我们编辑这一项文本的时候而且我们获得了焦点的情况下才显示
• ‘x’ 应该显示在这项文本内部，即它应该显示在 EditText 里
• 按下 ‘x’ 应该是清除所有内容
• ‘x’ 的颜色应该是与编辑文本的主题色是一致的

这些要求意味着我们须要自己定义 EditText。对于第一个要求，我们须要一个 TextWatcher。这种话我们就能够看到内容字段发生的改变。还有我们须要实现 onFocusChangeListener。第二个要求。我们能够实现一个 ‘x’ 作为一个 compound drawable，由于这里没有 onClick 事件去监听 compound drawable，我们须要使用 OnTouch 来监听，这样第三个要求也实现了。对于第四个要求，我觉得 ‘x’ 的颜色应该是和 hint text 的 color 是一样的。

这样才会有“想要就要”的感觉，而不是“我要我要”的感觉。

构建我们的 EditText

创建新的 class。继承自 AppCompatEditText 而非 EditText，以确保我们在所有的设备上都有和 Android5.0 一样的效果。

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

创建构造函数和进行初始化：

public ClearEditText(final Context context) {
    super(context);
    init(context);
}

public ClearEditText(final Context context, final AttributeSet attrs) {
    super(context, attrs);
    init(context);
}

public ClearEditText(final Context context, final AttributeSet attrs, final int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init(context);
}

在 init 方法中，定义一个清除的图标。由于我们用了 support library。所以能够使用这个图标：abc_ic_clear_mtrl_alpha。可是由于它是白色的，所以我们使用着色(tint)的办法让它在 Android5.0 曾经的设备上也能工作。用 DrawableCompat 类来完毕我们的工作：

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 来处理 EditText 的清除图标是否是显示。我们通过焦点的变化和文本的观察(text watchers)来决定显示与否。

private void setClearIconVisible(final boolean visible) {
    mClearTextIcon.setVisible(visible, false);
    final Drawable[] compoundDrawables = getCompoundDrawables();
    setCompoundDrawables(
            compoundDrawables[0],
            compoundDrawables[1],
            visible ? mClearTextIcon : null,
            compoundDrawables[3]);
}

这当然意味着使用这种控制你就不应该自己去设置 right 的 compound drawable，由于它总是会被重写为 ‘x’ 或者 null。当文本改变或者焦点变化的时候。

你能够使用 TextInputLayout 来包裹 EditText。

这是非常棒的。

监听其它的控制

细心的你肯定已经注意到了，在 init 方法中我调用了父类的 Touch，和 Focus 的监听事件。

这么做是由于，我想重写标准的设置器，这样我们就能第一时间捕获这些监听。这样就能应用到我们的逻辑里，或者在逻辑里去设置监听。通过这种方式，假设我们用 TextInputLayout 包裹住了 EditText, 然后有 focus 监听。

这种话这些设置在 EditText 也仍然会被 fired。

我们不须要 text watchers，由于你已经有了多个的 multiple text watchers 在编辑文本上。

@Override
public void setOnFocusChangeListener(final OnFocusChangeListener onFocusChangeListener) {
    mOnFocusChangeListener = onFocusChangeListener;
}

@Override
public void setOnTouchListener(final OnTouchListener onTouchListener) {
    mOnTouchListener = onTouchListener;
}

为这个新类定义一些字段：

private Drawable mClearTextIcon;
private OnFocusChangeListener mOnFocusChangeListener;
private OnTouchListener mOnTouchListener;

终于

实现3个监听。首先是 focus:

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

这样当 focus 改变的时候，假设 editText 是获得焦点的，而且文本内容不为空，我们就显示 清除的 icon，否则。我们就设置为 null（即不显示 icon），在这两种情况下。我们要对其它所有的 focus 改变进行监听，来确保它的逻辑是正常进行的。

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

我们先检查清除的 icon 是否是显示的。然后当我们点击右側区域，我们就应该始终消耗这个事件，我们不希望其它的 touch 监听获取到。最后，假设用户的手指是从 ‘x’ 所在的区域抬起来的。我们就要去清除文本。

假设 ‘x’ 是不显示的或者 onTouch 事件不是在 right drawable 区域内的，我们就应该处理其它的相应的 touch 监听。

最后是简单的 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) {
}

这样，我们就拥有了带有 ‘x’ 可清除的全功能的的 EditText。你能够在你的布局中替换常规的 EditText 了。

假设你是使用 AutoCompleteTextView 。也是能够改动的。仅仅要该类名为例如以下即可了：

public class ClearableAutoCompleteTextView extends AppCompatAutoCompleteTextView implements View.OnTouchListener, View.OnFocusChangeListener, TextWatcher {