android自定义文本框,[Android]自定义带删除输入框

在项目开发中，带删除按钮输入框也是人们常常用到的，该文章便介绍一下如何创建一个带删除输入框。其中，需要解决的问题如下：

a)创建自定义editText类

b)在自定义editText中显示删除图片

c)根据输入框的输入情况显示或隐藏图片

d)点击删除图片文字消失，图片隐藏

e)根据输入框焦点失去和获得状态显示或隐藏图片

好了，问题明确了，开始实现功能：

a)创建一个名为MyClearEditText的class文件，并集成EditText，实现其构造方法：

public MyClearEditText(Context context) {

this(context, null);

// TODO Auto-generated constructor stub

}

public MyClearEditText(Context context, AttributeSet attrs) {

this(context, attrs, android.R.attr.editTextStyle);

// TODO Auto-generated constructor stub

}

public MyClearEditText(Context context, AttributeSet attrs, int defStyle) {

super(context, attrs, defStyle);

}

ok，第一个问题解决了，进入第二步。

b)在editText中，我们若想显示上下左右方向的图片，有着setCompoundDrawables或setCompoundDrawablesWithIntrinsicBounds方法，具体的话，可以去百度一下其区别，在这里，我使用的是setCompoundDrawablesWithIntrinsicBounds方法。代码如下：

/**

* 初始化清除的图片

*/

private void initClearDrawable() {

draw = getCompoundDrawables()[2];

// 判断清除的图片是否为空

if (draw == null) {

draw = getResources().getDrawable(R.drawable.editdelete);

}

// 为输入框设置图片

this.setCompoundDrawablesWithIntrinsicBounds(null, null, draw, null);

}

思路为：先找到editText中右边的图片，若为null，则为其设置默认图片，然后再为输入框显示图片，便获得下图效果：

c)需要获得输入框的情况，便要实现TextWatcher接口。

监听：

this.addTextChangedListener(this);

需要实现的方法：

public void onTextChanged(CharSequence text, int start, int lengthBefore,

int lengthAfter) {

// 判断输入框中是否有内容

if (text.length() > 0) {

this.setCompoundDrawablesWithIntrinsicBounds(null, null, draw, null);

} else {

this.setCompoundDrawablesWithIntrinsicBounds(null, null, null, null);

}

}

public void beforeTextChanged(CharSequence s, int start, int count,

int after) {

// TODO Auto-generated method stub

}

public void afterTextChanged(Editable s) {

// TODO Auto-generated method stub

}

d)怎么监听是点击到那个删除图片的呢，这是一个值得思考的问题，在这里，有一种解决方案，那便是触点监听，根据点击的位置来判断是否在图片所处位置的范围内：

@Override

public boolean onTouchEvent(MotionEvent event) {

// 判断触碰是否结束

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

// 判断所触碰的位置是否为清除的按钮

if (event.getX() > (getWidth() - getTotalPaddingRight())

&& event.getX() < (getWidth() - getPaddingRight())) {

// 将editText里面的内容清除

setText();

}

}

return super.onTouchEvent(event);

}

实现以上步骤后，大致的自定义删除输入框功能便可以实现了，但是还是有些问题，假如有两个输入框，当向其中一个输入框输入文字后，点击另外一个输入框，上一个输入框还是会显示删除图片，解决方法如下：

e)既然是根据焦点的得失来判断，当然是实现焦点监听的方法：

@Override

protected void onFocusChanged(boolean focused, int direction,

Rect previouslyFocusedRect) {

// TODO Auto-generated method stub

super.onFocusChanged(focused, direction, previouslyFocusedRect);

// 判断焦点失去和得到时的操作

if (focused && !this.getText().toString().equals()) {

this.setCompoundDrawablesWithIntrinsicBounds(null, null, draw, null);

} else {

this.setCompoundDrawablesWithIntrinsicBounds(null, null, null, null);

}

}

ok，完整版的自定义带删除输入框就完全实现了。为方便大家学习，以下为完整代码：

package com.xiaoyan.xiaoyanlibrary.common.widget.edittext;

import com.xiaoyan.xiaoyanlibrary.R;

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.view.MotionEvent;

import android.widget.EditText;

/**

* 自定义一个具有清除功能的editText

*

* @author xiejinxiong

*

*/

public class MyClearEditText extends EditText implements TextWatcher {

/** 储存清除的图片 */

private Drawable draw;

public MyClearEditText(Context context) {

this(context, null);

// TODO Auto-generated constructor stub

}

public MyClearEditText(Context context, AttributeSet attrs) {

this(context, attrs, android.R.attr.editTextStyle);

// TODO Auto-generated constructor stub

}

public MyClearEditText(Context context, AttributeSet attrs, int defStyle) {

super(context, attrs, defStyle);

initClearDrawable();

this.addTextChangedListener(this);

}

@Override

protected void onFocusChanged(boolean focused, int direction,

Rect previouslyFocusedRect) {

// TODO Auto-generated method stub

super.onFocusChanged(focused, direction, previouslyFocusedRect);

// 判断焦点失去和得到时的操作

if (focused && !this.getText().toString().equals()) {

this.setCompoundDrawablesWithIntrinsicBounds(null, null, draw, null);

} else {

this.setCompoundDrawablesWithIntrinsicBounds(null, null, null, null);

}

}

/**

* 初始化清除的图片

*/

private void initClearDrawable() {

draw = getCompoundDrawables()[2];

// 判断清除的图片是否为空

if (draw == null) {

draw = getResources().getDrawable(R.drawable.editdelete);

}

// 将输入框默认设置为没有清除的按钮

this.setCompoundDrawablesWithIntrinsicBounds(null, null, null, null);

}

public void onTextChanged(CharSequence text, int start, int lengthBefore,

int lengthAfter) {

// 判断输入框中是否有内容

if (text.length() > 0) {

this.setCompoundDrawablesWithIntrinsicBounds(null, null, draw, null);

} else {

this.setCompoundDrawablesWithIntrinsicBounds(null, null, null, null);

}

}

public void beforeTextChanged(CharSequence s, int start, int count,

int after) {

// TODO Auto-generated method stub

}

public void afterTextChanged(Editable s) {

// TODO Auto-generated method stub

}

@Override

public boolean onTouchEvent(MotionEvent event) {

// 判断触碰是否结束

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

// 判断所触碰的位置是否为清除的按钮

if (event.getX() > (getWidth() - getTotalPaddingRight())

&& event.getX() < (getWidth() - getPaddingRight())) {

// 将editText里面的内容清除

setText();

}

}

return super.onTouchEvent(event);

}

}