自定义带清除功能的编辑框---ClearEditText

原创 2016年06月01日 23:10:06

简介

EditText控件,对大家来说应该掌握的最基本的控件之一。一个app最开始的登录界面,帐号和密码输入框就是EditText控件,

平时输入帐号长长的一串,输入后发现错了,又要一个一个删,这时候如果有一个清除功能来清除所有就好了。下面我们就来自

定义这么一个带清除功能的编辑框控件。

思路

看到这个功能我的第一想法是EditText的不是有个drawableRight属性来添加有图标么,我们可以通过这个来添加清除按钮啊。

那么问题来了:

1、清除按钮什么时候显示?又什么时候隐藏呢?

2、清除按钮的清除事件怎么写呢,可不可以在编辑框的单击事件(OnClickListener)处理清除按钮的点击事件呢?

带着这两个问题,我们来开始进行编写

实现

第一个问题,清除按钮什么时候显示,什么时候隐藏?显而易见,当编辑框获得了焦点,且编辑框内容长度大于0的时候才需要

显示,没有内容或者编辑框都没获取焦点,还显示个毛是不!所以,理清了前面的思路和问题,我们很容易知道,可以继承

EditText控件来实现,又因为需要获取焦点且根据内容长度来判断是否显示清除按钮,我们还得实现

OnFocusChangeListener、TextWatcher监听,啥也不说了,上代码:

      //EditText右侧的删除图标
private Drawable mClearDrawable;
//EditText是否聚焦
private boolean hasFocus;

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

public ClearEditText(Context context, AttributeSet attrs) {
    this(context, attrs, android.R.attr.editTextStyle);
}

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

private void init() {
    mClearDrawable = getCompoundDrawables()[2];//获取有图标,0,1,2,3分别代表,左上右下
    if (null == mClearDrawable) {
        mClearDrawable = getResources().getDrawable(R.mipmap.clear);
    }
    mClearDrawable.setBounds(0, 0, mClearDrawable.getIntrinsicWidth(), mClearDrawable.getIntrinsicHeight());
    //默认不显示clear图标
    setClearIconVisible(false);
    setOnFocusChangeListener(this);
    addTextChangedListener(this);
}

/**
 *  设置清除图标是否可见
 * @param visible
 */
private void setClearIconVisible(boolean visible) {
    Drawable right = (visible ? mClearDrawable : null);
    setCompoundDrawables(getCompoundDrawables()[0], getCompoundDrawables()[1],
            right, getCompoundDrawables()[3]);
}


@Override
public void onFocusChange(View v, boolean hasFocus) {
    this.hasFocus = hasFocus;
    if (hasFocus) {
        setClearIconVisible(getText().length() > 0);//获取焦点且长度大于0时,清除图标显示
    } else {
        setClearIconVisible(false);
    }

}

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

}

@Override
public void afterTextChanged(Editable s) {

}

@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
    if (hasFocus) {
        setClearIconVisible(s.length() > 0);//长度改变时,依条件判断是否显示图标
    }
}

如此则实现了符合条件的带清除按钮的编辑框,编辑框无内容时,清除图标不显示,有焦点且有内容时则显示。那如果实现点击

清除图标实现清除功能呢?现在我们来解决第二个问题,清除功能怎么实现?是否可以通过监听编辑框单击事件来实现呢?显

然,不符合要求,因为我们单击实现清除功能只针对清除图标区域,其他区域的单击不做清除处理,所以不能简单通过

OnClickListener来进行清除。那么,要如何实现呢?聪明如我们肯定就知道了,可以通过重写onTouchEvent事件,当

ACTION_UP动作时,看看当前触摸坐标是否在清除图标区域内,是则进行清除操作,否则不进行!ok,看代码:

    @Override
public boolean onTouchEvent(MotionEvent event) {
    if (MotionEvent.ACTION_UP == event.getAction()) {
        if (null != getCompoundDrawables()[2]) {
            int x = (int) event.getX();
            int y = (int) event.getY();
            Rect rect = getCompoundDrawables()[2].getBounds();
            int height = rect.height();//清除图标高
            int distance = (getHeight() - height) / 2;//清除图标顶部到控件顶部的距离
            boolean w = (x < getWidth() - getPaddingRight()) && (x > getWidth() - getTotalPaddingRight());
            boolean h = (y > distance) && (y < distance + height);
            if (w && h) {
                setText("");
            }
        }
    }
    return super.onTouchEvent(event);
}

好了,至此,带清除功能的编辑框控件,已完全实现,最后的展示效果如下

这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

带清除功能的输入框

转自:http://blog.csdn.net/xiaanming/article/details/11066685 今天给大家带来一个很实用的小控件ClearEditText,就是在Andro...

jquery十几行代码实现输入框自带清除按钮

在很多网站上的输入框会自带输入清除按钮,点一下就清除输入框的内容,非常方便。 网上找了很多代码,不是兼容性不好就是实现很麻烦,自己就花十几分钟,把这个功能实现了。 当输入框没有文字的时候不显示清除...

Android带清除功能的编辑框(ClearEditText)

在Android开发中,EditText控件是最基本的控件之一。最近按照项目需求要求做一个EditText控件,带有清空功能的控件,比如在登录页面,帐号和密码输入框中,输入后发现错误,需要一个一个删除...
  • lplj717
  • lplj717
  • 2016年08月01日 15:32
  • 1524

自定义控件之带标签的文本编辑框(不带命名空间)

package com.myself.custom.view; import android.content.Context; import android.util.AttributeSet; i...

自定义MFC编辑框以及按钮

  • 2015年08月20日 17:13
  • 8KB
  • 下载

自定义propertygrid弹出属性编辑框

看别人写的不详尽,再次总结自己摸索出来的东西: 首先建立一个窗体,该窗体包含你要重新编辑的属性值等内容,下图是我的界面,其中只包含一个richtextbox。 在该窗体后台写代码如下(这两段代码足够...

自定义数字编辑框

  • 2014年08月08日 17:44
  • 55KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:自定义带清除功能的编辑框---ClearEditText
举报原因:
原因补充:

(最多只允许输入30个字)