19.Android 清除按钮EditText - AIEditText

最新推荐文章于 2021-11-11 20:16:48 发布

初心始终钰

最新推荐文章于 2021-11-11 20:16:48 发布

阅读量5.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Android Skill Android Skill 文章标签： android 清除按钮EditTx AIEditText 图片源码

本文链接：https://blog.youkuaiyun.com/qq_16430735/article/details/48809703

Android Skill 同时被 2 个专栏收录

60 篇文章

订阅专栏

Android Skill

59 篇文章

订阅专栏

本文介绍如何在Android中创建一个带有清除按钮的EditText，通过继承AppCompatEditText，使用setCompoundDrawables设置图片，实现OnFocusChangeListener、OnTouchListener和TextWatcher接口来控制图片的显示与文本的清除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

19.Android 清除按钮EditText - AIEditText

Android 清除按钮EditText - AIEditText

实现思路

1.继承AppCompatEditText类。
2.读取图片，每次都通过setCompoundDrawables将图片设置到EditText的右边。
3.实现OnFocusChangeListener接口，每次获得焦点的时候，进行一次文本的判断，如果有文本，显示图片；没有文本，隐藏图片。
4.实现View.OnTouchListener接口，每次onTouch的时候，判断是否点击到了图片，进行文本的清空。
5.实现TextWatcher接口，通过判断文本的长度，来决定图片是否显示。

继承AppCompatEditText类

    public AIEditText(Context context) {
        super(context);
        this.init(context);
    }

    public AIEditText(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.init(context);
    }

    public AIEditText(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.init(context);
    }

setCompoundDrawables设置图片

从TextView继承下来的方法setCompoundDrawables。

EditText也是TextView的子类，AppCompatEditText又是EditText的子类。

setCompoundDrawables(@Nullable Drawable left, @Nullable Drawable top, @Nullable Drawable right, @Nullable Drawable bottom)

    /**
     * @param context
     */
    private void init(Context context) {
        Drawable drawable = ContextCompat.getDrawable(context, R.drawable.abc_ic_clear_mtrl_alpha);
        Drawable wrappedDrawable = DrawableCompat.wrap(drawable);
        DrawableCompat.setTint(wrappedDrawable, super.getCurrentHintTextColor());
        this.mClearDrawable = wrappedDrawable;
        this.mClearDrawable.setBounds(0, 0, this.mClearDrawable.getIntrinsicHeight(), this.mClearDrawable.getIntrinsicHeight());
        this.setClearDrawableVisible(false);
        super.setOnTouchListener(this);
        super.setOnFocusChangeListener(this);
        this.addTextChangedListener(this);
    }

    private void setClearDrawableVisible(boolean visible) {
        this.mClearDrawable.setVisible(visible, false);
        final Drawable[] compoundDrawables = this.getCompoundDrawables();
        this.setCompoundDrawables(compoundDrawables[0], compoundDrawables[1], visible ? this.mClearDrawable : null, compoundDrawables[3]);
    }

实现OnFocusChangeListener接口

每次获得焦点的时候，进行一次文本的判断，如果有文本，显示图片；没有文本，隐藏图片。

    /**
     * Called when the focus state of a view has changed.
     *
     * @param v        The view whose state has changed.
     * @param hasFocus The new focus state of v.
     */
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        if (hasFocus) {
            this.setClearDrawableVisible(this.getText().length() > 0);
        } else {
            this.setClearDrawableVisible(false);
        }
        if (this.mOnFocusChangeListener != null)
            this.mOnFocusChangeListener.onFocusChange(v, hasFocus);
    }

实现View.OnTouchListener接口

每次onTouch的时候，判断是否点击到了图片，进行文本的清空。

    /**
     * @param v     The view the touch event has been dispatched to.
     * @param event The MotionEvent object containing full information about
     *              the event.
     * @return True if the listener has consumed the event, false otherwise.
     */
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        final int x = (int) event.getX();
        /**
         * x > ableEditWidth (totalWidth - paddingRight - clearDrawableWidth )
         * x > ableEditWidth == clearDrawable_X
         * so , when clearDrawable is visible and onClick it.
         */
        if (this.mClearDrawable.isVisible() && x > this.getWidth() - this.getPaddingRight() - this.mClearDrawable.getIntrinsicWidth()) {
            if (event.getAction() == MotionEvent.ACTION_UP) {
                this.setError(null);
                this.setText("");
            }
            return true;
        }
        return this.mOnTouchListener != null && this.mOnTouchListener.onTouch(v, event);
    }

实现TextWatcher接口

通过判断文本的长度，来决定图片是否显示。

    /**
     * @param text         The text the TextView is displaying
     * @param start        The offset of the start of the range of the text that was
     *                     modified
     * @param lengthBefore The length of the former text that has been replaced
     * @param lengthAfter  The length of the replacement modified text
     */
    @Override
    public void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {
        if (isFocused()) this.setClearDrawableVisible(text.length() > 0);
    }

AIEditText源码

public class AIEditText extends AppCompatEditText implements View.OnTouchListener, View.OnFocusChangeListener, TextWatcher {

    private Drawable mClearDrawable;
    private OnFocusChangeListener mOnFocusChangeListener;
    private OnTouchListener mOnTouchListener;

    public AIEditText(Context context) {
        super(context);
        this.init(context);
    }

    public AIEditText(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.init(context);
    }

    public AIEditText(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.init(context);
    }

    /**
     * Register a callback to be invoked when focus of this view changed.
     *
     * @param l The callback that will run.
     */
    @Override
    public void setOnFocusChangeListener(OnFocusChangeListener l) {
        this.mOnFocusChangeListener = l;
    }

    /**
     * Register a callback to be invoked when a touch event is sent to this view.
     *
     * @param l the touch listener to attach to this view
     */
    @Override
    public void setOnTouchListener(OnTouchListener l) {
        this.mOnTouchListener = l;
    }

    /**
     * @param context
     */
    private void init(Context context) {
        Drawable drawable = ContextCompat.getDrawable(context, R.drawable.abc_ic_clear_mtrl_alpha);
        Drawable wrappedDrawable = DrawableCompat.wrap(drawable);
        DrawableCompat.setTint(wrappedDrawable, super.getCurrentHintTextColor());
        this.mClearDrawable = wrappedDrawable;
        this.mClearDrawable.setBounds(0, 0, this.mClearDrawable.getIntrinsicHeight(), this.mClearDrawable.getIntrinsicHeight());
        this.setClearDrawableVisible(false);
        super.setOnTouchListener(this);
        super.setOnFocusChangeListener(this);
        this.addTextChangedListener(this);
    }

    private void setClearDrawableVisible(boolean visible) {
        this.mClearDrawable.setVisible(visible, false);
        final Drawable[] compoundDrawables = this.getCompoundDrawables();
        this.setCompoundDrawables(compoundDrawables[0], compoundDrawables[1], visible ? this.mClearDrawable : null, compoundDrawables[3]);
    }

    /**
     * @param v     The view the touch event has been dispatched to.
     * @param event The MotionEvent object containing full information about
     *              the event.
     * @return True if the listener has consumed the event, false otherwise.
     */
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        final int x = (int) event.getX();
        /**
         * x > ableEditWidth (totalWidth - paddingRight - clearDrawableWidth )
         * x > ableEditWidth == clearDrawable_X
         * so , when clearDrawable is visible and onClick it.
         */
        if (this.mClearDrawable.isVisible() && x > this.getWidth() - this.getPaddingRight() - this.mClearDrawable.getIntrinsicWidth()) {
            if (event.getAction() == MotionEvent.ACTION_UP) {
                this.setError(null);
                this.setText("");
            }
            return true;
        }
        return this.mOnTouchListener != null && this.mOnTouchListener.onTouch(v, event);
    }

    /**
     * Called when the focus state of a view has changed.
     *
     * @param v        The view whose state has changed.
     * @param hasFocus The new focus state of v.
     */
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        if (hasFocus) {
            this.setClearDrawableVisible(this.getText().length() > 0);
        } else {
            this.setClearDrawableVisible(false);
        }
        if (this.mOnFocusChangeListener != null)
            this.mOnFocusChangeListener.onFocusChange(v, hasFocus);
    }

    /**
     * @param text         The text the TextView is displaying
     * @param start        The offset of the start of the range of the text that was
     *                     modified
     * @param lengthBefore The length of the former text that has been replaced
     * @param lengthAfter  The length of the replacement modified text
     */
    @Override
    public void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {
        if (isFocused()) this.setClearDrawableVisible(text.length() > 0);
    }

    /**
     * @param s
     * @param start
     * @param count
     * @param after
     */
    @Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {
    }

    /**
     * @param s
     */
    @Override
    public void afterTextChanged(Editable s) {
    }

}