Android中自定义带图标和清空内容按钮的EditText控件

 

步骤如下

1：实现自定义控件的布局

 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
	<EditText
	    android:id="@+id/et"
	    android:background="@drawable/bg_edittext"
	    android:layout_width="match_parent"
	    android:layout_height="match_parent"
	    android:layout_gravity="left|center_vertical"
	    android:drawableLeft="@drawable/search1"
	    android:paddingRight="30dp"
	    android:singleLine="true" />
	<ImageButton
	    android:id="@+id/ib"
	    android:visibility="gone"
	    android:layout_alignParentRight="true"
	    android:layout_width="20dp"
	    android:layout_marginLeft="5dp"
	    android:layout_marginRight="5dp"
	    android:layout_height="match_parent"
	    android:scaleType="centerInside"
	    android:background="#00000000"
	    android:src="@drawable/delete" />
</RelativeLayout>

 

 内容很简单，一个EditText 和 一个 ImageButton，其中android:drawableLeft="@drawable/search1"是输入框左侧图标

另外：android:background="@drawable/bg_edittext"这里引用自定义的背景，在我的另一篇文章里面有介绍：http://leoaioria.iteye.com/blog/2207587，如不用该背景，直接去掉这行或者修改即可。

 

2：定义好布局之后就是使用该布局并写清空内容和隐藏、显示删除按钮的事件了，代码如下

 

package com.hq.util;

import android.content.Context;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.LinearLayout;

import com.hq.xbk2.R;

public class EditClear extends LinearLayout{
	ImageButton ib;
	EditText et;
	
	public EditClear(Context context) {
		super(context);
	}
	
	public EditClear(Context context, AttributeSet attrs) {
		super(context, attrs);
		LayoutInflater.from(context).inflate(R.layout.editclear, this, true);
		init();
	}
	
	private void init() {
		ib = (ImageButton) findViewById(R.id.ib);
		et = (EditText) findViewById(R.id.et);
		et.addTextChangedListener(tw);// 为输入框绑定一个监听文字变化的监听器
		// 添加按钮点击事件
		ib.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				hideBtn();// 隐藏按钮
				et.setText("");// 设置输入框内容为空
			}
		});
	}
	
	// 当输入框状态改变时，会调用相应的方法
	TextWatcher tw = 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) {
			if (s.length() == 0) {
				hideBtn();// 隐藏按钮
			} else {
				showBtn();// 显示按钮
			}
		} 
	};
	
	public void hideBtn() {
	// 设置按钮不可见
		if (ib.isShown()){
			ib.setVisibility(View.GONE);
		}
	}
	
	public void showBtn() {
		// 设置按钮可见
		if (!ib.isShown()){
			ib.setVisibility(View.VISIBLE);
		}
	}
}

 

 注意该类：用到了TextWatcher ，有兴趣的同学可以查阅下这方面的资料

 

3：以上步骤完成后，自定义控件就实现了，接下来就是在其它布局文件中使用了，使用方法很简单

 

<com.hq.util.EditClear
    android:layout_width="match_parent"
    android:layout_height="35dp"/>

 

写上完整的类名就可以了