Android中ClearEditText自带清除功能的EditText

一、特点

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

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

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

二、创建一个ClearEditText类

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]);
    }

}

三、使用

<?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>

四、注意事项

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

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

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

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

Android中ClearEditText自带清除功能的EditText

猜你喜欢