Android UI设计系列之自定义EditText实现带清除功能的输入框

拿QQ的登陆来说吧，效果如下：

当点击密码框右侧的小×图标时输入的内容就都清空了，真的很方便，我之前在项目中也自定义过这种效果的输入框并且在项目中一直使用它，在此期间并没有发现什么Bug，之前的自定义结构如下：

实现方式是使用一个RelativeLayout，它包含了三个控件，两边是ImageView控件，中间是EditText控件，当点击右侧清除按钮后就可以清除输入框的内容了，但是最近在做产品优化的时候感觉之前写的这个自定义控件在代码量上来说有点浪费，明明Android的EditText有drawableLeft和drawableRight属性，为什么不去直接使用呢？于是用笔在草稿纸上画了画，花点时间又重新写了一个具有同样效果的输入框，并且在代码量上来说简化了不少。

 

工程中ClearEditText就是新定义的带清除功能的输入框，主要是继承了EditText为了利用它的drawableLeft和drawableRight属性，那么赶紧看看它的实现吧

1. public class ClearEditText extends EditText implements TextWatcher, 
2.   OnFocusChangeListener { 
3.  
4.  /** 
5.   * 左右两侧图片资源 
6.   */ 
7.  private Drawable left, right; 
8.  /** 
9.   * 是否获取焦点，默认没有焦点 
10.   */ 
11.  private boolean hasFocus = false; 
12.  /** 
13.   * 手指抬起时的X坐标 
14.   */ 
15.  private int xUp = 0; 
16.   
17.  public ClearEditText(Context context) { 
18.   this(context, null); 
19.  } 
20.  
21.  public ClearEditText(Context context, AttributeSet attrs) { 
22.   this(context, attrs, android.R.attr.editTextStyle); 
23.  } 
24.  
25.  public ClearEditText(Context context, AttributeSet attrs, int defStyle) { 
26.   super(context, attrs, defStyle); 
27.   initWedgits(); 
28.  } 
29.  
30.  /** 
31.   * 初始化各组件 
32.   * @param attrs 
33.   *   属性集 
34.   */ 
35.  private void initWedgits() { 
36.   try { 
37.    // 获取drawableLeft图片，如果在布局文件中没有定义drawableLeft属性，则此值为空 
38.    left = getCompoundDrawables()[0]; 
39.    // 获取drawableRight图片，如果在布局文件中没有定义drawableRight属性，则此值为空 
40.    right = getCompoundDrawables()[2]; 
41.    initDatas(); 
42.   } catch (Exception e) { 
43.    e.printStackTrace(); 
44.   } 
45.  } 
46.  
47.  /** 
48.   * 初始化数据 
49.   */ 
50.  private void initDatas() { 
51.   try { 
52.    // 第一次显示，隐藏删除图标 
53.    setCompoundDrawablesWithIntrinsicBounds(left, null, null, null); 
54.    addListeners(); 
55.   } catch (Exception e) { 
56.    e.printStackTrace(); 
57.   } 
58.  } 
59.  
60.  /** 
61.   * 添加事件监听 
62.   */ 
63.  private void addListeners() { 
64.   try { 
65.    setOnFocusChangeListener(this); 
66.    addTextChangedListener(this); 
67.   } catch (Exception e) { 
68.    e.printStackTrace(); 
69.   } 
70.  } 
71.  
72.  @Override 
73.  public void beforeTextChanged(CharSequence s, int start, int count, 
74.    int after) { 
75.  } 
76.  
77.  @Override 
78.  public void onTextChanged(CharSequence s, int start, int before, int after) { 
79.   if (hasFocus) { 
80.    if (TextUtils.isEmpty(s)) { 
81.     // 如果为空，则不显示删除图标 
82.     setCompoundDrawablesWithIntrinsicBounds(left, null, null, null); 
83.    } else { 
84.     // 如果非空，则要显示删除图标 
85.     if (null == right) { 
86.      right = getCompoundDrawables()[2]; 
87.     } 
88.     setCompoundDrawablesWithIntrinsicBounds(left, null, right, null); 
89.    } 
90.   } 
91.  } 
92.  
93.  @Override 
94.  public boolean onTouchEvent(MotionEvent event) { 
95.   try { 
96.    switch (event.getAction()) { 
97.    case MotionEvent.ACTION_UP: 
98.     // 获取点击时手指抬起的X坐标 
99.     xUp = (int) event.getX(); 
100.     // 当点击的坐标到当前输入框右侧的距离小于等于getCompoundPaddingRight()的距离时，则认为是点击了删除图标 
101.     // getCompoundPaddingRight()的说明：Returns the right padding of the view, plus space for the right Drawable if any. 
102.     if ((getWidth() - xUp) <= getCompoundPaddingRight()) { 
103.      if (!TextUtils.isEmpty(getText().toString())) { 
104.       setText(""); 
105.      } 
106.     } 
107.     break; 
108.    default: 
109.     break; 
110.    } 
111.   } catch (Exception e) { 
112.    e.printStackTrace(); 
113.   } 
114.   return super.onTouchEvent(event); 
115.  } 
116.  
117.  @Override 
118.  public void afterTextChanged(Editable s) { 
119.  } 
120.  
121.  @Override 
122.  public void onFocusChange(View v, boolean hasFocus) { 
123.   try { 
124.    this.hasFocus = hasFocus; 
125.   } catch (Exception e) { 
126.    e.printStackTrace(); 
127.   } 
128.  } 
129. }

解释一下ClearEditText的执行顺序，它首先继承了EditText也就是说具有了EditText的所有功能，然后又实现了TextWatcher和OnFocusChangeListener接口，其中接口OnFocusChangeListener是用来监听当前输入框是否获取到焦点的，我们把当前输入框获取到的焦点的状态值赋给hasFocus成员变量，如果获取到了焦点则hasFocus的值为true，当在输入框中输入内容的时候会触发TextWatcher监听器，就会顺序执行beforeTextChanged，onTextChanged和afterTextChanged方法，而我们仅仅需要在onTextChanged方法中对输入框的值进行判断就行了，如果输入框框的值非空就显示清空按钮小图标否则不显示，设置图标隐藏和显示的方法就是直接调用setCompoundDrawablesWithIntrinsicBounds方法就行了，这个方法的具体使用就不详解了，大体就是说按照我们给定的图片尺寸把图片画到输入框的四个方向上，如果传入值为null就表示不绘制。

接下来就是对清空小图标进行监听了，我首先想到的是如果清空小图标是显示的，就给他设置事件监听比如onClickListener或者是onTouchListener，但是遗憾的是找了API并没有发现EditText提供对drawLeft或者是drawRight的事件监听，又来又打算自定义一个监听器但仔细想想又把代码复杂化了，其实EditText是间接继承View的而View中有个onTouchEvent方法，我们可以重写onTouchEvent方法并在它里边根据我们手指摁下或者是抬起的坐标进行判断，如果点击的位置到当前控件右侧的距离小于等于当前控件右侧小图标的宽度加上paddingRight的值，则我们可以直接认为是点击了清除小图标，就可以对当前控件进行清空操作了，幸好EditText给我们提供了一个我现在认为是非常实在的方法：getCompoundPaddingRight()，文档的解释就是：Returns the right padding of the view, plus space for the right Drawable if any.它的值就是清空小图标的宽度加上paddingRight的值，呵呵，有了它就好办多了，(*^__^*) 嘻嘻……

好了，接下来我们来看看在布局文件中怎么使用它

1. <?xml version="1.0" encoding="utf-8"?> 
2. <LinearLayout 
3.  xmlns:android="http://schemas.android.com/apk/res/android" 
4.  android:orientation="vertical" 
5.  android:layout_width="fill_parent" 
6.  android:layout_height="fill_parent" 
7.  android:background="#ffffff"> 
8.  <TextView 
9.   android:layout_width="fill_parent" 
10.   android:layout_height="wrap_content" 
11.   android:layout_margin="10dip" 
12.   android:text="@string/hello" 
13.   android:gravity="center" 
14.   android:textSize="20sp" 
15.   android:textColor="#000000" /> 
16.   
17.  <com.llew.e.clear.view.wedgit.ClearEditText 
18.   android:id="@+id/clearEditText" 
19.   android:layout_width="fill_parent" 
20.   android:layout_height="wrap_content" 
21.   android:layout_margin="10dip" 
22.   android:paddingRight="8dip" 
23.   android:paddingTop="5dip" 
24.   android:paddingBottom="5dip" 
25.   android:hint="请输入QQ号码" 
26.   android:background="@drawable/pay_widget_input" 
27.   android:drawableLeft="@drawable/super_qq" 
28.   android:drawableRight="@drawable/clear_normal_list" /> 
29.  
30. </LinearLayout> 

就是写完整我们自定义的包名就行了，属性用的全是父类中的，再次感谢Java给我们提供的继承特性，呵呵，
在运行之前还是贴出来MainActivity代码吧，其实真的很简单：

1. public class MainActivity extends Activity { 
2.  /** Called when the activity is first created. */ 
3.  @Override 
4.  public void onCreate(Bundle savedInstanceState) { 
5.   super.onCreate(savedInstanceState); 
6.   setContentView(R.layout.main); 
7.  } 
8. } 

输入前：

输入后：

点击清除图标后：