Android自定义控件实现带有清除按钮的EditText

首先声明我也是参考了别人的思路，只是稍微做了下修改，增加显示密码与隐藏密码，没有输入字符串时让EditText进行抖动，废话少说这里附上效果图

效果很赞有木有

那么怎么实现这种效果呢？那就跟着我一起来吧

首先我们先分析一下清除功能怎么实现的，我们怎么知道用户点击的是清除按钮还是别的地方呢？，而EditText其实是集成Textview的，

而Textview有方法getTotalPaddingRight()获取图标左边缘至控件右边缘的距离，知道这样一个方法之后就很简单了，如下图所示我们就可以得到用户是不是点击的清除按钮图标，得到之后我们

只要设置setText("")不就实现了清除功能吗？

还有一个重要的问题就是EditText其实没有很好的点击事件，我们如果知道用户点击了并且点击的是清除按钮的位置，所以我们需要知道用户点击还是没有点击，而这个问题我们就可以通过View的onTouchEvent方法

都知道这个方法是用户触摸事件，所以我们只用户抬起屏幕不就相当于点击了么，ok！重要思路知道了之后我们就可以开始愉快的代码变成喽！

首先我们需要先自定义一个类去继承EditText类，重写里面的三个构造方法

public class ClearEditText extends EditText implements  
        OnFocusChangeListener, TextWatcher { 

   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();//这个方法主要是初始化工作，比如将清除按钮画上去
    } 
} 

init();//这个方法主要是初始化工作，比如将清除按钮画上去，

getCompoundDrawables()获取Drawable的四个位置的数组，四个位置为左上右下

setBounds()设置图片的位置以及大小，

其中getIntrinsicWidth()很重要，我们要画图片的宽度，首先就要知道图片的宽度，这个方法是获取显示出来的宽度而不是图片实际的宽度，高度是一样的道理

private void init() { 
        //获取EditText的DrawableRight,假如没有设置我们就使用默认的图片,getCompoundDrawables()获取Drawable的四个位置的数组
        mClearDrawable = getCompoundDrawables()[2]; 
        if (mClearDrawable == null) {
            mClearDrawable = getResources().getDrawable(R.drawable.delete_selector);
//            throw new NullPointerException("You can add drawableRight attribute in XML");
        } 
        //设置图标的位置以及大小,getIntrinsicWidth()获取显示出来的大小而不是原图片的带小
        mClearDrawable.setBounds(0, 0, mClearDrawable.getIntrinsicWidth(), mClearDrawable.getIntrinsicHeight()); 
        //默认设置隐藏图标
        setClearIconVisible(false); 
        //设置焦点改变的监听
        setOnFocusChangeListener(this); 
        //设置输入框里面内容发生改变的监听
        addTextChangedListener(this); 
    } 

　　图片画上去之后我们就开始重写onTouchEvent这个方法，其中怎么判断位置是清除按钮图标的位置我上面已经讲过了，而且原理图也有，大家应该好理解，

boolean touchable = event.getX() > (getWidth() - getTotalPaddingRight())
						&& (event.getX() < ((getWidth() - getPaddingRight())));
				
				if (touchable) {
					this.setText("");
				}可以看到如果正好是清除按钮的位置我们就调用setText方法赋值一个空字符达到清除的目的

public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_UP) {
            if (getCompoundDrawables()[2] != null) {
                //getTotalPaddingRight()图标左边缘至控件右边缘的距离
                //getWidth() - getTotalPaddingRight()表示从最左边到图标左边缘的位置
                //getWidth() - getPaddingRight()表示最左边到图标右边缘的位置
                boolean touchable = event.getX() > (getWidth() - getTotalPaddingRight())
                        && (event.getX() < ((getWidth() - getPaddingRight())));
                
                if (touchable) {
                    this.setText("");
                }
            }
//            if(getCompoundDrawables()[0] != null){
//                boolean touchLeft = event.getX()>0 && event.getX()<getCompoundDrawables()[0].getIntrinsicWidth();
//                if(touchLeft){
//                    if(isShow==false){
//                        isShow = true;
//                        //设置为可见
//                        this.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
//                    }else{
//                        isShow = false;
//                        //设置为密码模式
//                        this.setTransformationMethod(PasswordTransformationMethod.getInstance());
//                    }
//                }
//            }
        }

        return super.onTouchEvent(event);
    }

　　再就是EditText的晃动动画了

public static Animation shakeAnimation(int counts){
        Animation translateAnimation = new TranslateAnimation(0, 10, 0, 0);
        translateAnimation.setInterpolator(new CycleInterpolator(counts));
        translateAnimation.setDuration(1000);
        return translateAnimation;
    }

　　再就是怎么去显示我们的密码，和怎么将光标放到字符串最后一个位置上

//密码设置为可见
setTransformationMethod(HideReturnsTransformationMethod.getInstance());
//密码设置为不可见
setTransformationMethod(PasswordTransformationMethod.getInstance());
//不管是可见还是不可见都将光标设置到最后一个文字的后面
Selection.setSelection((Spannable)t,t.length());

　　好啦，思路讲完啦，接下来我会附上所有的代码

布局文件的代码

<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:background="#95CAE4"
    >
    <com.example.clearedittext.ClearEditText
        android:id="@+id/username"
        android:layout_marginTop="60dp"
        android:layout_width="fill_parent"
        android:background="@drawable/login_edittext_bg" 
        android:drawableLeft="@drawable/icon_user"
        android:layout_marginLeft="10dip"
        android:layout_marginRight="10dip"
        android:singleLine="true"
        android:drawableRight="@drawable/delete_selector"
        android:hint="输入用户名"
        android:layout_height="wrap_content" >

    </com.example.clearedittext.ClearEditText>

    <com.example.clearedittext.ClearEditText
        android:id="@+id/password"
        android:layout_marginLeft="10dip"
        android:layout_marginRight="10dip"
        android:layout_marginTop="10dip"
        android:drawableLeft="@drawable/account_icon"
        android:hint="输入密码"
        android:singleLine="true"
        android:inputType="textPassword"
        android:drawableRight="@drawable/delete_selector"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/username"
        android:background="@drawable/login_edittext_bg" >
    </com.example.clearedittext.ClearEditText>

    <Button
        android:id="@+id/login"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/password"
        android:layout_marginRight="10dip"
        android:layout_marginTop="25dp"
        android:layout_toRightOf="@+id/cb"
        android:background="@drawable/login_button_bg"
        android:text="登录"
        android:textColor="@android:color/white"
        android:textSize="18sp" />

    <CheckBox
        android:id="@+id/cb"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/login"
        android:layout_alignBottom="@+id/login"
        android:layout_alignParentLeft="true"
        android:text="显示密码" />

</RelativeLayout>

自定义EditText代码

package com.example.clearedittext;

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.text.Editable;
import android.text.InputType;
import android.text.Selection;
import android.text.Spannable;
import android.text.TextWatcher;
import android.text.method.HideReturnsTransformationMethod;
import android.text.method.PasswordTransformationMethod;
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;
import android.widget.Toast;

public class ClearEditText extends EditText implements  
        OnFocusChangeListener, TextWatcher { 
    /**
     * 删除按钮的引用
     */
    private Drawable mClearDrawable; 
    /**
     * 控件是否有焦点
     */
    private boolean hasFoucs;
    
    private boolean isShow = false;
 
    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,假如没有设置我们就使用默认的图片,getCompoundDrawables()获取Drawable的四个位置的数组
        mClearDrawable = getCompoundDrawables()[2]; 
        if (mClearDrawable == null) {
            mClearDrawable = getResources().getDrawable(R.drawable.delete_selector);
//            throw new NullPointerException("You can add drawableRight attribute in XML");
        } 
        //设置图标的位置以及大小,getIntrinsicWidth()获取显示出来的大小而不是原图片的带小
        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) {
                //getTotalPaddingRight()图标左边缘至控件右边缘的距离
                //getWidth() - getTotalPaddingRight()表示从最左边到图标左边缘的位置
                //getWidth() - getPaddingRight()表示最左边到图标右边缘的位置
                boolean touchable = event.getX() > (getWidth() - getTotalPaddingRight())
                        && (event.getX() < ((getWidth() - getPaddingRight())));
                
                if (touchable) {
                    this.setText("");
                }
            }
//            if(getCompoundDrawables()[0] != null){
//                boolean touchLeft = event.getX()>0 && event.getX()<getCompoundDrawables()[0].getIntrinsicWidth();
//                if(touchLeft){
//                    if(isShow==false){
//                        isShow = true;
//                        //设置为可见
//                        this.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
//                    }else{
//                        isShow = false;
//                        //设置为密码模式
//                        this.setTransformationMethod(PasswordTransformationMethod.getInstance());
//                    }
//                }
//            }
        }

        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.startAnimation(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;
    }
 
 
}

主Activity代码也就是调用代码

package com.example.clearedittext;

import android.app.Activity;
import android.os.Bundle;
import android.text.InputType;
import android.text.Selection;
import android.text.Spannable;
import android.text.TextUtils;
import android.text.method.HideReturnsTransformationMethod;
import android.text.method.PasswordTransformationMethod;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.Toast;

public class MainActivity extends Activity {
    private Toast mToast;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        final ClearEditText username = (ClearEditText) findViewById(R.id.username);
        final ClearEditText password = (ClearEditText) findViewById(R.id.password);
        final CheckBox cb = (CheckBox) findViewById(R.id.cb);
        
        ((Button) findViewById(R.id.login)).setOnClickListener(new OnClickListener() {
            
            @Override
            public void onClick(View v) {
                if(TextUtils.isEmpty(username.getText())){
                    //设置提示
                    username.setShakeAnimation();
                    showToast("用户名不能为空");
                    return;
                }
                
                if(TextUtils.isEmpty(password.getText())){
                    password.setShakeAnimation();
                    showToast("密码不能为空");
                    return;
                }
            }
        });
        
        cb.setOnCheckedChangeListener(new OnCheckedChangeListener() {
            
            @Override
            public void onCheckedChanged(CompoundButton arg0, boolean arg1) {
                if(arg1){
                    //密码设置为可见
                    password.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
                }else{
                    //密码设置为不可见
                    password.setTransformationMethod(PasswordTransformationMethod.getInstance());
                }
                CharSequence t = password.getText();
                
                //不管是可见还是不可见都将光标设置到最后一个文字的后面
                Selection.setSelection((Spannable)t,t.length());
                
                
            }
        });
    }
    /**
     * 显示Toast消息
     * @param msg
     */
    private void showToast(String msg){
        if(mToast == null){
            mToast = Toast.makeText(this, msg, Toast.LENGTH_SHORT);
        }else{
            mToast.setText(msg);
        }
        mToast.show();
    }
}

至于里面的图片啊什么大家就去网上找找吧

至此Android自定义控件实现带有清除按钮的EditText就写完啦，如果发现什么漏洞，欢迎大家指出