Android输入框控件ClearEditText实现清除功能

本文给大家带来一个很实用的小控件clearedittext，就是在android系统的输入框右边加入一个小图标，点击小图标可以清除输入框里面的内容，ios上面直接设置某个属性就可以实现这一功能，但是android原生edittext不具备此功能，所以要想实现这一功能我们需要重写edittext，接下来就带大家来实现这一小小的功能
我们知道，我们可以为我们的输入框在上下左右设置图片，所以我们可以利用属性android:drawableright设置我们的删除小图标，如图

我这里设置了左边和右边的图片，如果我们能为右边的图片设置监听，点击右边的图片清除输入框的内容并隐藏删除图标，这样子这个小功能就迎刃而解了，可是android并没有给允许我们给右边小图标加监听的功能，这时候你是不是发现这条路走不通呢，其实不是，我们可能模拟点击事件，用输入框的的ontouchevent()方法来模拟，
当我们触摸抬起（就是action_up的时候）的范围  大于输入框左侧到清除图标左侧的距离，小与输入框左侧到清除图片右侧的距离，我们则认为是点击清除图片，当然我这里没有考虑竖直方向，只要给清除小图标就上了监听，其他的就都好处理了，我先把代码贴上来，在讲解下

package com.example.clearedittext; 
 
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; 
  } 
  
  
} 

setcleariconvisible()方法，设置隐藏和显示清除图标的方法，我们这里不是调用setvisibility()方法，setvisibility()这个方法是针对view的，我们可以调用setcompounddrawables(drawable left, drawable top, drawable right, drawable bottom)来设置上下左右的图标
setonfocuschangelistener(this) 为输入框设置焦点改变监听，如果输入框有焦点，我们判断输入框的值是否为空，为空就隐藏清除图标，否则就显示
addtextchangedlistener(this) 为输入框设置内容改变监听，其实很简单呢，当输入框里面的内容发生改变的时候，我们需要处理显示和隐藏清除小图标，里面的内容长度不为0我们就显示，否是就隐藏，但这个需要输入框有焦点我们才改变显示或者隐藏，为什么要需要焦点，比如我们一个登陆界面，我们保存了用户名和密码，在登陆界面oncreate()的时候，我们把我们保存的密码显示在用户名输入框和密码输入框里面，输入框里面内容发生改变，导致用户名输入框和密码输入框里面的清除小图标都显示了，这显然不是我们想要的效果，所以加了一个是否有焦点的判断
setshakeanimation()，这个方法是输入框左右抖动的方法，之前我在某个应用看到过类似的功能，当用户名错误，输入框就在哪里抖动，感觉挺好玩的，其实主要是用到一个移动动画，然后设置动画的变化率为正弦曲线

接下来我们来使用它，activity的布局，两个我们自定义的输入框，一个按钮

<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:password="true" 
    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_marginleft="10dip" 
    android:layout_marginright="10dip" 
    android:background="@drawable/login_button_bg" 
    android:textsize="18sp" 
    android:textcolor="@android:color/white" 
    android:layout_below="@+id/password" 
    android:layout_margintop="25dp" 
    android:text="登录" /> 
 
</relativelayout>

 
然后就是界面代码的编写，主要是测试输入框左右晃动而已，比较简单

package com.example.clearedittext; 
 
import android.app.activity; 
import android.os.bundle; 
import android.text.textutils; 
import android.view.view; 
import android.view.view.onclicklistener; 
import android.widget.button; 
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); 
     
    ((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; 
        } 
      } 
    }); 
  } 
   
  /** 
   * 显示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软件编程有所帮助。