自定义View——带清空文本的功能的ClearEditText

EditText增加一个快速清除所有文本的功能。思路：
１、在EditText右边增加一个删除按钮；
２、当EditText输入框有内容时，按钮就显示出来，否则就隐藏。

我们通过继承EditText来自定义一个ClearEditText的方式来实现这个功能。
第一步：在xml布局配置android:drawableEnd或android:drawableRight属性设置我们的清除按钮，如果没有设置，那么我们就使用默认的：

/*同时兼容获取xml布局设置的drawableEnd或drawableRight的图片，如果没有值，则使用默认的*/

drawable = getCompoundDrawablesRelative()[2] == null ? getCompoundDrawables()[2]:getCompoundDrawablesRelative()[2];
if(drawable == null){
	drawable = getContext().getResources().getDrawable(R.drawable.ic_backspace_black,null);
	drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

第二步：在这个图片上添加点击事件，完成清空的功能。但是我们要点击的对象是Drawable，不是View的子类，所以不能注册点击事件，所以我们只能通过onTouchEvent触摸事件，判断触摸的坐标是否落在图片的区域上，以此来做图片的点击事件：

 @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { /*clear the text of EditText*/ case MotionEvent.ACTION_DOWN: if (getCompoundDrawables()[2] != null) { /*the start position of the drawable*/ int start = getWidth() - getTotalPaddingRight() + getPaddingRight(); /*the end position of the drawable*/ int end = getWidth(); /*check if event.getX() is in the range between start and end*/ boolean available = (event.getX() > start) && (event.getX() < end); if (available) { this.setText(""); } } break; } return super.onTouchEvent(event); }


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
 

第三步：当输入框获得焦点时，根据有无文本显示清除按钮：

 /** * Called when the focus state of a view has changed. * * @param v The view whose state has changed. * @param hasFocus The new focus state of v. */ @Override public void onFocusChange(View v, boolean hasFocus) { this.hasFocus = hasFocus; if (hasFocus && getText() != null && getText().length() > 0) { setDrawableVisibility(true); } else { setDrawableVisibility(false); } }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
 

第四步：监听输入框文本的变化显示清除按钮：

 /** * This method is called to notify you that, within <code>s</code>, * the <code>count</code> characters beginning at <code>start</code> * have just replaced old text that had length <code>before</code>. * It is an error to attempt to make changes to <code>s</code> from * this callback. */ @Override public void onTextChanged(CharSequence s, int start, int before, int count) { if (hasFocus) { setDrawableVisibility(s.length() > 0); } }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
 

第五步：兼容使用setCompoundDrawablesRelative()和setCompoundDrawables()在代码中设置清除按钮：

 @Override public void setCompoundDrawables(@Nullable Drawable left, @Nullable Drawable top, @Nullable Drawable right, @Nullable Drawable bottom) { super.setCompoundDrawables(left, top, right, bottom); drawable = right; if (hasFocus && getText()!=null) { setDrawableVisibility(getText().toString().length() > 0); }else { setDrawableVisibility(false); } } @Override public void setCompoundDrawablesRelative(@Nullable Drawable start, @Nullable Drawable top, @Nullable Drawable end, @Nullable Drawable bottom) { super.setCompoundDrawablesRelative(start, top, end, bottom); drawable = end; if (hasFocus && getText()!=null) { setDrawableVisibility(getText().toString().length() > 0); }else { setDrawableVisibility(false); } }

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
 

大功告成！完整的代码如下：

package com.wong.widget;

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.text.Editable;
import android.text.Spannable;
import android.text.TextUtils;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

import androidx.annotation.Nullable;
import androidx.appcompat.widget.AppCompatEditText;

import com.wong.spin.R;
import com.wong.utils.CloneUtils;
import com.wong.utils.ObjectUtils;


public class ClearEditText extends AppCompatEditText implements View.OnFocusChangeListener, TextWatcher { private boolean hasFocus; private Drawable drawable; public ClearEditText(Context context) { super(context); init(context, null); } public ClearEditText(Context context, AttributeSet attrs) { super(context, attrs); init(context, attrs); } public ClearEditText(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(context, attrs); } private void init(Context context, AttributeSet attrs) { if (attrs != null) { // TODO 获取xml设置的属性 } setOnFocusChangeListener(this); addTextChangedListener(this); drawable = getCompoundDrawablesRelative()[2] == null ? getCompoundDrawables()[2]:getCompoundDrawablesRelative()[2]; if(drawable == null){ drawable = getContext().getResources().getDrawable(R.drawable.ic_backspace_black,null); drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight()); } /*hide the clear button*/ setDrawableVisibility(false); } @Override public void setCompoundDrawables(@Nullable Drawable left, @Nullable Drawable top, @Nullable Drawable right, @Nullable Drawable bottom) { super.setCompoundDrawables(left, top, right, bottom); drawable = right; if (hasFocus && getText()!=null) { setDrawableVisibility(getText().toString().length() > 0); }else { setDrawableVisibility(false); } } @Override public void setCompoundDrawablesRelative(@Nullable Drawable start, @Nullable Drawable top, @Nullable Drawable end, @Nullable Drawable bottom) { super.setCompoundDrawablesRelative(start, top, end, bottom); drawable = end; if (hasFocus && getText()!=null) { setDrawableVisibility(getText().toString().length() > 0); }else { setDrawableVisibility(false); } } @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { /*clear the text of EditText*/ case MotionEvent.ACTION_DOWN: if (getCompoundDrawables()[2] != null) { /*the start position of the drawable*/ int start = getWidth() - getTotalPaddingRight() + getPaddingRight(); /*the end position of the drawable*/ int end = getWidth(); /*check if event.getX() is in the range between start and end*/ boolean available = (event.getX() > start) && (event.getX() < end); if (available) { this.setText(""); } } break; } return super.onTouchEvent(event); } /** * Called when the focus state of a view has changed. * * @param v The view whose state has changed. * @param hasFocus The new focus state of v. */ @Override public void onFocusChange(View v, boolean hasFocus) { this.hasFocus = hasFocus; if (hasFocus && getText() != null && getText().length() > 0) { setDrawableVisibility(true); } else { setDrawableVisibility(false); } } /** * if the length of the characters,show the drawable,or hide it */ private void setDrawableVisibility(boolean available) { Drawable d = available ? drawable : null; super.setCompoundDrawables(getCompoundDrawables()[0], getCompoundDrawables()[1], d, getCompoundDrawables()[3]); } /** * This method is called to notify you that, within <code>s</code>, * the <code>count</code> characters beginning at <code>start</code> * are about to be replaced by new text with length <code>after</code>. * It is an error to attempt to make changes to <code>s</code> from * this callback. */ @Override public void beforeTextChanged(CharSequence s, int start, int count, int after) { } /** * This method is called to notify you that, within <code>s</code>, * the <code>count</code> characters beginning at <code>start</code> * have just replaced old text that had length <code>before</code>. * It is an error to attempt to make changes to <code>s</code> from * this callback. */ @Override public void onTextChanged(CharSequence s, int start, int before, int count) { if (hasFocus) { setDrawableVisibility(s.length() > 0); } } /** * This method is called to notify you that, somewhere within * <code>s</code>, the text has been changed. * It is legitimate to make further changes to <code>s</code> from * this callback, but be careful not to get yourself into an infinite * loop, because any changes you make will cause this method to be * called again recursively. * (You are not told where the change took place because other * afterTextChanged() methods may already have made other changes * and invalidated the offsets.  But if you need to know here, * you can use {@link Spannable#setSpan} in {@link #onTextChanged} * to mark your place and then look up from here where the span * ended up. */ @Override public void afterTextChanged(Editable s) { }
}



  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
  
47
  
48
  
49
  
50
  
51
  
52
  
53
  
54
  
55
  
56
  
57
  
58
  
59
  
60
  
61
  
62
  
63
  
64
  
65
  
66
  
67
  
68
  
69
  
70
  
71
  
72
  
73
  
74
  
75
  
76
  
77
  
78
  
79
  
80
  
81
  
82
  
83
  
84
  
85
  
86
  
87
  
88
  
89
  
90
  
91
  
92
  
93
  
94
  
95
  
96
  
97
  
98
  
99
  
100
  
101
  
102
  
103
  
104
  
105
  
106
  
107
  
108
  
109
  
110
  
111
  
112
  
113
  
114
  
115
  
116
  
117
  
118
  
119
  
120
  
121
  
122
  
123
  
124
  
125
  
126
  
127
  
128
  
129
  
130
  
131
  
132
  
133
  
134
  
135
  
136
  
137
  
138
  
139
  
140
  
141
  
142
  
143
  
144
  
145
  
146
  
147
  
148
  
149
  
150
  
151
  
152
  
153
  
154
  
155
  
156
  
157
  
158
  
159
  
160
  
161
  
162
  
163
  
164
  
165
  
166
  
167
  
168
  
169
  
170
  
171
  
172
 

效果：

这个清除的按钮可以通过xml布局drawableEnd或drawableRight属性来设置或者通过setCompoundDrawablesRelative()和setCompoundDrawables()方法来设置。

谢谢阅读！

文章来源: blog.csdn.net，作者：WongKyunban，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/weixin_40763897/article/details/104091940