自定义带清除功能的EditText

摘要

• 无论是带清除功能还是可以切换明文/密文的EditText，核心就是判断用户点击的位置是否在清除（切换）的图标位置，然后做出相应的设置就可以了。上效果图：

思路

• 使用EditText自带的DrawableRight属性来设置删除图片；
• 判断点击位置在右侧的图片范围时重置EditText的内容;
• 使用TextWatcher观察EdiText没有text内容的时候隐藏删除图标，有内容则显示。

如何判断点击的位置

• 重写OnTouchEvent方法
• 要判断点击的是右侧的删除图片需要满足2个条件（忽略Y轴方向）
  
  1. 点击位置的event.getX()要大于EditText自身宽度减去paddingRight和DrawPadding;
     event.getX() > getWidth() - drawableRight.getIntrinsicWidth() - getPaddingRight();
  2. 点击位置的event.getX()要小于EditText自身宽度减去paddingRight.
     event.getX() < getWidth() - getPaddingRight();

完整代码：

public class ClearEditText extends AppCompatEditText implements TextWatcher {

public static final String TAG = "ClearEditText";
boolean isShow = false;//是否已经显示右侧删除图标

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

public ClearEditText(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
}

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

@Override
public boolean onTouchEvent(MotionEvent event) {
    Drawable drawableRight = this.getCompoundDrawables()[2];
    if (drawableRight != null) {//有右边图标才去相应点击事件
        int action = event.getAction();
        if (action == MotionEvent.ACTION_UP) {
            boolean xFlag1 = event.getX() > getWidth() - drawableRight.getIntrinsicWidth() - getPaddingRight();
            boolean xFlag2 = event.getX() < getWidth() - getPaddingRight();
            if (xFlag1 && xFlag2) {
                setText("");
            }
        }
    }
    return super.onTouchEvent(event);
}

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

}

@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
    if (TextUtils.isEmpty(s)) {
        if (isShow) {
            isShow = !isShow;
            this.setCompoundDrawables(null, null, null, null);
        }
    } else {
        if (!isShow) {
            isShow = !isShow;
            Drawable drawable = this.getResources().getDrawable(R.drawable.right_delete);
            drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
            this.setCompoundDrawables(null, null, drawable, null);
        }
    }
}

@Override
public void afterTextChanged(Editable s) {

}
}

使用步骤：

 <com.csdnl.www.clearedittext.ClearEditText
    android:id="@+id/clearEditText"
    android:layout_width="300dp"
    android:layout_height="40dp"
    android:background="#ff0000"
    android:drawablePadding="10dp"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:gravity="center_vertical"
    android:hint="请输入用户名"
    android:paddingRight="20dp"
    android:textColor="#fff"
    android:textColorHint="#fff"/>

Github地址，可直接依赖

如果让你做一个可切换明文和密文的EditText你是否也会了呢？如在使用种遇到问题，欢迎指出，共同交流。谢谢！！！