前面几章节我们学习的点击事件都是 OnClickListener，如果要监听文本变化，则需要使用另一个事件监听器 TextWatcher

对于 EditText ，我们通过下面的代码设置内容变化监听

EditText.addTextChangedListener(mTextWatcher);

TextWatcher

TextWatcher 是一个接口 (interface) ，而实现该接口需要重写三个方法

我们可以根据实际的需求重写相关方法，一般重写得较多的是第三个方法

范例

监听 EditText 内容变化的场合有很多：限制字数输入，限制输入内容等等

我们这里写一个简单的 demo 自定义 EditText，输入内容后，有面会显示一个叉叉的圆圈，用户点击后 可以清空文本框

1. 创建一个 空的 Android 项目 cn.twle.android.TextWatcher

2. 下载 /static/i/android/close_16x16.png 并放到 res/drawable 目录下

3. 在 MainActivity.java 目录下新建一个文件 MsDelEditText.java

   package cn.twle.android.textwatcher;
   
   import android.content.Context;
   import android.graphics.Rect;
   import android.graphics.drawable.Drawable;
   import android.text.Editable;
   import android.text.TextWatcher;
   import android.util.AttributeSet;
   import android.view.MotionEvent;
   import android.widget.EditText;
   
   public class MsDelEditText extends EditText {
   
       private Drawable imgClear;
       private Context mContext;
   
       public MsDelEditText(Context context, AttributeSet attrs) {
           super(context, attrs);
           this.mContext = context;
           init();
       }
   
       private void init() {
           imgClear = mContext.getResources().getDrawable(R.drawable.close_16x16);
           addTextChangedListener(new TextWatcher() {
               @Override
               public void beforeTextChanged(CharSequence s, int start, int count, int after) {
   
               }
   
               @Override
               public void onTextChanged(CharSequence s, int start, int before, int count) {
   
               }
   
               @Override
               public void afterTextChanged(Editable editable) {
                   setDrawable();
               }
           });
       }
   
       //绘制删除图片
       private void setDrawable(){
           if (length() < 1)
               setCompoundDrawablesWithIntrinsicBounds(null, null, null, null);
           else
               setCompoundDrawablesWithIntrinsicBounds(null, null, imgClear, null);
       }
   
       //当触摸范围在右侧时，触发删除方法，隐藏叉叉
       @Override
       public boolean onTouchEvent(MotionEvent event) {
           if(imgClear != null && event.getAction() == MotionEvent.ACTION_UP)
           {
               int eventX = (int) event.getRawX();
               int eventY = (int) event.getRawY();
               Rect rect = new Rect();
               getGlobalVisibleRect(rect);
               rect.left = rect.right - 100;
               if (rect.contains(eventX, eventY))
                   setText("");
           }
           return super.onTouchEvent(event);
       }
   
       @Override
       protected void finalize() throws Throwable {
           super.finalize();
       }
   
   }
   

4. 在 res/drawable 目录下新建文件 bg_frame_search.xml 作为 EditText 的背景

   <?xml version="1.0" encoding="utf-8"?>
   <shape xmlns:android="http://schemas.android.com/apk/res/android" >
       <solid android:color="@color/background_white" />
       <corners android:radius="5dp" />
       <stroke android:width="1px" android:color="@color/frame_search"/>
   </shape>
   

5. 然后修改 res/values/colors.xml 添加几个颜色

   <?xml version="1.0" encoding="utf-8"?>
   <resources>
       <color name="colorPrimary">#3F51B5</color>
       <color name="colorPrimaryDark">#303F9F</color>
       <color name="colorAccent">#FF4081</color>
   
       <color name="reveal_color">#FFFFFF</color>
       <color name="bottom_color">#3086E4</color>
       <color name="bottom_bg">#40BAF8</color>
       <color name="frame_search">#ADAEAD</color>
       <color name="background_white">#FFFFFF</color>
   </resources>
   

6. 最后修改 activity_main.xml 添加刚刚我们自定义的 MsDelEditText

   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical">
   
       <cn.twle.android.textwatcher.MsDelEditText
           android:id="@+id/edit_search"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_margin="10dp"
           android:background="@drawable/bg_frame_search"
           android:hint="请输入你想说的话"
           android:maxLength="20"
           android:padding="5dp"
           android:singleLine="true" />
   
   </LinearLayout>
   

参考文档

1. Android TextWatcher