3.5 监听EditText的内容变化

本节引言：

在前面我们已经学过EditText控件了，本节来说下如何监听输入框的内容变化！ 这个再实际开发中非常实用，另外，附带着说下如何实现EditText的密码可见 与不可见！好了，开始本节内容！

---

1.监听EditText的内容变化

由题可知，是基于监听的事件处理机制，好像前面的点击事件是OnClickListener，文本内容 变化的监听器则是：TextWatcher，我们可以调用EditText.addTextChangedListener(mTextWatcher); 为EditText设置内容变化监听！

简单说下TextWatcher，实现该类需实现三个方法：

public void beforeTextChanged(CharSequence s, int start,int count, int after);   

public void onTextChanged(CharSequence s, int start, int before, int count);

public void afterTextChanged(Editable s);

依次会在下述情况中触发：

• 1.内容变化前
• 2.内容变化中
• 3.内容变化后

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

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

这里给大家实现一个简单的自定义EditText，输入内容后，有面会显示一个叉叉的圆圈，用户点击后 可以清空文本框~，当然你也可以不自定义，直接为EditText添加TextWatcher然后设置下删除按钮~

实现效果图：

自定义EditText：DelEditText.java

package demo.com.jay.buttondemo;



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;



/**

 * Created by coder-pig on 2015/7/16 0016.

 */

public class DelEditText extends EditText {



    private Drawable imgClear;

    private Context mContext;



    public DelEditText(Context context, AttributeSet attrs) {

        super(context, attrs);

        this.mContext = context;

        init();

    }



    private void init() {

        imgClear = mContext.getResources().getDrawable(R.drawable.delete_gray);

        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();

    }



}

EditText的背景drawable：bg_frame_search.xml

<?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>

颜色资源:color.xml

<?xml version="1.0" encoding="utf-8"?>

<resources>

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

    <color name="back_red">#e75049</color>

</resources>

布局文件：activity_main.xml

<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:background="@color/back_red"

    android:orientation="vertical"

    tools:context=".MainActivity">



    <demo.com.jay.buttondemo.DelEditText

        android:id="@+id/edit_search"

        android:layout_width="match_parent"

        android:layout_height="32dp"

        android:layout_margin="10dp"

        android:background="@drawable/bg_frame_search"

        android:hint="带删除按钮的EditText~"

        android:maxLength="20"

        android:padding="5dp"

        android:singleLine="true" />





</LinearLayout>

PS:代码是非常简单的，就不解释了~

---

2.实现EditText的密码可见与不可见

这个也是一个很实用的需求，就是用户点击按钮后可让EditText中的密码可见或者不可见~

实现效果图：

实现代码： activity_main.xml

<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"

    tools:context=".MainActivity"

    android:layout_margin="5dp"

    android:orientation="horizontal">



    <EditText

        android:id="@+id/edit_pawd"

        android:layout_width="0dp"

        android:layout_weight="2"

        android:layout_height="48dp"

        android:inputType="textPassword"

        android:background="@drawable/editborder"/>



    <Button

        android:id="@+id/btnChange"

        android:layout_width="0dp"

        android:layout_weight="1"

        android:layout_height="48dp"

        android:text="密码可见"/>



</LinearLayout>

MainActivity.java

package com.jay.demo.edittextdemo;



import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.text.method.HideReturnsTransformationMethod;

import android.text.method.PasswordTransformationMethod;

import android.view.Menu;

import android.view.MenuItem;

import android.view.View;

import android.widget.Button;

import android.widget.EditText;



public class MainActivity extends AppCompatActivity {



    private EditText edit_pawd;

    private Button btnChange;

    private boolean flag = false;



    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        edit_pawd = (EditText) findViewById(R.id.edit_pawd);

        btnChange = (Button) findViewById(R.id.btnChange);

        edit_pawd.setHorizontallyScrolling(true);    //设置EditText不换行

        btnChange.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View view) {

                if(flag == true){

                    edit_pawd.setTransformationMethod(HideReturnsTransformationMethod.getInstance());

                    flag = false;

                    btnChange.setText("密码不可见");

                }else{

                    edit_pawd.setTransformationMethod(PasswordTransformationMethod.getInstance());

                    flag = true;

                    btnChange.setText("密码可见");

                }

            }

        });

    }

}

editborder.xml

<?xml version="1.0" encoding="utf-8"?>  

<shape xmlns:android="http://schemas.android.com/apk/res/android" >  

  

    <!-- 设置透明背景色 -->  

    <solid android:color="#FFFFFF" />  

  

    <!-- 设置一个白色边框 -->  

    <stroke  

        android:width="1px"  

        android:color="#FFFFFF" />  

    <!-- 设置一下边距,让空间大一点 -->  

    <padding  

        android:bottom="5dp"  

        android:left="5dp"  

        android:right="5dp"  

        android:top="5dp" />  

  

</shape> 

---

本节小结：

本节就到这里，谢谢~