Android TextWatcher

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

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

EditText.addTextChangedListener(mTextWatcher);

TextWatcher

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

方法 说明
beforeTextChanged(CharSequence s, int start,int count, int after) 内容变化前触发
onTextChanged(CharSequence s, int start, int before, int count) 内容变化中触发
afterTextChanged(Editable s) 内容变化后触发

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

范例

监听 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

Android 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.