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

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

效果图下图：

布局代码如下，

[html]  view plain  copy

1. <RelativeLayout xmlns: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.     <!-- 使用原始EditText实现清除输入的功能 -->  
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.     <!-- 自定义的具有清除功能的EditText -->  
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

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

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()，这个方法是输入框左右抖动的方法，之前我在某个应用看到过类似的功能，当用户名错误，输入框就在哪里抖动，感觉挺好玩的，其实主要是用到一个移动动画，然后设置动画的变化率为正弦曲线