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

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;
  2. import android.content.Context;
  3. import android.graphics.Rect;
  4. import android.graphics.drawable.Drawable;
  5. import android.text.Editable;
  6. import android.text.TextWatcher;
  7. import android.util.AttributeSet;
  8. import android.view.MotionEvent;
  9. import android.widget.EditText;
  10. /**
  11. * Created by coder-pig on 2015/7/16 0016.
  12. */
  13. public class DelEditText extends EditText {
  14. private Drawable imgClear;
  15. private Context mContext;
  16. public DelEditText(Context context, AttributeSet attrs) {
  17. super(context, attrs);
  18. this.mContext = context;
  19. init();
  20. }
  21. private void init() {
  22. imgClear = mContext.getResources().getDrawable(R.drawable.delete_gray);
  23. addTextChangedListener(new TextWatcher() {
  24. @Override
  25. public void beforeTextChanged(CharSequence s, int start, int count, int after) {
  26. }
  27. @Override
  28. public void onTextChanged(CharSequence s, int start, int before, int count) {
  29. }
  30. @Override
  31. public void afterTextChanged(Editable editable) {
  32. setDrawable();
  33. }
  34. });
  35. }
  36. //绘制删除图片
  37. private void setDrawable(){
  38. if (length() < 1)
  39. setCompoundDrawablesWithIntrinsicBounds(null, null, null, null);
  40. else
  41. setCompoundDrawablesWithIntrinsicBounds(null, null, imgClear, null);
  42. }
  43. //当触摸范围在右侧时,触发删除方法,隐藏叉叉
  44. @Override
  45. public boolean onTouchEvent(MotionEvent event) {
  46. if(imgClear != null && event.getAction() == MotionEvent.ACTION_UP)
  47. {
  48. int eventX = (int) event.getRawX();
  49. int eventY = (int) event.getRawY();
  50. Rect rect = new Rect();
  51. getGlobalVisibleRect(rect);
  52. rect.left = rect.right - 100;
  53. if (rect.contains(eventX, eventY))
  54. setText("");
  55. }
  56. return super.onTouchEvent(event);
  57. }
  58. @Override
  59. protected void finalize() throws Throwable {
  60. super.finalize();
  61. }
  62. }

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">
  8. <demo.com.jay.buttondemo.DelEditText
  9. android:id="@+id/edit_search"
  10. android:layout_width="match_parent"
  11. android:layout_height="32dp"
  12. android:layout_margin="10dp"
  13. android:background="@drawable/bg_frame_search"
  14. android:hint="带删除按钮的EditText~"
  15. android:maxLength="20"
  16. android:padding="5dp"
  17. android:singleLine="true" />
  18. </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">
  8. <EditText
  9. android:id="@+id/edit_pawd"
  10. android:layout_width="0dp"
  11. android:layout_weight="2"
  12. android:layout_height="48dp"
  13. android:inputType="textPassword"
  14. android:background="@drawable/editborder"/>
  15. <Button
  16. android:id="@+id/btnChange"
  17. android:layout_width="0dp"
  18. android:layout_weight="1"
  19. android:layout_height="48dp"
  20. android:text="密码可见"/>
  21. </LinearLayout>

MainActivity.java

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

editborder.xml

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

本节小结:

本节就到这里,谢谢~

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