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

记录下一个很实用的小控件EditTextWithDel,就是在Android系统的输入框右边加入一个小图标,点击小图标可以清除输入框里面的内容,由于Android原生EditText不具备此功能,所以要想实现这一功能我们需要重写EditText。
效果图如下:

主要的思路就是为右边的图片设置监听,点击右边的图片清除输入框的内容并隐藏删除图标,因为我们不能直接给EditText设置点击事件,所以我们用记住我们按下的位置来模拟点击事件,用输入框的的onTouchEvent()方法来模拟.

package com.xiaolijuan.edittextwithdeldome;

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;

/**
 * @author: adan
 * @description: 自定义带有删除功能的EditText
 * @projectName: EditTextWithDelDome
 * @date: 2016-02-28
 * @time: 23:34
 */
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.mipmap.icon_delete_gray);
 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();
 }
}

setDrawable()方法,setCompoundDrawablesWithIntrinsicBounds(Drawable left, Drawable top, Drawable right, Drawable bottom)来在上、下、左、右设置图标,如果不想在某个地方显示,则设置为null。
接下来我们来使用它设置Activity的布局,一个我们自定义的输入框,一个按钮

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical">

 <RelativeLayout
 android:layout_width="match_parent"
 android:layout_height="60dp"
 android:layout_margin="25dp"
 android:background="#ffffff">

 <ImageView
  android:id="@+id/img"
  android:layout_width="25dp"
  android:layout_height="30dp"
  android:layout_alignParentLeft="true"
  android:layout_centerVertical="true"
  android:layout_margin="5dp"
  android:src="@mipmap/ic_launcher" />

 <ImageView
  android:layout_width="match_parent"
  android:layout_height="1dp"
  android:layout_alignParentBottom="true"
  android:layout_marginLeft="2dp"
  android:layout_marginRight="2dp"
  android:background="#56AB55" />

 <com.xiaolijuan.edittextwithdeldome.EditTextWithDel
  android:id="@+id/et_phoneNumber"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_alignParentBottom="true"
  android:layout_alignParentRight="true"
  android:layout_alignParentTop="true"
  android:layout_margin="2dp"
  android:layout_toRightOf="@+id/img"
  android:background="#ffffff"
  android:hint="请输入手机号码"
  android:maxLength="11"
  android:phoneNumber="true"
  android:singleLine="true" />
 </RelativeLayout>

 <Button
 android:id="@+id/btn"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_margin="25dp"
 android:background="#56AB55"
 android:text="确定" />
</LinearLayout>

然后就是界面代码的编写,主要测试下输入框

package com.xiaolijuan.edittextwithdeldome;

import android.app.Activity;
import android.os.Bundle;
import android.text.TextUtils;
import android.view.View;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends Activity {
 private EditText userName;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 userName = (EditText) findViewById(R.id.et_phoneNumber);
 findViewById(R.id.btn).setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View v) {
  if (TextUtils.isEmpty(userName.getText().toString())){
   Toast.makeText(getApplicationContext(),"手机号码为空",Toast.LENGTH_LONG).show();
   return;
  }
  Toast.makeText(getApplicationContext(),userName.getText().toString(),Toast.LENGTH_LONG).show();
  }
 });
 }
}

源码下载:http://xiazai.jb51.net/201609/yuanma/EditTextWithDel(jb51.net).rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android UI设计系列之自定义EditText实现带清除功能的输入框(3)

    最近公司的产品在陆续做升级,上级领导给的任务是优化代码结构以及项目架构,力争把项目写的精巧简练,于是我们满工程找冗余... 我们都知道每一个项目基本上都是有登陆页的,在登陆页中肯定是少不了输入框了,当我们在输入框中输入数据后如果输入的内容不正确或者是错误的或者是想重新输入,如果嗯键盘上的删除键就得一个一个的去删除,这时候我们或许就想要是能有一个标记当点击了这个标记能把我们刚刚输入的内容清空就好了.这样可以极大的提升用户体验,就拿QQ的登陆来说吧,效果如下: 当点击密码框右侧的小×图标时输入的内容

  • Android输入框控件ClearEditText实现清除功能

    本文给大家带来一个很实用的小控件ClearEditText,就是在Android系统的输入框右边加入一个小图标,点击小图标可以清除输入框里面的内容,IOS上面直接设置某个属性就可以实现这一功能,但是Android原生EditText不具备此功能,所以要想实现这一功能我们需要重写EditText,接下来就带大家来实现这一小小的功能 我们知道,我们可以为我们的输入框在上下左右设置图片,所以我们可以利用属性android:drawableRight设置我们的删除小图标,如图 我这里设置了左边和右边的图

  • Android 带清除功能的输入框控件实例详解

    Android 带清除功能的输入框控件实例详解 今天,看到一个很好的自定义输入框控件,于是记录一下. 效果很好: 一,自定义一个类,名为ClearEditText package com.example.clearedittext; import android.content.Context; import android.graphics.drawable.Drawable; import android.text.Editable; import android.text.TextWatc

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

    记录下一个很实用的小控件EditTextWithDel,就是在Android系统的输入框右边加入一个小图标,点击小图标可以清除输入框里面的内容,由于Android原生EditText不具备此功能,所以要想实现这一功能我们需要重写EditText. 效果图如下: 主要的思路就是为右边的图片设置监听,点击右边的图片清除输入框的内容并隐藏删除图标,因为我们不能直接给EditText设置点击事件,所以我们用记住我们按下的位置来模拟点击事件,用输入框的的onTouchEvent()方法来模拟. packa

  • Android带清除按钮、密码可见小眼睛的输入框

    前言 相信不少小伙伴在开发登录功能时候,或多或少都会用到输入框清除按钮.密码可见与隐藏小眼睛按钮,我之前也是但写这个功能,但是在找回密码.忘记密码里面还要重新写一次很是麻烦,现在我把它只做了一个自定义控件,可以配置清除按钮.密码可见小眼睛是否显示以及图标,有渐隐渐显和横向移动动画,不知道怎么上传可以直接观看的视频,附上三张效果图,可以点击链接观看视频是否是你想要的效果.   一.自定义控件ClearEditText 我的这个自带清除.小眼睛的控件,是一个自定义控件,控件名称ClearEditTe

  • 微信小程序 input输入框控件详解及实例(多种示例)

    微信小程序 input输入框控件 今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. 首先主页面中将登录的样式进行了简单展示和使用, 代码如下: <!--index.wxml--> <!--如果在同一个form表单中创建了多个input输入框,可以给给每个输入框,创建自己的 name="userName"属性,可以区别哪个输入框,并通过添

  • Android重写View实现全新的控件

    通常情况下,Android实现自定义控件无非三种方式. Ⅰ.继承现有控件,对其控件的功能进行拓展. Ⅱ.将现有控件进行组合,实现功能更加强大控件. Ⅲ.重写View实现全新的控件 本文来讨论最难的一种自定义控件形式,重写View来实现全新的控件. 首先,我们要明白在什么样的情况下,需要重写View来实现一种全新的控件,一般当我们遇到了原生控件无法满足我们现有的需求的时候,我们此时就可以考虑创建一个全新的View来实现我们所需要的功能.创建一个全新View实现自定义控件,无非分成这么几步: Ⅰ.在

  • Android自定义星星可滑动评分控件

    本文实例为大家分享了Android自定义星星可滑动评分控件的具体方法,供大家参考,具体内容如下 此控件通过线性布局结合ImageView来实现. 具有展示分数,滑动评分功能,可设置0-10分,自行设置星星图片,是否可点击与滑动,星星间距. 效果如下: 需准备好下面三张图片 先看自定义属性: <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name

  • 详解Android 裸眼3D效果View控件

    描述:这是一个裸眼3D效果的控件View. Tips:本项目代码部分逻辑参考于其他文章(自如的3D裸眼实现),众人拾柴火焰高,希望大家能多多补充. 项目代码:https://gitee.com/jiugeishere/uidesign 控件效果如下: 实现功能: 实现三层图片叠加效果(裸眼3D效果) 可设置每层图片移动速率 可设置每层图片移动的限制度数 可直接设置图片或引入图片 设计核心: 主要的设计核心是依赖于传感器对手机晃动的监听(重力感应监听器),对每层图片进行不同的移动,实现仿3D效果.

  • Qt实现自定义验证码输入框控件的方法

    前言 本文实现了自定义的验证码输入框控件.控件包括图标.输入框.获取验证码按钮.验证码获取倒计时标签.支持鼠标点击获取验证码按钮后开始显示倒计时功能,倒计时为0时,才可以在此点击获取验证码按钮.效果如图: 主要的编程思想还是实现自定义控件的封装性和共用性. UI布局: 控件1:QWidget,实现整个控件的封装,这个控件使用水平布局,实现控件的水平摆放,同时,当其中一个控件隐藏时,位置会重新更新,实现在控件的后面只显示获取验证码和倒计时两个控件中的一个. 控件2:QLabel,实现展示盾牌图标.

  • Android中日期与时间设置控件用法实例

    本文实例讲述了Android中日期与时间设置控件用法.分享给大家供大家参考.具体如下: 1.日期设置控件:DatePickerDialog 2.时间设置控件:TimePickerDialog 实例代码: 页面添加两个Button,单击分别显示日期设置控件和时间设置控件,还是有TextView控件,用于显示设置后的系统时间 main.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout x

随机推荐