带清除功能的EditText

最新推荐文章于 2023-05-30 14:09:39 发布

SelenaAction

最新推荐文章于 2023-05-30 14:09:39 发布

阅读量585

点赞数

CC 4.0 BY-SA版权

分类专栏：自定义控件文章标签：自定义 EditText 清除

本文链接：https://blog.youkuaiyun.com/qq_37077360/article/details/73605295

自定义控件专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何通过继承EditText创建带有清除按钮的自定义输入框ClearableEditText。讲解了使用TextChangedListener监听内容变化来显示/隐藏清除图标，以及通过OnTouchListener处理点击清除图标的操作。并提供了项目源码下载链接。

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

在很多情况下，我们都会遇到需要清除编辑框的情况，特别是编辑内容过多时，一字字删除过于麻烦，所以如果编辑框自带按钮可以清除数据就再好不过了。本篇文章将对此有所讲解，方便大家学习与巩固。

我们都知道自定义控件的实现方式有三种，分别是：组合控件、自绘控件和继承已有控件。本篇涉及的控件就是通过继承已有控件的方式予以实现的。

以下是小编的效果图：

具体实现步骤如下：

1、首先新建一个类继承EditText，小编创建是ClearableEditText

package com.qian.clearableedittextdemo.custom;

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.support.v4.content.ContextCompat;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.widget.EditText;

import com.qian.clearableedittextdemo.R;

/**
 * Created by Administrator on 2017/6/22.
 */

public class ClearableEditText extends android.support.v7.widget.AppCompatEditText{


    private Drawable mClearableDrawable;

    public ClearableEditText(Context context) {
        super(context);
        init(context);
    }



    public ClearableEditText(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

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


    private void init(Context context) {
        //【1】判断编辑框右侧是否选择了默认图片：获取EditText的DrawableRight
        mClearableDrawable = getCompoundDrawables()[2];
        if (mClearableDrawable == null) {
           // mClearDrawable = getResources().getDrawable(R.drawable.delete_selector);//getDrawable()已废弃
            mClearableDrawable = ContextCompat.getDrawable(context,R.drawable.delete_icon);

        }

        mClearableDrawable.setBounds(0,0,mClearableDrawable.getIntrinsicWidth(),mClearableDrawable.getIntrinsicHeight());


        //【2】清除数据判断
        this.setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {

                ClearableEditText et = ClearableEditText.this;

                if(event.getAction()==MotionEvent.ACTION_UP){

                    //【2-1】判断清除按钮是否存在
                    if (et.getCompoundDrawables()[2] == null)
                        return false;


                    /*【2-2】判断是否点击了清除按钮
                     *    即：按下的位置在  EditText的宽度 - 图标到控件右边的间距 - 图标的宽度  和
                     *        EditText的宽度 - 图标到控件右边的间距之间（这里只考虑了水平位置上）
                     */
                    if((event.getX()>et.getWidth()-et.getPaddingRight()-mClearableDrawable.getIntrinsicWidth())
                            &&  (event.getX()<et.getWidth()-et.getPaddingRight())  ){


                        //【2-3】清除数据
                        et.setText("");
                    }
                }
                return false;
            }
        });

        //【3】是否显示清除按钮判断
        this.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {


            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {

            }

            @Override
            public void afterTextChanged(Editable s) {
               // Log.d("字数","字数："+s.length()+" ; 内容："+s.toString());
                setClearIconVisible(s.length() > 0);
            }
        });


    }

    /**
     * 功能：设置清除按钮显示/去除
     * @param visible 编辑框是否有内容
     */
    private void setClearIconVisible(boolean visible) {

            Drawable rightDrawable = visible ? mClearableDrawable : null;
            setCompoundDrawables(getCompoundDrawables()[0],
                    getCompoundDrawables()[1], rightDrawable, getCompoundDrawables()[3]);

    }

}

2、在xml中引用ClearEditText

 <com.qian.clearableedittextdemo.custom.ClearableEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="14sp"
            android:hint="请输入"
            android:background="@android:color/darker_gray"
            android:paddingBottom="5dp"
            android:paddingTop="5dp"
            android:paddingLeft="5dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"/>

以上主要涉及的是EditText的两个监听器的使用：通过TextChangedListener监听编辑框是否存在数据，有则显示清除icon,无则去除icon；通过OnTouchListener判断是否按下清除图标（需先判断其是否存在），以便后续操作

项目地址（免费）：http://download.youkuaiyun.com/detail/qq_37077360/9878516