ClearEditText，自带清除功能的EditText

ClearEditText，自带清除功能的EditText

标签： androidClearEditText自定义view

2016-05-28 15:11 1296人阅读 评论(1) 收藏 举报

本文章已收录于：

分类：

Android（25）

作者同类文章 X

Android控件（3）

作者同类文章 X

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

目录(?)[+]

1. 一效果图
2. 二特点
3. 三ClearEditText代码
4. 四注意事项
5. 五其他资源及git地址

一、效果图

二、特点

1.简单。只有一个不到100行的类，且无任何依赖，也没有自定义属性

2.高效。没有使用LinearLayout包含EditText+ImageView的组合形式实现，仅仅只有一个继承EditText的自定义view，减少了布局的嵌套和view的数量

3.易用。看我代码中的调用就知道多简单了

[html] view plain copy

print ?

1. <span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     xmlns:tools="http://schemas.android.com/tools"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent"  
6.     android:paddingBottom="@dimen/activity_vertical_margin"  
7.     android:paddingLeft="@dimen/activity_horizontal_margin"  
8.     android:paddingRight="@dimen/activity_horizontal_margin"  
9.     android:paddingTop="@dimen/activity_vertical_margin"  
10.     tools:context="com.afei.myedittext.MainActivity">  
11.   
12.     <com.afei.myedittext.ClearEditText  
13.         android:layout_width="match_parent"  
14.         android:layout_height="wrap_content"/>  
15. </RelativeLayout></span>  

<span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.afei.myedittext.MainActivity">

    <com.afei.myedittext.ClearEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</RelativeLayout></span>

三、ClearEditText代码

[java] view plain copy

print ?

1. <span style="font-size:14px;">package com.afei.myedittext;  
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.widget.EditText;  
11.   
12. public class ClearEditText extends EditText implements View.OnFocusChangeListener, TextWatcher {  
13.   
14.     private Drawable mClearDrawable;  
15.     private boolean hasFocus;  
16.   
17.     public ClearEditText(Context context) {  
18.         this(context, null);  
19.     }  
20.   
21.     public ClearEditText(Context context, AttributeSet attrs) {  
22.         super(context, attrs);  
23.         init();  
24.     }  
25.   
26.     public ClearEditText(Context context, AttributeSet attrs, int defStyle) {  
27.         super(context, attrs, defStyle);  
28.         init();  
29.     }  
30.   
31.     private void init() {  
32.         // getCompoundDrawables() Returns drawables for the left(0), top(1), right(2) and bottom(3)  
33.         mClearDrawable = getCompoundDrawables()[2]; // 获取drawableRight  
34.         if (mClearDrawable == null) {  
35.             // 如果为空，即没有设置drawableRight，则使用R.mipmap.close这张图片  
36.             mClearDrawable = getResources().getDrawable(R.mipmap.close);  
37.         }  
38.         mClearDrawable.setBounds(0, 0, mClearDrawable.getIntrinsicWidth(), mClearDrawable.getIntrinsicHeight());  
39.         setOnFocusChangeListener(this);  
40.         addTextChangedListener(this);  
41.         // 默认隐藏图标  
42.         setDrawableVisible(false);  
43.     }  
44.   
45.     /** 
46.      * 我们无法直接给EditText设置点击事件，只能通过按下的位置来模拟clear点击事件 
47.      * 当我们按下的位置在图标包括图标到控件右边的间距范围内均算有效 
48.      */  
49.     @Override  
50.     public boolean onTouchEvent(MotionEvent event) {  
51.         if (event.getAction() == MotionEvent.ACTION_UP) {  
52.             if (getCompoundDrawables()[2] != null) {  
53.                 int start = getWidth() - getTotalPaddingRight() + getPaddingRight(); // 起始位置  
54.                 int end = getWidth(); // 结束位置  
55.                 boolean available = (event.getX() > start) && (event.getX() < end);  
56.                 if (available) {  
57.                     this.setText("");  
58.                 }  
59.             }  
60.         }  
61.         return super.onTouchEvent(event);  
62.     }  
63.   
64.     @Override  
65.     public void onFocusChange(View v, boolean hasFocus) {  
66.         this.hasFocus = hasFocus;  
67.         if (hasFocus && getText().length() > 0) {  
68.             setDrawableVisible(true); // 有焦点且有文字时显示图标  
69.         } else {  
70.             setDrawableVisible(false);  
71.         }  
72.     }  
73.   
74.     @Override  
75.     public void onTextChanged(CharSequence s, int start, int count, int after) {  
76.         if (hasFocus) {  
77.             setDrawableVisible(s.length() > 0);  
78.         }  
79.     }  
80.   
81.     @Override  
82.     public void beforeTextChanged(CharSequence s, int start, int count, int after) {  
83.     }  
84.   
85.     @Override  
86.     public void afterTextChanged(Editable s) {  
87.     }  
88.   
89.     protected void setDrawableVisible(boolean visible) {  
90.         Drawable right = visible ? mClearDrawable : null;  
91.         setCompoundDrawables(getCompoundDrawables()[0], getCompoundDrawables()[1], right, getCompoundDrawables()[3]);  
92.     }  
93.   
94. }</span>  

<span style="font-size:14px;">package com.afei.myedittext;

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.widget.EditText;

public class ClearEditText extends EditText implements View.OnFocusChangeListener, TextWatcher {

    private Drawable mClearDrawable;
    private boolean hasFocus;

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

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

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

    private void init() {
        // getCompoundDrawables() Returns drawables for the left(0), top(1), right(2) and bottom(3)
        mClearDrawable = getCompoundDrawables()[2]; // 获取drawableRight
        if (mClearDrawable == null) {
            // 如果为空，即没有设置drawableRight，则使用R.mipmap.close这张图片
            mClearDrawable = getResources().getDrawable(R.mipmap.close);
        }
        mClearDrawable.setBounds(0, 0, mClearDrawable.getIntrinsicWidth(), mClearDrawable.getIntrinsicHeight());
        setOnFocusChangeListener(this);
        addTextChangedListener(this);
        // 默认隐藏图标
        setDrawableVisible(false);
    }

    /**
     * 我们无法直接给EditText设置点击事件，只能通过按下的位置来模拟clear点击事件
     * 当我们按下的位置在图标包括图标到控件右边的间距范围内均算有效
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_UP) {
            if (getCompoundDrawables()[2] != null) {
                int start = getWidth() - getTotalPaddingRight() + getPaddingRight(); // 起始位置
                int end = getWidth(); // 结束位置
                boolean available = (event.getX() > start) && (event.getX() < end);
                if (available) {
                    this.setText("");
                }
            }
        }
        return super.onTouchEvent(event);
    }

    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        this.hasFocus = hasFocus;
        if (hasFocus && getText().length() > 0) {
            setDrawableVisible(true); // 有焦点且有文字时显示图标
        } else {
            setDrawableVisible(false);
        }
    }

    @Override
    public void onTextChanged(CharSequence s, int start, int count, int after) {
        if (hasFocus) {
            setDrawableVisible(s.length() > 0);
        }
    }

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

    @Override
    public void afterTextChanged(Editable s) {
    }

    protected void setDrawableVisible(boolean visible) {
        Drawable right = visible ? mClearDrawable : null;
        setCompoundDrawables(getCompoundDrawables()[0], getCompoundDrawables()[1], right, getCompoundDrawables()[3]);
    }

}</span>

四、注意事项

1.图标你可以通过在xml中Android:drawableRight=""指定，当然如果你不指定我没呢就会使用一个默认图标，这个图标需要事先准备，毕竟ic_launcher太丑了

2.图标默认显示在右侧，如果你的需求很古怪的话可以自己修改相应代码轻松实现（修改getCompoundDrawables()[]对应的数组下标）

3.DropEditText整个控件的高度不要太小，否则文字或者图片会显示不全，这是EditText都会有的问题

4.例如我的DropEditText使用的高度为“wrap_content"，但是图片如果较大的话当drawable显示的时候就会撑高DropEditText的高度，所以你的图片高度应该适中，我使用的图片是60*60的，放置在xxhdpi下效果就很好

五、其他资源及git地址

Git地址：  http://git.oschina.net/afei_/MyEditText

close.png图片：

顶

1

踩

0

 

 

• 上一篇Android中adapter调用notifyDataSetChanged无效原因总结
• 下一篇DropEditText，带下拉功能的EditText

我的同类文章

Android（25） Android控件（3）

http://blog.csdn.net

• •Android获取本应用内存占用的方法2017-02-27阅读113
• •BaseExpandableListAdapter封装2016-08-14阅读215
• •Android图片压缩2016-07-30阅读136
• •Android自定义相机定点聚焦2016-07-26阅读1330
• •Android中GLSurfaceView截图2016-06-08阅读2028
• •Android如何将软键盘回车换成搜索等按钮，EditText中imeOptions属性的使用2016-06-05阅读2065

• •Android根据Uri获得其在文件系统中的路径2017-02-16阅读28
• •EventBus3.0配置及使用2016-08-03阅读1167
• •Android光线传感器获取光线强弱。LightSensorManager封装类2016-07-26阅读1001
• •Intent/Bundle传递Bitmap的时候失败甚至崩溃2016-06-13阅读1139
• •解析Android中应用程序文件存储用得到的一些文件路径2016-06-07阅读1536

更多文章