实现带清除效果的EditText

原文 http://blog.csdn.net/bufanni12/article/details/30228671

Android一直没有提供类似于ios中自带清除效果的输入框（ios只要只要添加属性即可实现），
所以在Android当中 想要实现此效果就需要使用自定义控件的方式实现。

思路：可以使用一个Linearlayout里面横向布局一个EditText和一个删除的图片，监听输入框的焦点和文字变化，
设置图片的显隐和点击清除事件。但是这么做些弊端，首先增加了UI布局的层级结构不利于UI结构的优化而且可能会出现文字过长遮挡住图片的情况
。所以采用自定义控件继承于EditText，使用getCompoundDrawables获得上下左右添加的图片，通过监听焦点变化和输入内容变化控制周围图片的显隐以及清除事件，
（里面还附加了一个晃动的动画，例如当注册时如果输入为空可以进行晃动提示）。

代码：

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,假如没有设置我们就使用默认的图片,2是获得右边的图片  顺序是左上右下（0,1,2,3,）
    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(500);
    return translateAnimation;
  }


}

下面是使用自定义控件xml：

<com.exmaple.ClearEditText
  android:id="@+id/etUserName"
  android:layout_width="fill_parent"
  android:layout_height="30dip"
  android:background="@null"
  android:drawableLeft="@drawable/user_login"
  android:drawablePadding="7dip"
  android:hint="@string/str_hit_inputname"
  android:singleLine="true"
  android:textSize="17sp" >


  <requestFocus />
 </com.exmaple.ClearEditText>