自定義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) {

    }

}