自定义EditText-带清除按钮

一个带清除按钮的输入框其实很简单，

第一步是设置图标

private void init() {
    // 获取EditText的DrawableRight,假如没有设置我们就使用默认的图片,获取图片的顺序是左上右下（0,1,2,3,）

    mLeftDrawble = getCompoundDrawables()[0];
    if (mLeftDrawble == null) {
        mLeftDrawble = getResources().getDrawable(
                R.drawable.good_info_search);
    }
    mLeftDrawble.setBounds(0, 5, 50, 55);
    mClearDrawable = getCompoundDrawables()[2];
    if (mClearDrawable == null) {
        mClearDrawable = getResources().getDrawable(
                R.drawable.good_info_delete);
    }
    mClearDrawable.setBounds(-20, 0, 20, 45);
    // 默认设置隐藏图标
    setClearIconVisible(false);
    // 设置焦点改变的监听
    setOnFocusChangeListener(this);
    // 设置输入框里面内容发生改变的监听
    addTextChangedListener(this);
}

第二步是监听输入

使类实现 TextWatcher重写onTextChanged方法

@Override
public void onTextChanged(CharSequence s, int start, int count, int after) {
    if (hasFoucs) {
        setClearIconVisible(s.length() > 0);
    }
}

第三步监听点击了X

使类实现View.OnFocusChangeListener

/* @说明：isInnerWidth, isInnerHeight为ture，触摸点在删除图标之内，则视为点击了删除图标
 * event.getX() 获取相对应自身左上角的X坐标
 * event.getY() 获取相对应自身左上角的Y坐标
 * getWidth() 获取控件的宽度
 * getHeight() 获取控件的高度
 * getTotalPaddingRight() 获取删除图标左边缘到控件右边缘的距离
 * getPaddingRight() 获取删除图标右边缘到控件右边缘的距离
 * isInnerWidth:
 *     getWidth() - getTotalPaddingRight() 计算删除图标左边缘到控件左边缘的距离
 *     getWidth() - getPaddingRight() 计算删除图标右边缘到控件左边缘的距离
 * isInnerHeight:
 *     distance 删除图标顶部边缘到控件顶部边缘的距离
 *  distance + height 删除图标底部边缘到控件顶部边缘的距离
 */
@Override
public boolean onTouchEvent(MotionEvent event) {
    if (event.getAction() == MotionEvent.ACTION_UP) {
        if (getCompoundDrawables()[2] != null) {
            int x = (int) event.getX();
            int y = (int) event.getY();
            Rect rect = getCompoundDrawables()[2].getBounds();
            int height = rect.height();
            int distance = (getHeight() - height) / 2;
            boolean isInnerWidth = x > (getWidth() - getTotalPaddingRight()) && x < (getWidth() - getPaddingRight());
            boolean isInnerHeight = y > distance && y < (distance + height);
            if (isInnerWidth && isInnerHeight) {
                this.setText("");
            }
        }
    }
    return super.onTouchEvent(event);
}

这样就可以了。

先面是整体的代码

public class EditTextWithDel extends EditText implements View.OnFocusChangeListener,TextWatcher {
    //EditText右侧的删除按钮
    private Drawable mClearDrawable;

    private Drawable mLeftDrawble;
    private boolean hasFoucs;

    public EditTextWithDel(Context context) {
        this(context, null);
    }

    public EditTextWithDel(Context context, AttributeSet attrs) {
        this(context, attrs, android.R.attr.editTextStyle);
    }

    public EditTextWithDel(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    private void init() {
        // 获取EditText的DrawableRight,假如没有设置我们就使用默认的图片,获取图片的顺序是左上右下（0,1,2,3,）

        mLeftDrawble = getCompoundDrawables()[0];
        if (mLeftDrawble == null) {
            mLeftDrawble = getResources().getDrawable(
                    R.drawable.good_info_search);
        }
        mLeftDrawble.setBounds(0, 5, 50, 55);
        mClearDrawable = getCompoundDrawables()[2];
        if (mClearDrawable == null) {
            mClearDrawable = getResources().getDrawable(
                    R.drawable.good_info_delete);
        }
        mClearDrawable.setBounds(-20, 0, 20, 45);
        // 默认设置隐藏图标
        setClearIconVisible(false);
        // 设置焦点改变的监听
        setOnFocusChangeListener(this);
        // 设置输入框里面内容发生改变的监听
        addTextChangedListener(this);
    }

    /* @说明：isInnerWidth, isInnerHeight为ture，触摸点在删除图标之内，则视为点击了删除图标
     * event.getX() 获取相对应自身左上角的X坐标
     * event.getY() 获取相对应自身左上角的Y坐标
     * getWidth() 获取控件的宽度
     * getHeight() 获取控件的高度
     * getTotalPaddingRight() 获取删除图标左边缘到控件右边缘的距离
     * getPaddingRight() 获取删除图标右边缘到控件右边缘的距离
     * isInnerWidth:
     *     getWidth() - getTotalPaddingRight() 计算删除图标左边缘到控件左边缘的距离
     *     getWidth() - getPaddingRight() 计算删除图标右边缘到控件左边缘的距离
     * isInnerHeight:
     *     distance 删除图标顶部边缘到控件顶部边缘的距离
     *  distance + height 删除图标底部边缘到控件顶部边缘的距离
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_UP) {
            if (getCompoundDrawables()[2] != null) {
                int x = (int) event.getX();
                int y = (int) event.getY();
                Rect rect = getCompoundDrawables()[2].getBounds();
                int height = rect.height();
                int distance = (getHeight() - height) / 2;
                boolean isInnerWidth = x > (getWidth() - getTotalPaddingRight()) && x < (getWidth() - getPaddingRight());
                boolean isInnerHeight = y > distance && y < (distance + height);
                if (isInnerWidth && isInnerHeight) {
                    this.setText("");
                }
            }
        }
        return super.onTouchEvent(event);
    }

    /**
     * 当ClearEditText焦点发生变化的时候，
     * 输入长度为零，隐藏删除图标，否则，显示删除图标
     */
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        this.hasFoucs = hasFocus;
        if (hasFocus) {
            setClearIconVisible(getText().length() > 0);
        } else {
            setClearIconVisible(false);
        }
    }

    protected void setClearIconVisible(boolean visible) {
        Drawable right = visible ? mClearDrawable : null;
        setCompoundDrawables(mLeftDrawble,
                getCompoundDrawables()[1], right, getCompoundDrawables()[3]);
    }


    @Override
    public void onTextChanged(CharSequence s, int start, int count, int after) {
        if (hasFoucs) {
            setClearIconVisible(s.length() > 0);
        }
    }

    @Override
    public void beforeTextChanged(CharSequence s, int start, int count,
                                  int after) {

    }

    @Override
    public void afterTextChanged(Editable s) {

    }

}