Android带清除按钮的文本框

  大部分的android应用中的文本框都带有清除按钮，在输入长文本后可以一次清除所有输入，实现的思路有很多，比如直接用EditText+ImageView，但是每个文本框都要这么搞麻烦不说，且不利于维护。
  本文的实现思路是通过继承EditText，并通过复写draw方法，将清除按钮画出来，然后通过监听onTouchEvent方法，判定用户是否点击了draw出来的区域进而判定是否需要清除文本。
  以下是两种方式区别不大，方法一使用了资源图片作为清除按钮，方法二使用了android的绘图api绘制清除按钮。

方法一：

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.drawable.Drawable;
import android.text.Editable;
import android.text.TextUtils;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.EditText;

public class MyEditText extends EditText implements TextWatcher {

    private float density;

    private boolean drawableShown = false;
    private Drawable drawable;
    private int drawableWidth;
    private int drawableHeight;

    private int paddingLeft;
    private int paddingTop;
    private int paddingRight;
    private int paddingBottom;

    public MyEditText(Context context, AttributeSet attrs) {
        super(context, attrs);
        // 密度
        density = context.getResources().getDisplayMetrics().density;
        // 删除图标
        drawable = getResources().getDrawable(R.drawable.sdk_cancel);
        drawableWidth = drawable.getIntrinsicWidth();
        drawableHeight = drawable.getIntrinsicHeight();

        paddingLeft = getPaddingLeft();
        paddingTop = getPaddingTop();
        paddingRight = getPaddingRight();
        paddingBottom = getPaddingBottom();

        setPadding(paddingLeft, paddingTop, paddingRight + drawableWidth, paddingBottom);

        addTextChangedListener(this);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                if (drawable.getBounds().contains((int)event.getX(), (int)event.getY())) {
                    return true;
                }
                break;
            case MotionEvent.ACTION_UP:
                if (drawable.getBounds().contains((int)event.getX(), (int)event.getY())) {
                    // 删除文本
                    setText("");
                    // 重新请求布局
                    requestLayout();
                    return true;
                }
                break;
        }

        return super.onTouchEvent(event);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);

        if (!TextUtils.isEmpty(getText())) {

            int width = drawableWidth;      // 图标宽
            int height = drawableHeight;    // 图标高
            int w = right - left;           // 控件宽
            int h = bottom - top;           // 控件高

            width = Math.min(width, w);
            height = Math.min(height, h);
            width = height = Math.min(width, height);

            // 设置图标已显示
            drawableShown = true;

            int l = w - width;
            l = l <= 0 ? 0 : l - (w - l - getDp(getPaddingLeft() + getPaddingRight())) / 2;
            int t = (h-height)/2;
            int r =  l + width;
            int b = t + height;

            drawable.setBounds(l, t, r, b);
        } else {
            // 设置图标已隐藏
            drawableShown = false;

            drawable.setBounds(0, 0, 0, 0);
        }
    }


    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);
        // 将图标绘制到界面
        drawable.draw(canvas);
    }

    @Override
    public void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {
        super.onTextChanged(text, start, lengthBefore, lengthAfter);
    }

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

    }

    @Override
    public void afterTextChanged(Editable s) {
        // 当有文本没有显示删除图标时和没有文本显示删除图标时，重新请求布局
        if ((!drawableShown && !TextUtils.isEmpty(s)) || (drawableShown && TextUtils.isEmpty(s))) {
            requestLayout();
        }
    }

    private int getPx(int dp) {
        return (int)(dp * density + 0.5f);
    }

    private int getDp(int px) {
        return (int)(px / density + 0.5f);
    }

}

方法二：

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.EditText;

public class MyEditText1 extends EditText {

    private Paint circlePaint;
    private Paint plusPaint;
    private Paint clearPaint;

    private Rect clearRect;
    private Rect clearRectPx;

    private int circleRadiusDp;
    private int circleRadius;
    private int circlePaddingDp;
    private int circlePadding;
    private int clearRectBox;

    public MyEditText1(Context context, AttributeSet attrs) {
        super(context, attrs);

        circlePaint = new Paint();
        circlePaint.setColor(Color.GRAY);

        plusPaint = new Paint();
        plusPaint.setColor(Color.WHITE);
        plusPaint.setStrokeWidth(getPx(5));

        clearPaint = new Paint();
        clearPaint.setColor(Color.argb(0, 0, 0, 0));

        clearRect = new Rect();
        clearRectPx = new Rect();

        circleRadiusDp = 10;
        circleRadius = getPx(circleRadiusDp);

        circlePaddingDp = 3;
        circlePadding = getPx(circlePaddingDp);

        clearRectBox = circleRadiusDp * 2 + circlePaddingDp * 2;

        //
        if (0 == getPaddingRight() || getPaddingRight() < getPx(clearRectBox)) {
            setPadding(getPaddingLeft(), getPaddingTop(), getPaddingRight() + getPx(clearRectBox), getPaddingBottom());
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (MotionEvent.ACTION_DOWN == event.getAction()) {
            if (clearRect.contains((int)event.getX(), (int)event.getY())) {
                return true;
            }
        } else if (MotionEvent.ACTION_UP == event.getAction()) {
            if (!TextUtils.isEmpty(getText()) && clearRect.contains((int)event.getX(), (int)event.getY())) {
                setText("");
                return true;
            }
        }

        return super.onTouchEvent(event);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);

        int l = right - left - clearRectBox*2 - getDp(getPaddingLeft() - getDp(getPaddingRight()));
        int t = (bottom - top - clearRectBox - getDp(getPaddingTop()) - getDp(getPaddingBottom())) / 2 + getDp(getPaddingTop());
        int r = l + clearRectBox;
        int b = t + clearRectBox;

        clearRect.set(l-clearRectBox, t-clearRectBox, r+clearRectBox, b+clearRectBox);
        clearRectPx.set(l, t, r, b);
    }

    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);

        if (!TextUtils.isEmpty(getText())) {
            canvas.drawRect(clearRect, clearPaint);
            canvas.translate(clearRectPx.centerX(), clearRectPx.centerY());

            canvas.save();
            canvas.drawCircle(0, 0, circleRadius, circlePaint);
            canvas.restore();

            canvas.save();
            canvas.rotate(45);
            canvas.translate(-(circleRadius - circlePadding), 0);
            canvas.drawLine(0, 0, circleRadius*2 - circlePadding*2, 0, plusPaint);
            canvas.restore();

            canvas.save();
            canvas.rotate(135);
            canvas.translate(-(circleRadius - circlePadding), 0);
            canvas.drawLine(0, 0, circleRadius*2 - circlePadding*2, 0, plusPaint);
            canvas.restore();
        }
    }

    private int getPx(int dp) {
        return (int)(dp * getContext().getResources().getDisplayMetrics().density + 0.5f);
    }

    private int getDp(int px) {
        return (int)(px / getContext().getResources().getDisplayMetrics().density + 0.5f);
    }

}