Android中ClearEditText实现点击EditText输入框右边清除图标来清除输入内容的两种方式

- 日理万妓 2022-06-03 07:44 351阅读 0赞

两种EditText输入框点击右边清除图标来实现清除功能的方式。

效果图下图：

![Center][]

布局代码如下，

\[html\] [view plain][] [copy][view plain]

1.  <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
2.  xmlns:tools="http://schemas.android.com/tools"
3.  android:layout\_width="match\_parent"
4.  android:layout\_height="match\_parent"
5.  android:layout\_gravity="center"
6.  android:paddingBottom="@dimen/activity\_vertical\_margin"
7.  android:paddingLeft="@dimen/activity\_horizontal\_margin"
8.  android:paddingRight="@dimen/activity\_horizontal\_margin"
9.  android:paddingTop="@dimen/activity\_vertical\_margin">
10. 
11. 
12. <RelativeLayout
13. android:id="@+id/top"
14. android:layout\_width="match\_parent"
15. android:layout\_height="50dp"
16. android:background="@drawable/btn\_big\_normal"
17. android:gravity="center\_vertical">
18. <EditText
19. android:id="@+id/login\_password"
20. android:layout\_width="match\_parent"
21. android:layout\_height="wrap\_content"
22. android:background="@null"
23. android:hint="请输入(原生操作)...."
24. android:padding="10dp"
25. android:singleLine="true"
26. android:textSize="15sp"
27. android:drawableLeft="@drawable/ic\_search"
28. android:layout\_marginRight="30dp"
29. />
30. <ImageView
31. android:id="@+id/iv\_pwd\_clear"
32. android:layout\_width="20dp"
33. android:layout\_height="20dp"
34. android:layout\_alignParentRight="true"
35. android:layout\_centerVertical="true"
36. android:layout\_marginRight="10dp"
37. android:clickable="true"
38. android:src="@drawable/ic\_search\_delete"
39. android:visibility="invisible"/>
40. </RelativeLayout>
41. <View
42. android:id="@+id/line"
43. android:layout\_width="match\_parent"
44. android:layout\_height="1dp"
45. android:background="@android:color/black"
46. android:layout\_below="@id/top"
47. android:layout\_marginTop="70dp"/>
48. 
49. <com.example.clearedittext.ClearEditText
50. android:id="@+id/et\_clear"
51. android:layout\_width="match\_parent"
52. android:layout\_height="50dp"
53. android:layout\_centerVertical="true"
54. android:background="@drawable/btn\_big\_normal"
55. android:drawableLeft="@drawable/ic\_search"
56. android:hint="请输入(自定义操作)...."
57. android:paddingLeft="5dp"
58. android:paddingRight="5dp"
59. android:singleLine="true"
60. android:textSize="15sp"/>
61. </RelativeLayout>

第一中实现方式：

\[html\] [view plain][] [copy][view plain]

1.  public class MainActivity extends Activity \{ 
2.  
3.   private EditText mPswTv; 
4.   private ImageView pwdClean; 
5.   @Override 
6.   protected void onCreate(Bundle savedInstanceState) \{ 
7.   super.onCreate(savedInstanceState); 
8.   setContentView(R.layout.activity\_main); 
9.  
10. mPswTv = (EditText) findViewById(R.id.login\_password); 
11.  //清除EditText输入的图标 
12. pwdClean = (ImageView) findViewById(R.id.iv\_pwd\_clear); 
13.  pwdClean.setOnClickListener(new View.OnClickListener() \{ 
14.  @Override 
15.  public void onClick(View v) \{ 
16.  mPswTv.setText(null); 
17.  \} 
18.  \}); 
19. 
20.  /\* 
21.  \* 设置文本输入变化监听 
22.  \*/ 
23.  mPswTv.addTextChangedListener(new TextWatcher() \{ 
24.  @Override 
25.  public void onTextChanged(CharSequence s, int start, int before, int count) \{ 
26.  // TODO Auto-generated method stub 
27.  \} 
28.  @Override 
29.  public void beforeTextChanged(CharSequence s, int start, int count, int after) \{ 
30.  // TODO Auto-generated method stub 
31.  \} 
32. 
33.  @Override 
34.  public void afterTextChanged(Editable s) \{ 
35.  // TODO Auto-generated method stub 
36.  if(s.length()>0)\{ 
37.  pwdClean.setVisibility(View.VISIBLE); 
38.  \}else\{ 
39.  pwdClean.setVisibility(View.GONE); 
40.  \} 
41.  \} 
42.  \}); 
43.  \}

第二种实现，是大牛写的，之后才发现，以下代码出自：http://blog.csdn.net/xiaanming/article/details/11066685  
通过继承EditText自定义一个ClearEditText类，在布局文件中直接引用即可。

\[html\] [view plain][] [copy][view plain]

1.  import android.content.Context; 
2.  import android.graphics.drawable.Drawable; 
3.  import android.text.Editable; 
4.  import android.text.TextWatcher; 
5.  import android.util.AttributeSet; 
6.  import android.view.MotionEvent; 
7.  import android.view.View; 
8.  import android.view.View.OnFocusChangeListener; 
9.  import android.view.animation.Animation; 
10. import android.view.animation.CycleInterpolator; 
11. import android.view.animation.TranslateAnimation; 
12. import android.widget.EditText; 
13. public class ClearEditText extends EditText implements 
14. OnFocusChangeListener, TextWatcher \{ 
15.  /\*\* 
16.  \* 删除按钮的引用 
17.  \*/ 
18.  private Drawable mClearDrawable; 
19. 
20.  public ClearEditText(Context context) \{ 
21.  this(context, null); 
22.  \} 
23. 
24.  public ClearEditText(Context context, AttributeSet attrs) \{ 
25.  //这里构造方法也很重要，不加这个很多属性不能再XML里面定义 
26.  this(context, attrs, android.R.attr.editTextStyle); 
27.  \} 
28. 
29.  public ClearEditText(Context context, AttributeSet attrs, int defStyle) \{ 
30.  super(context, attrs, defStyle); 
31.  init(); 
32.  \} 
33. 
34. 
35.  private void init() \{ 
36.  //获取EditText的DrawableRight,假如没有设置我们就使用默认的图片 
37. mClearDrawable = getCompoundDrawables()\[2\]; 
38.  if (mClearDrawable == null) \{ 
39. mClearDrawable = getResources() 
40.  .getDrawable(R.drawable.ic\_search\_delete); 
41.  \} 
42.  mClearDrawable.setBounds(0, 0, mClearDrawable.getIntrinsicWidth(), mClearDrawable.getIntrinsicHeight()); 
43.  setClearIconVisible(false); 
44.  setOnFocusChangeListener(this); 
45.  addTextChangedListener(this); 
46.  \} 
47. 
48. 
49.  /\*\* 
50.  \* 因为我们不能直接给EditText设置点击事件，所以我们用记住我们按下的位置来模拟点击事件 
51.  \* 当我们按下的位置 在 EditText的宽度 - 图标到控件右边的间距 - 图标的宽度 和 
52.  \* EditText的宽度 - 图标到控件右边的间距之间我们就算点击了图标，竖直方向没有考虑 
53.  \*/ 
54.  @Override 
55.  public boolean onTouchEvent(MotionEvent event) \{ 
56.  if (getCompoundDrawables()\[2\] != null) \{ 
57.  if (event.getAction() == MotionEvent.ACTION\_UP) \{ 
58.  boolean touchable = event.getX() > (getWidth() 
59.  \- getPaddingRight() - mClearDrawable.getIntrinsicWidth()) 
60.  && (event.getX() < ((getWidth() - getPaddingRight()))); 
61.  if (touchable) \{ 
62.  this.setText(""); 
63.  \} 
64.  \} 
65.  \} 
66. 
67.  return super.onTouchEvent(event); 
68.  \} 
69. 
70.  /\*\* 
71.  \* 当ClearEditText焦点发生变化的时候，判断里面字符串长度设置清除图标的显示与隐藏 
72.  \*/ 
73.  @Override 
74.  public void onFocusChange(View v, boolean hasFocus) \{ 
75.  if (hasFocus) \{ 
76.  setClearIconVisible(getText().length() > 0); 
77.  \} else \{ 
78.  setClearIconVisible(false); 
79.  \} 
80.  \} 
81. 
82. 
83.  /\*\* 
84.  \* 设置清除图标的显示与隐藏，调用setCompoundDrawables为EditText绘制上去 
85.  \* @param visible 
86.  \*/ 
87.  protected void setClearIconVisible(boolean visible) \{ 
88.  Drawable right = visible ? mClearDrawable : null; 
89.  setCompoundDrawables(getCompoundDrawables()\[0\], 
90.  getCompoundDrawables()\[1\], right, getCompoundDrawables()\[3\]); 
91.  \} 
92. 
93. 
94.  /\*\* 
95.  \* 当输入框里面内容发生变化的时候回调的方法 
96.  \*/ 
97.  @Override 
98.  public void onTextChanged(CharSequence s, int start, int count, 
99.  int after) \{ 
100.  setClearIconVisible(s.length() > 0); 
101.  \} 
102. 
103.  @Override 
104.  public void beforeTextChanged(CharSequence s, int start, int count, 
105.  int after) \{ 
106. 
107.  \} 
108. 
109.  @Override 
110.  public void afterTextChanged(Editable s) \{ 
111. 
112.  \} 
113. 
114. 
115.  /\*\* 
116.  \* 设置晃动动画 
117.  \*/ 
118.  public void setShakeAnimation()\{ 
119.  this.setAnimation(shakeAnimation(5)); 
120.  \} 
121. 
122. 
123.  /\*\* 
124.  \* 晃动动画 
125.  \* @param counts 1秒钟晃动多少下 
126.  \* @return 
127.  \*/ 
128.  public static Animation shakeAnimation(int counts)\{ 
129.  Animation translateAnimation = new TranslateAnimation(0, 10, 0, 0); 
130.  translateAnimation.setInterpolator(new CycleInterpolator(counts)); 
131.  translateAnimation.setDuration(1000); 
132.  return translateAnimation; 
133.  \} 
134. 
135. \}

*  setClearIconVisible()方法，设置隐藏和显示清除图标的方法，我们这里不是调用setVisibility()方法，setVisibility()这个方法是针对View的，我们可以调用setCompoundDrawables(Drawable left, Drawable top, Drawable right, Drawable bottom)来设置上下左右的图标

*  setOnFocusChangeListener(this) 为输入框设置焦点改变监听，如果输入框有焦点，我们判断输入框的值是否为空，为空就隐藏清除图标，否则就显示
 *  addTextChangedListener(this) 为输入框设置内容改变监听，其实很简单呢，当输入框里面的内容发生改变的时候，我们需要处理显示和隐藏清除小图标，里面的内容长度不为0我们就显示，否是就隐藏，但这个需要输入框有焦点我们才改变显示或者隐藏，为什么要需要焦点，比如我们一个登陆界面，我们保存了用户名和密码，在登陆界面onCreate()的时候，我们把我们保存的密码显示在用户名输入框和密码输入框里面，输入框里面内容发生改变，导致用户名输入框和密码输入框里面的清除小图标都显示了，这显然不是我们想要的效果，所以加了一个是否有焦点的判断
 *  setShakeAnimation()，这个方法是输入框左右抖动的方法，之前我在某个应用看到过类似的功能，当用户名错误，输入框就在哪里抖动，感觉挺好玩的，其实主要是用到一个移动动画，然后设置动画的变化率为正弦曲线

[Center]: /images/20220603/b5449cfbc9cf48ea84e9f653cdab9306.png
[view plain]: http://blog.csdn.net/daitu_liang/article/details/48730889#