自带删除功能的EditText

开始

先上图：

相信很多人都有这样的需求，就是在EditText中输入内容时希望后面可以出现一个小删除按钮，点击删除按钮可以直接将刚刚输入的内容清除，这样就不用按键盘上的删除按钮一个一个删了。

代码实现分析

实现这个功能的方式有很多，我用的办法是自定义控件的方式，这种方式使用起来特别方便，只需要在布局文件中一引用就可以啦！

这个控件现实起来两个地方有点小难度，
1.把小删除图标画出来
2.为小删除图标设置点击事件

ok，废话不多说啦，直接贴代码:

package com.uips.ustopcar.view;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.text.Editable;
import android.text.TextUtils;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.EditText;

import com.uips.ustopcar.R;

/**
 - @funtion 有文字时自带清除文字功能
 - Created by gaoqingliang on 2017/6/6.
 */
public class ExtendEditText extends EditText implements TextWatcher {
    public ExtendEditText(Context context) {
        super(context);
        this.addTextChangedListener(this);
    }

    public ExtendEditText(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.addTextChangedListener(this);
    }

    public ExtendEditText(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.addTextChangedListener(this);
    }
    private int left;
    private int top;
    private int right;
    private int bottom;
    //是否显示 "删除文字按钮"
    private boolean isShowDeleteBtn = false;
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if(isShowDeleteBtn){
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.close_2);
        int bitmapWidth =  bitmap.getWidth();
        int bitmapHeight =  bitmap.getHeight();
        int editTextWidth = this.getWidth();
        int editTextHeight = this.getHeight();
        //圆×的位置
        left = editTextWidth - bitmapWidth - 5;
        top = editTextHeight/2 - bitmapHeight/2;
        right = editTextWidth;
        bottom = editTextHeight - ((editTextHeight-bitmapHeight)/2);
        canvas.drawBitmap(bitmap,left,top,null);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if(isShowDeleteBtn) {
            float eventX = event.getX();
            float eventY = event.getY();
            //判断当前点击的位置  是否在清除图标的位置  如果是就清除文字
            if (eventX > left - 10 && eventX < right + 10 && eventY > top - 5 && eventY < bottom + 5) {
                this.setText("");
                hideDeleteBtn();
            }
        }
        return super.onTouchEvent(event);
    }

    @Override
    public void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {
        super.onTextChanged(text, start, lengthBefore, lengthAfter);
        if(TextUtils.isEmpty(text)){
            hideDeleteBtn();
        }else{
            showDeleteBtn();
        }
    }

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

    }

    @Override
    public void afterTextChanged(Editable s) {

    }
    /**
     * 显示删除按钮
     */
    private void showDeleteBtn(){
        isShowDeleteBtn = true;
        invalidate();
    }
    /**
     * 隐藏删除按钮
     */
    private void hideDeleteBtn(){
        isShowDeleteBtn = false;
        invalidate();
    }
}

ok,说一下实现逻辑其实特别简单，哈哈

1.创建类ExtendEditText 并继承 EditText
2.覆盖onDraw方法
3.把那个小删除图标 转成bitmap(因为一会要把它画到edittext上)

Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
R.mipmap.close_2);

4.准备小删除图标的位置，也就是你想把它画到哪？

left = editTextWidth - bitmapWidth - 5;
top = editTextHeight/2 - bitmapHeight/2;

代码中通过left和top就能确定 小删除图标的位置，left是小删除图标距离当前控件左边的位置，top是小删除图标距离当前控件上边的位置。
上面代码的 bitmapWidth - 5 是把小图标在往左移动5个像素，不然小删除图标就靠在最右面了，不好看。
top大家就自己算一下吧，控件高度/2 - 小删除图标/2 = 小删除图标在控件中间上边缘的位置

5.该准备的都准备差不多拉，下面调用这个方法一画小删除图标就出来喽

canvas.drawBitmap(bitmap,left,top,null);

6.小删除图标画出来了，下面我们再为它设置个点击事件，点击事件的思想就是用onTouchEvent事件得知当前用户点击的位置，如果点击的位置正好是我们小删除图标的位置，那就证明小删除图标被点击了。
也就是这段代码：

 @Override
    public boolean onTouchEvent(MotionEvent event) {     
            float eventX = event.getX();
            float eventY = event.getY();
            //判断当前点击的位置  是否在清除图标的位置  如果是就清除文字
            if (eventX > left - 10 && eventX < right + 10 
            && eventY > top - 5 && eventY < bottom + 5) {
                this.setText("");
                hideDeleteBtn();
            }      
        return super.onTouchEvent(event);
    }

通过:

float eventX = event.getX();
float eventY = event.getY();

得到当前用户点击的位置，上面我们在画小删除图标时已经知道小删除图标的位置和大小，就是它们4个

left = editTextWidth - bitmapWidth - 5;
top = editTextHeight/2 - bitmapHeight/2;
right = editTextWidth;
bottom = editTextHeight - ((editTextHeight-bitmapHeight)/2);

然后接下来就简单啦，我们拿着用户点击的位置判断，如果用户点击的位置在小删除图标的范围内，就证明小删除图标被点击了，就是下面这段代码：

if (eventX > left - 10 && eventX < right + 10
&& eventY > top - 5 && eventY < bottom + 5) {
}

那个-10 ，+10 ，-5，+5 的作用是我把小图标的点击范围扩大了，不然只用小图标的范围有点小，不好点击。

7.好啦，主要功能我们都实现完啦，接下来我们再让它完美一点，就是当用户输入文字时才显示小删除图标，没有文字时不显示删除小图标，这个就比较简单啦，我们先写个标记 默认为false不显示

//是否显示 “删除小图标按钮”
private boolean isShowDeleteBtn = false;

然后在创建两个方法

 /**
     * 显示删除按钮
     */
    private void showDeleteBtn(){
        isShowDeleteBtn = true;
        invalidate();
    }
    /**
     * 隐藏删除按钮
     */
    private void hideDeleteBtn(){
        isShowDeleteBtn = false;
        invalidate();
    }

invalidate()方法就是刷新当前view重新绘制的意思。
还有个需要注意的地方就是 我们都在哪用到了 isShowDeleteBtn这个标记，一个是onDraw方法里面，一个是点击事件里面。
isShowDeleteBtn为false时没有点击事件，和不画小删除图标，true则相反。
8.最后就是调用这两个方法了，刚刚我们说了 当有内容输入时就显示小删除图标，这个时候我们就需要给当前控件添加一个addTextChangedListener事件了，这个事件里有这样一个方法

public void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {
        super.onTextChanged(text, start, lengthBefore, lengthAfter);
        if(TextUtils.isEmpty(text)){
            hideDeleteBtn();
        }else{
            showDeleteBtn();
        }
    }

这个方法可以监听当前是否有内容正在输入，有的话就显示小图标，没有就不显示小图标，就是这句代码

if(TextUtils.isEmpty(text)){
            hideDeleteBtn();
        }else{
            showDeleteBtn();
        }

ok，到这里就完事喽！

怎么使用？

很简单，跟使用 edittext一样，注意引用时的包名全路径

<com.uips.uspcar.view.ExtendEditText
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="@null"
      android:hint="请输入密码"
      android:inputType="textPassword"
      android:textColorHint="#c3c6c8"
      android:maxLength="20"
      android:textSize="19sp" />

这是那个小删除图标