EditText里怎么自带删除按钮

文章目录

1. 1. 自定义EditTextWithDel类
2. 2. 1.监听文本是否改变的事件
3. 3. 2.创建内部类实现TextWatcher接口
4. 4. 3.重写onTouchEvent事件
5. 5. 4.设置叉号视图

对于普通的编辑框，它的功能就是负责接收用户输入的信息，在实际开发中，常常会有这样的设计，就是在输入内容后，编辑框的内部右侧会出现一个删除按钮，点击后会清空编辑框里的内容，这样的交互是极好的，那这又是怎么实现的呢？

解决思路毫无疑问是——继承自EditText，自定义文本编辑框

• 为EditText设置addTextChangeListener
• 创建内部类实现TextWatcher接口，监听输入框文本的变化
• 改写onTouchEvent事件，点击叉号位置，清空文本
• 通过setCompoundDrawablesWithIntrinsicBounds方法为EditText设置图片

提示，先准备一张png的图片，由于EditText是继承自TextView的，因此也有setCompoundDrawablesWithIntrinsicBounds方法。

自定义EditTextWithDel类

继承自EditText，重写构造函数。

public EditTextWithDel(Context context) {
    super(context);
    mContext = context;
    init();
}

public EditTextWithDel(Context context, AttributeSet attrs) {
    super(context, attrs);
    mContext = context;
    init();
}

public EditTextWithDel(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    mContext = context;
    init();
}

1.监听文本是否改变的事件

private void init() {
        imgInable = mContext.getResources().getDrawable(R.drawable.delete_grey);
        addTextChangedListener(new EditTextWatcher());
        setDrawable();
}

2.创建内部类实现TextWatcher接口

private class EditTextWatcher implements TextWatcher {
        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            //文本将要被替换
        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
            //旧文本正在被替换
        }

        @Override
        public void afterTextChanged(Editable s) {
            //文本已经被替换
            setDrawable();
        }
}

3.重写onTouchEvent事件

@Override
public boolean onTouchEvent(MotionEvent event) {
        if (imgInable != null && event.getAction() == MotionEvent.ACTION_UP) {
            int eventX = (int) event.getRawX();
            int eventY = (int) event.getRawY();
            Log.e(TAG, "eventX = " + eventX + "; eventY = " + eventY);
            Rect rect = new Rect();
            getGlobalVisibleRect(rect);//获取视图在屏幕坐标中的可视区域
            rect.left = rect.right - 100;
            if (rect.contains(eventX, eventY)) {
                setText("");//判断是否在叉号范围内，在就清空
            }
        }
        return super.onTouchEvent(event);
}

4.设置叉号视图

private void setDrawable() {
        if (length() < 1) {
            setCompoundDrawablesWithIntrinsicBounds(null, null, null, null);
        } else {
            //左、上、右、下，这样的参数都是套路，记下就行
            setCompoundDrawablesWithIntrinsicBounds(null, null, imgInable, null);
        }
}

其实也很简单，就是判断文本框内容的长度，长度超过1的就设置叉号视图，小于1的就设置为null。

希望本文对您有所帮助！