Android带清除功能的编辑框（ClearEditText）

Android带清除功能的编辑框（ClearEditText）

标签： Android控件自定义控件布局xml

2016-08-01 15:32 760人阅读 评论(0) 收藏 举报

本文章已收录于：

分类：

Android学习（21）

作者同类文章 X

移动开发（11）

作者同类文章 X

Android自定义控件（1）

作者同类文章 X

Android开发（9）

作者同类文章 X

版权声明：本文为博主原创文章，未经博主允许不得转载。

在Android开发中，EditText控件是最基本的控件之一。最近按照项目需求要求做一个EditText控件，带有清空功能的控件，比如在登录页面，帐号和密码输入框中，输入后发现错误，需要一个一个删除，这时候添加一个清除功能的按钮图标就很有必要了。好了，功能描述就到这里，下面开始贴效果图和代码（在小编眼里，代码比描述要有用的多）：

效果图如上，接下来我们看代码：

首先新建一个Java文件继承EditText，小编新建的是ClearEditText.java

[java] view plain copy

print ?

1. package com.text.view;  
2.   
3. import android.content.Context;  
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.view.View;  
10. import android.view.View.OnFocusChangeListener;  
11. import android.view.animation.Animation;  
12. import android.view.animation.CycleInterpolator;  
13. import android.view.animation.TranslateAnimation;  
14. import android.widget.EditText;  
15.   
16. public class ClearEditText extends EditText implements  
17.         OnFocusChangeListener, TextWatcher {  
18.     /** 
19.      * 删除按钮的引用 
20.      */  
21.     private Drawable mClearDrawable;  
22.     /** 
23.      * 控件是否有焦点 
24.      */  
25.     private boolean hasFoucs;  
26.   
27.     public ClearEditText(Context context) {  
28.         this(context, null);  
29.     }  
30.   
31.     public ClearEditText(Context context, AttributeSet attrs) {  
32.         //这里构造方法也很重要，不加这个很多属性不能再XML里面定义  
33.         this(context, attrs, android.R.attr.editTextStyle);  
34.     }  
35.   
36.     public ClearEditText(Context context, AttributeSet attrs, int defStyle) {  
37.         super(context, attrs, defStyle);  
38.         init();  
39.     }  
40.   
41.   
42.     private void init() {  
43.         //获取EditText的DrawableRight,假如没有设置我们就使用默认的图片  
44.         mClearDrawable = getCompoundDrawables()[2];  
45.         if (mClearDrawable == null) {  
46. //          throw new NullPointerException("You can add drawableRight attribute in XML");  
47.             mClearDrawable = getResources().getDrawable(R.drawable.delete_selector);  
48.         }  
49.   
50.         mClearDrawable.setBounds(0, 0, mClearDrawable.getIntrinsicWidth(), mClearDrawable.getIntrinsicHeight());  
51.         //默认设置隐藏图标  
52.         setClearIconVisible(false);  
53.         //设置焦点改变的监听  
54.         setOnFocusChangeListener(this);  
55.         //设置输入框里面内容发生改变的监听  
56.         addTextChangedListener(this);  
57.     }  
58.   
59.   
60.     /** 
61.      * 因为我们不能直接给EditText设置点击事件，所以我们用记住我们按下的位置来模拟点击事件 
62.      * 当我们按下的位置 在  EditText的宽度 - 图标到控件右边的间距 - 图标的宽度  和 
63.      * EditText的宽度 - 图标到控件右边的间距之间我们就算点击了图标，竖直方向就没有考虑 
64.      */  
65.     @Override  
66.     public boolean onTouchEvent(MotionEvent event) {  
67.         if (event.getAction() == MotionEvent.ACTION_UP) {  
68.             if (getCompoundDrawables()[2] != null) {  
69.   
70.                 boolean touchable = event.getX() > (getWidth() - getTotalPaddingRight())  
71.                         && (event.getX() < ((getWidth() - getPaddingRight())));  
72.   
73.                 if (touchable) {  
74.                     this.setText("");  
75.                 }  
76.             }  
77.         }  
78.   
79.         return super.onTouchEvent(event);  
80.     }  
81.   
82.     /** 
83.      * 当ClearEditText焦点发生变化的时候，判断里面字符串长度设置清除图标的显示与隐藏 
84.      */  
85.     @Override  
86.     public void onFocusChange(View v, boolean hasFocus) {  
87.         this.hasFoucs = hasFocus;  
88.         if (hasFocus) {  
89.             setClearIconVisible(getText().length() > 0);  
90.         } else {  
91.             setClearIconVisible(false);  
92.         }  
93.     }  
94.   
95.   
96.     /** 
97.      * 设置清除图标的显示与隐藏，调用setCompoundDrawables为EditText绘制上去 
98.      * @param visible 
99.      */  
100.     protected void setClearIconVisible(boolean visible) {  
101.         Drawable right = visible ? mClearDrawable : null;  
102.         setCompoundDrawables(getCompoundDrawables()[0],  
103.                 getCompoundDrawables()[1], right, getCompoundDrawables()[3]);  
104.     }  
105.   
106.   
107.     /** 
108.      * 当输入框里面内容发生变化的时候回调的方法 
109.      */  
110.     @Override  
111.     public void onTextChanged(CharSequence s, int start, int count,  
112.                               int after) {  
113.         if(hasFoucs){  
114.             setClearIconVisible(s.length() > 0);  
115.         }  
116.     }  
117.   
118.     @Override  
119.     public void beforeTextChanged(CharSequence s, int start, int count,  
120.                                   int after) {  
121.   
122.     }  
123.   
124.     @Override  
125.     public void afterTextChanged(Editable s) {  
126.   
127.     }  
128.   
129.     /** 
130.      * 设置晃动动画 
131.      */  
132.     public void setShakeAnimation(){  
133.         this.setAnimation(shakeAnimation(5));  
134.     }  
135.   
136.     /** 
137.      * 晃动动画 
138.      * @param counts 1秒钟晃动多少下 
139.      * @return 
140.      */  
141.     public static Animation shakeAnimation(int counts){  
142.         Animation translateAnimation = new TranslateAnimation(0, 10, 0, 0);  
143.         translateAnimation.setInterpolator(new CycleInterpolator(counts));  
144.         translateAnimation.setDuration(1000);  
145.         return translateAnimation;  
146.     }  
147.   
148.   
149. }  

package com.text.view;

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnFocusChangeListener;
import android.view.animation.Animation;
import android.view.animation.CycleInterpolator;
import android.view.animation.TranslateAnimation;
import android.widget.EditText;

public class ClearEditText extends EditText implements
        OnFocusChangeListener, TextWatcher {
    /**
     * 删除按钮的引用
     */
    private Drawable mClearDrawable;
    /**
     * 控件是否有焦点
     */
    private boolean hasFoucs;

    public ClearEditText(Context context) {
        this(context, null);
    }

    public ClearEditText(Context context, AttributeSet attrs) {
        //这里构造方法也很重要，不加这个很多属性不能再XML里面定义
        this(context, attrs, android.R.attr.editTextStyle);
    }

    public ClearEditText(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }


    private void init() {
        //获取EditText的DrawableRight,假如没有设置我们就使用默认的图片
        mClearDrawable = getCompoundDrawables()[2];
        if (mClearDrawable == null) {
//        	throw new NullPointerException("You can add drawableRight attribute in XML");
            mClearDrawable = getResources().getDrawable(R.drawable.delete_selector);
        }

        mClearDrawable.setBounds(0, 0, mClearDrawable.getIntrinsicWidth(), mClearDrawable.getIntrinsicHeight());
        //默认设置隐藏图标
        setClearIconVisible(false);
        //设置焦点改变的监听
        setOnFocusChangeListener(this);
        //设置输入框里面内容发生改变的监听
        addTextChangedListener(this);
    }


    /**
     * 因为我们不能直接给EditText设置点击事件，所以我们用记住我们按下的位置来模拟点击事件
     * 当我们按下的位置 在  EditText的宽度 - 图标到控件右边的间距 - 图标的宽度  和
     * EditText的宽度 - 图标到控件右边的间距之间我们就算点击了图标，竖直方向就没有考虑
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_UP) {
            if (getCompoundDrawables()[2] != null) {

                boolean touchable = event.getX() > (getWidth() - getTotalPaddingRight())
                        && (event.getX() < ((getWidth() - getPaddingRight())));

                if (touchable) {
                    this.setText("");
                }
            }
        }

        return super.onTouchEvent(event);
    }

    /**
     * 当ClearEditText焦点发生变化的时候，判断里面字符串长度设置清除图标的显示与隐藏
     */
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        this.hasFoucs = hasFocus;
        if (hasFocus) {
            setClearIconVisible(getText().length() > 0);
        } else {
            setClearIconVisible(false);
        }
    }


    /**
     * 设置清除图标的显示与隐藏，调用setCompoundDrawables为EditText绘制上去
     * @param visible
     */
    protected void setClearIconVisible(boolean visible) {
        Drawable right = visible ? mClearDrawable : null;
        setCompoundDrawables(getCompoundDrawables()[0],
                getCompoundDrawables()[1], right, getCompoundDrawables()[3]);
    }


    /**
     * 当输入框里面内容发生变化的时候回调的方法
     */
    @Override
    public void onTextChanged(CharSequence s, int start, int count,
                              int after) {
        if(hasFoucs){
            setClearIconVisible(s.length() > 0);
        }
    }

    @Override
    public void beforeTextChanged(CharSequence s, int start, int count,
                                  int after) {

    }

    @Override
    public void afterTextChanged(Editable s) {

    }

    /**
     * 设置晃动动画
     */
    public void setShakeAnimation(){
        this.setAnimation(shakeAnimation(5));
    }

    /**
     * 晃动动画
     * @param counts 1秒钟晃动多少下
     * @return
     */
    public static Animation shakeAnimation(int counts){
        Animation translateAnimation = new TranslateAnimation(0, 10, 0, 0);
        translateAnimation.setInterpolator(new CycleInterpolator(counts));
        translateAnimation.setDuration(1000);
        return translateAnimation;
    }


}

在XML文件中使用：

[html] view plain copy

print ?

1. <LinearLayout  
2.            android:layout_width="match_parent"  
3.            android:layout_height="50dp"  
4.            android:layout_marginTop="30dp"  
5.            android:background="@android:color/white"  
6.            android:gravity="center_vertical"  
7.            android:orientation="horizontal" >  
8.   
9.            <ImageView  
10.                android:layout_width="22dp"  
11.                android:layout_height="22dp"  
12.                android:layout_marginLeft="15dp"  
13.                android:background="@drawable/id_icon" />  
14.   
15.            <com.test.view.ClearEditText  
16.                android:id="@+id/et_phone_number"  
17.                android:layout_width="match_parent"  
18.                android:layout_height="wrap_content"  
19.                android:layout_marginLeft="15dp"  
20.                android:layout_marginRight="15dp"  
21.                android:background="@null"  
22.                android:hint="请输入您的手机号"  
23.                android:inputType="phone"  
24.                android:textColorHint="@color/app_hint_text_color"  
25.                android:textSize="@dimen/submit_font" />  
26.        </LinearLayout>  

 <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginTop="30dp"
            android:background="@android:color/white"
            android:gravity="center_vertical"
            android:orientation="horizontal" >

            <ImageView
                android:layout_width="22dp"
                android:layout_height="22dp"
                android:layout_marginLeft="15dp"
                android:background="@drawable/id_icon" />

            <com.test.view.ClearEditText
                android:id="@+id/et_phone_number"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:background="@null"
                android:hint="请输入您的手机号"
                android:inputType="phone"
                android:textColorHint="@color/app_hint_text_color"
                android:textSize="@dimen/submit_font" />
        </LinearLayout>

到这里就完成了，代码在上面大家自己可以多琢磨琢磨，这也是参照别人改写的，希望大家多多吐槽，共同进步

顶

0

踩

0

 

 

• 上一篇加密算法中BASE64、MD5、SHA、HMAC等之间的区别
• 下一篇AndroidStudio 常用快捷键

我的同类文章

Android学习（21） 移动开发（11） Android自定义控件（1） Android开发（9）

http://blog.youkuaiyun.com

• •Android二级页面闪退一级页面的fragment重叠bug解决方法2017-04-07阅读37
• •Android自定义状态栏颜色2016-09-07阅读458
• •Android OkHttp完全解析 是时候来了解OkHttp了2016-08-30阅读175
• •Android性能优化方案2016-06-06阅读420
• •多个Activity之间传值，使用Intent2016-04-21阅读434

• •史上最详细的Android Studio系列教程四--Gradle基础2016-09-08阅读310
• •Android之EditText表单验证框架2016-09-01阅读1207
• •AndroidStudio 常用快捷键2016-08-09阅读70
• •Android拍照或选择本地图片并剪裁图片设置成头像2016-06-06阅读464
• •Java中的接口作用2015-11-12阅读265

更多文章