Android自定义控件 - 带清除功能的输入框

原创 2017年09月21日 11:32:00

Android自定义控件 - 带清除功能的输入框

在业务需求中我们经常会用到输入框快捷删除输入内容的操作,然后Android的EditText控件是不带清除功能的,所以我们得自己写一个带清除功能的EditText。

先看看效果图:
这里写图片描述
实现该控件只需要两步:
- 自定义一个EditText(继承自EditText类)
- 布局文件中引用

下面贴代码:

  1. 自定义的EditText类 - EditTextWithDel
package cn.cqlwkj.lwinspection.view;

import android.content.Context;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.widget.EditText;

import cn.cqlwkj.lwinspection.R;

/**
 * Created by pengbo on 2017-09-21.
 * 带删除的输入框
 */

public class EditTextWithDel extends EditText{
    private final static String TAG = "EditTextWithDel";
    private Drawable imgInable;
    private Drawable imgAble;
    private Context mContext;

    public EditTextWithDel(Context context) {
        super(context);
        mContext = context;
        init();
    }

    public EditTextWithDel(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        mContext = context;
        init();
    }
    public EditTextWithDel(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        init();
    }

    private void init() {
        imgAble = mContext.getResources().getDrawable(
               R.drawable.ic_delete);
        addTextChangedListener(new TextWatcher() {
            @Override
            public void onTextChanged(CharSequence s, int start, int before,
                                      int count) {
            }

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

            @Override
            public void afterTextChanged(Editable s) {
                setDrawable();
            }
        });
        setDrawable();
    }

    // 设置删除图片
    private void setDrawable() {
        if (length() < 1) {
            setCompoundDrawablesWithIntrinsicBounds(null, null, null, null);
        } else {
            setCompoundDrawablesWithIntrinsicBounds(null, null, imgAble, null);
        }
    }

    // 处理删除事件
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (imgAble != null && event.getAction() == MotionEvent.ACTION_UP) {
            int eventX = (int) event.getRawX();
            int eventY = (int) event.getRawY();
            Log.e(TAG, "eventX = " + eventX + "; eventY = " + eventY);
            Rect rect = new Rect();
            getGlobalVisibleRect(rect);
            rect.left = rect.right - 50;
            if (rect.contains(eventX, eventY))
                setText("");
        }
        return super.onTouchEvent(event);
    }

    @Override
    protected void finalize() throws Throwable {
        super.finalize();
    }
}

注意:ic_delete是你自己使用的删除按钮的图片。

  • 2、 在布局文件中使用自定义的控件
 <cn.cqlwkj.lwinspection.view.EditTextWithDel
                    android:id="@+id/edit_input"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentTop="true"
                    android:layout_margin="10dp"
                    android:layout_toRightOf="@+id/img"
                    android:hint="xxx"
                    android:inputType="numberDecimal"
                    android:layout_weight="0.7"
                    android:singleLine="true"
                    android:background="@drawable/edit_shape"/>

至此,我们就完成了一个自定义输入框。

以上内容基于其他博文修改而来,原博文地址:http://blog.csdn.net/qq_20785431/article/details/50762834

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

[自定义控件]带有删除按钮的输入框

很简单也很常用的一个控件 不多说 直接开始吧! 1.继承EditText类 2.监听输入框的文字变化是否显示x 3.为显示的x做个点击事件即可 代码如下: ...
  • g777520
  • g777520
  • 2016年11月18日 14:44
  • 709

Android 带清除功能的输入框控件EditTextWithDel

记录下一个很实用的小控件EditTextWithDel,就是在Android系统的输入框右边加入一个小图标,点击小图标可以清除输入框里面的内容,由于Android原生EditText不具备此功能,所以...
  • qq_20785431
  • qq_20785431
  • 2016年02月29日 00:28
  • 3548

Android 带清除功能的输入框控件ClearEditText,仿IOS的输入框

今天给大家带来一个很实用的小控件ClearEditText,就是在Android系统的输入框右边加入一个小图标,点击小图标可以清除输入框里面的内容,IOS上面直接设置某个属性就可以实现这一功能,但是A...
  • xiaanming
  • xiaanming
  • 2013年09月04日 17:33
  • 75810

android 带清除功能的输入框控件

今天,看到一个很好的自定义输入框控件,于是记录一下。 效果很好: 一,自定义一个类,名为ClearEditTextpackage com.example.cleared...
  • bzlj2912009596
  • bzlj2912009596
  • 2017年06月02日 08:43
  • 1662

Android仿微信带清除功能的输入框ClearEditText的实现

今天跟大家分享一个控件ClearEditText-带清除功能的输入框。其实这个控件在IOS中很简单,只需要设置属性即可,但是在Android中就变得不是那么容易了。先说说我自己的设计思路:首先,输入框...
  • u013220682
  • u013220682
  • 2016年03月23日 19:15
  • 1360

实现输入框自带清除按钮

最近,项目中需要,在输入框获取焦点是动态显示“×”图标。即在输入框中输入内容时,右边显示“×”按钮;输入框为空时,“×”按钮消失。难点在于获取焦点的同时,获取输入内容。 注意:本例子的样式基于boo...
  • qq_26780317
  • qq_26780317
  • 2018年01月08日 14:20
  • 53

[Android]自定义带删除输入框

在项目开发中,带删除按钮输入框也是人们常常用到的,该文章便介绍一下如何创建一个带删除输入框。其中,需要解决的问题如下: a)创建自定义editText类 b)在自定义editText中显示删除图片...
  • u011596810
  • u011596810
  • 2015年07月20日 16:24
  • 878

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

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

实现带记忆功能的AutoCompleteTextView

目的实现:通过之前的textview输入,将其记录下来,并可以作为之后的输入提示来用。 1、实现数据库,将输入的数据存入数据库中 DBhelperpublic class DBhelper ext...
  • sinat_29962405
  • sinat_29962405
  • 2016年04月25日 21:59
  • 411

带清除功能的输入框

转自:http://blog.csdn.net/xiaanming/article/details/11066685 今天给大家带来一个很实用的小控件ClearEditText,就是在Andro...
  • L_Y_F_X_T
  • L_Y_F_X_T
  • 2015年09月18日 13:13
  • 1105
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android自定义控件 - 带清除功能的输入框
举报原因:
原因补充:

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