Android 自定义EditText输入框 带清空按钮

总结  Android 自定义EditText输入框 带清空按钮

 

当用户输入字符后  EditText会自动在输入框的内部右侧出现删除按钮

重写EditText达到简化布局的效果

效果图:

 

继承EditText

 

[java]  view plain  copy

1. package com.example.myedittexttest;  
2.   
3. import android.content.Context;  
4. import android.graphics.Rect;  
5. import android.graphics.drawable.Drawable;  
6. import android.text.Editable;  
7. import android.text.TextWatcher;  
8. import android.util.AttributeSet;  
9. import android.view.MotionEvent;  
10. import android.widget.EditText;  
11.   
12. public class MyEditText extends EditText {  
13.     private final String TAG = "MyEditText";  
14.     private Drawable dRight;  
15.     private Rect rBounds;  
16.   
17.     public MyEditText(Context paramContext) {  
18.         super(paramContext);  
19.         initEditText();  
20.     }  
21.   
22.     public MyEditText(Context paramContext, AttributeSet paramAttributeSet) {  
23.         super(paramContext, paramAttributeSet);  
24.         initEditText();  
25.     }  
26.   
27.     public MyEditText(Context paramContext, AttributeSet paramAttributeSet, int paramInt) {  
28.         super(paramContext, paramAttributeSet, paramInt);  
29.         initEditText();  
30.     }  
31.   
32.     // 初始化edittext 控件  
33.     private void initEditText() {  
34.         setEditTextDrawable();  
35.         addTextChangedListener(new TextWatcher() { // 对文本内容改变进行监听  
36.             @Override  
37.             public void afterTextChanged(Editable paramEditable) {  
38.             }  
39.   
40.             @Override  
41.             public void beforeTextChanged(CharSequence paramCharSequence, int paramInt1, int paramInt2, int paramInt3) {  
42.             }  
43.   
44.             @Override  
45.             public void onTextChanged(CharSequence paramCharSequence, int paramInt1, int paramInt2, int paramInt3) {  
46.                 MyEditText.this.setEditTextDrawable();  
47.             }  
48.         });  
49.     }  
50.   
51.     // 控制图片的显示  
52.     public void setEditTextDrawable() {  
53.         if (getText().toString().length() == 0) {  
54.             setCompoundDrawables(null, null, null, null);  
55.         } else {  
56.             setCompoundDrawables(null, null, this.dRight, null);  
57.         }  
58.     }  
59.   
60.     @Override  
61.     protected void onDetachedFromWindow() {  
62.         super.onDetachedFromWindow();  
63.         this.dRight = null;  
64.         this.rBounds = null;  
65.   
66.     }  
67.   
68.     /** 
69.      * 添加触摸事件 点击之后 出现 清空editText的效果 
70.      */  
71.     @Override  
72.     public boolean onTouchEvent(MotionEvent paramMotionEvent) {  
73.         if ((this.dRight != null) && (paramMotionEvent.getAction() == 1)) {  
74.             this.rBounds = this.dRight.getBounds();  
75.             int i = (int) paramMotionEvent.getRawX();// 距离屏幕的距离  
76.             // int i = (int) paramMotionEvent.getX();//距离边框的距离  
77.             if (i > getRight() - 3 * this.rBounds.width()) {  
78.                 setText("");  
79.                 paramMotionEvent.setAction(MotionEvent.ACTION_CANCEL);  
80.             }  
81.         }  
82.         return super.onTouchEvent(paramMotionEvent);  
83.     }  
84.   
85.     /** 
86.      * 显示右侧X图片的 
87.      *  
88.      * 左上右下 
89.      */  
90.     @Override  
91.     public void setCompoundDrawables(Drawable paramDrawable1, Drawable paramDrawable2, Drawable paramDrawable3, Drawable paramDrawable4) {  
92.         if (paramDrawable3 != null)  
93.             this.dRight = paramDrawable3;  
94.         super.setCompoundDrawables(paramDrawable1, paramDrawable2, paramDrawable3, paramDrawable4);  
95.     }  
96. }  

 

XML布局:

[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:paddingBottom="@dimen/activity_vertical_margin"  
6.     android:paddingLeft="@dimen/activity_horizontal_margin"  
7.     android:paddingRight="@dimen/activity_horizontal_margin"  
8.     android:paddingTop="@dimen/activity_vertical_margin"  
9.     tools:context=".MainActivity" >  
10.   
11.     <com.example.myedittexttest.MyEditText  
12.         android:id="@+id/edit_text"  
13.         android:layout_width="fill_parent"  
14.         android:layout_height="50dp"  
15.         android:layout_marginTop="50dp"  
16.         android:background="#88aaff"  
17.         android:drawableRight="@drawable/edit_clear"  
18.         android:textCursorDrawable="@null" />  
19.   
20.     <Button  
21.         android:id="@+id/button1"  
22.         android:layout_width="wrap_content"  
23.         android:layout_height="wrap_content"  
24.         android:layout_below="@+id/edit_text"  
25.         android:layout_marginTop="84dp"  
26.         android:layout_toRightOf="@+id/textView1"  
27.         android:text="Button" />  
28.   
29. </RelativeLayout>  

XML中的属性简介:

显示右侧的X 按钮:

[html]  view plain  copy

1. android:drawableRight="@drawable/edit_clear"  

 

设置光标的颜色    设置@null  表示光标的颜色和输入框的字体颜色相同

[html]  view plain  copy

1. android:textCursorDrawable="@null"   

 

显示隐藏光标

[html]  view plain  copy

1. android:cursorVisible="true"//显示  
2. android:cursorVisible="false"//隐藏  

 

有误的地方请指正

每日精进

最后神兽镇楼

[java]  view plain  copy

1. //┏┓　　　┏┓  
2. //┏┛┻━━━┛┻┓  
3. //┃　　　　　　　┃ 　  
4. //┃　　　━　　　┃  
5. //┃　┳┛　┗┳　┃  
6. //┃　　　　　　　┃  
7. //┃　　　┻　　　┃  
8. //┃　　　　　　　┃  
9. //┗━┓　　　┏━┛  
10. //  ┃　　　┃   神兽保佑　　　　　　　　  
11. //  ┃　　　┃   代码无BUG！  
12. //  ┃　　　┗━━━┓  
13. //  ┃　　　　　　　┣┓  
14. //  ┃　　　　　　　┏┛  
15. //  ┗┓┓┏━┳┓┏┛  
16. //    ┃┫┫　┃┫┫  
17. //    ┗┻┛　┗┻┛