[关闭]
@coder-pig 2015-07-17T04:52:13.000000Z 字数 5633 阅读 1785

Android基础入门教程——3.5 监听EditText的内容变化

Android基础入门教程

本节引言：

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

1.监听EditText的内容变化

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

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

  1. public void beforeTextChanged(CharSequence s, int start,int count, int after);   
  2. public void onTextChanged(CharSequence s, int start, int before, int count);
  3. public void afterTextChanged(Editable s);

依次会在下述情况中触发：
1.内容变化前 2.内容变化中 3.内容变化后
我们可以根据实际的需求重写相关方法，一般重写得较多的是第三个方法！
监听EditText内容变化的场合有很多：
限制字数输入，限制输入内容等等~
这里给大家实现一个简单的自定义EditText，输入内容后，有面会显示一个叉叉的圆圈，用户点击后
可以清空文本框~，当然你也可以不自定义，直接为EditText添加TextWatcher然后设置下删除按钮~

实现效果图：

自定义EditText：DelEditText.java

  1. package demo.com.jay.buttondemo;
  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;
  12. /**
  13.  * Created by coder-pig on 2015/7/16 0016.
  14.  */
  15. public class DelEditText extends EditText {
  17.     private Drawable imgClear;
  18.     private Context mContext;
  20.     public DelEditText(Context context, AttributeSet attrs) {
  21.         super(context, attrs);
  22.         this.mContext = context;
  23.         init();
  24.     }
  26.     private void init() {
  27.         imgClear = mContext.getResources().getDrawable(R.drawable.delete_gray);
  28.         addTextChangedListener(new TextWatcher() {
  29.             @Override
  30.             public void beforeTextChanged(CharSequence s, int start, int count, int after) {
  32.             }
  34.             @Override
  35.             public void onTextChanged(CharSequence s, int start, int before, int count) {
  37.             }
  39.             @Override
  40.             public void afterTextChanged(Editable editable) {
  41.                 setDrawable();
  42.             }
  43.         });
  44.     }
  47.     //绘制删除图片
  48.     private void setDrawable(){
  49.         if (length() < 1)
  50.             setCompoundDrawablesWithIntrinsicBounds(null, null, null, null);
  51.         else
  52.             setCompoundDrawablesWithIntrinsicBounds(null, null, imgClear, null);
  53.     }
  56.     //当触摸范围在右侧时，触发删除方法，隐藏叉叉
  57.     @Override
  58.     public boolean onTouchEvent(MotionEvent event) {
  59.         if(imgClear != null && event.getAction() == MotionEvent.ACTION_UP)
  60.         {
  61.             int eventX = (int) event.getRawX();
  62.             int eventY = (int) event.getRawY();
  63.             Rect rect = new Rect();
  64.             getGlobalVisibleRect(rect);
  65.             rect.left = rect.right - 100;
  66.             if (rect.contains(eventX, eventY))
  67.                 setText("");
  68.         }
  69.         return super.onTouchEvent(event);
  70.     }
  73.     @Override
  74.     protected void finalize() throws Throwable {
  75.         super.finalize();
  76.     }
  78. }

EditText的背景drawable：bg_frame_search.xml

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

颜色资源:color.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3.     <color name="reveal_color">#FFFFFF</color>
  4.     <color name="bottom_color">#3086E4</color>
  5.     <color name="bottom_bg">#40BAF8</color>
  6.     <color name="frame_search">#ADAEAD</color>
  7.     <color name="background_white">#FFFFFF</color>
  8.     <color name="back_red">#e75049</color>
  9. </resources>

布局文件：activity_main.xml

  1. <LinearLayout 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:background="@color/back_red"
  6.     android:orientation="vertical"
  7.     tools:context=".MainActivity">
  9.     <demo.com.jay.buttondemo.DelEditText
  10.         android:id="@+id/edit_search"
  11.         android:layout_width="match_parent"
  12.         android:layout_height="32dp"
  13.         android:layout_margin="10dp"
  14.         android:background="@drawable/bg_frame_search"
  15.         android:hint="带删除按钮的EditText~"
  16.         android:maxLength="20"
  17.         android:padding="5dp"
  18.         android:singleLine="true" />
  21. </LinearLayout>

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

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

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

实现效果图：

实现代码：

activity_main.xml

  1. <LinearLayout 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.     tools:context=".MainActivity"
  6.     android:layout_margin="5dp"
  7.     android:orientation="horizontal">
  9.     <EditText
  10.         android:id="@+id/edit_pawd"
  11.         android:layout_width="0dp"
  12.         android:layout_weight="2"
  13.         android:layout_height="48dp"
  14.         android:inputType="textPassword"
  15.         android:background="@drawable/editborder"/>
  17.     <Button
  18.         android:id="@+id/btnChange"
  19.         android:layout_width="0dp"
  20.         android:layout_weight="1"
  21.         android:layout_height="48dp"
  22.         android:text="密码可见"/>
  24. </LinearLayout>

MainActivity.java

  1. package com.jay.demo.edittextdemo;
  3. import android.support.v7.app.AppCompatActivity;
  4. import android.os.Bundle;
  5. import android.text.method.HideReturnsTransformationMethod;
  6. import android.text.method.PasswordTransformationMethod;
  7. import android.view.Menu;
  8. import android.view.MenuItem;
  9. import android.view.View;
  10. import android.widget.Button;
  11. import android.widget.EditText;
  13. public class MainActivity extends AppCompatActivity {
  15.     private EditText edit_pawd;
  16.     private Button btnChange;
  17.     private boolean flag = false;
  19.     @Override
  20.     protected void onCreate(Bundle savedInstanceState) {
  21.         super.onCreate(savedInstanceState);
  22.         setContentView(R.layout.activity_main);
  23.         edit_pawd = (EditText) findViewById(R.id.edit_pawd);
  24.         btnChange = (Button) findViewById(R.id.btnChange);
  25.         edit_pawd.setHorizontallyScrolling(true);    //设置EditText不换行
  26.         btnChange.setOnClickListener(new View.OnClickListener() {
  27.             @Override
  28.             public void onClick(View view) {
  29.                 if(flag == true){
  30.                     edit_pawd.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
  31.                     flag = false;
  32.                     btnChange.setText("密码不可见");
  33.                 }else{
  34.                     edit_pawd.setTransformationMethod(PasswordTransformationMethod.getInstance());
  35.                     flag = true;
  36.                     btnChange.setText("密码可见");
  37.                 }
  38.             }
  39.         });
  40.     }
  41. }

editborder.xml

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android" >  
  4.     <!-- 设置透明背景色 -->  
  5.     <solid android:color="#FFFFFF" />  
  7.     <!-- 设置一个白色边框 -->  
  8.     <stroke  
  9.         android:width="1px"  
  10.         android:color="#FFFFFF" />  
  11.     <!-- 设置一下边距,让空间大一点 -->  
  12.     <padding  
  13.         android:bottom="5dp"  
  14.         android:left="5dp"  
  15.         android:right="5dp"  
  16.         android:top="5dp" />  
  18. </shape>

本节小结：

本节就到这里，谢谢~

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注