安卓学习——事件处理机制之监听EditText的内容变化

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

(二)监听EditText的内容变化
1.监听EditText的内容变化

由题可知,是基于监听的事件处理机制,好像前面的点击事件是OnClickListener,文本内容 变化的监听器则是:TextWatcher,我们可以调用EditText.addTextChangedListener(mTextWatcher); 为EditText设置内容变化监听!
1
简单说下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
依次会在下述情况中触发:

1.内容变化前
2.内容变化中
3.内容变化后
1
2
3
4
我们可以根据实际的需求重写相关方法,一般重写得较多的是第三个方法!

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

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

实现效果图:
这里写图片描述

自定义EditText:DelEditText.java

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

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
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>
1
2
3
4
5
6
颜色资源: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>
1
2
3
4
5
6
7
8
9
布局文件: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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
MainActivity.java

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("密码可见");
            }
        }
    });
}

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复