android 实现edittext输入内容后可以点击右侧小图片进行清除内容

在实际的开发过程中,我们会遇到输入密码输入搜索汉字这样的需求,然后当我们输入了字符之后,又不想一下一下的后退删掉,这时候就需要我们的旁边的小按钮来实现了

我们要实现的效果是这个样子的.

点击小X号就可以把我们的edittext的内容清空,本来想应该是一个editext然后他的drawableRight是一个图片,但是这个图片我们不可以点击,这显然不能满足我们的需求.然后就进行了思考,该怎么实现实现这个呢..

最后想出来我们可以自定义一个xml布局(RelativeLayout),布局里面放一个edittext和一个小按钮,然后我们再新建一个类,继承自一个RelativeLayout

然后我们使用LayoutInfalter加载这个布局,然后对这个布局里面的控件进行操作就可以了

好,下面直接上代码:

布局的代码:

<?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="wrap_content"
     >

    <EditText
        android:id="@+id/et_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerVertical="true"
        >
        <requestFocus />
    </EditText>

    <ImageButton
        android:id="@+id/iv_clear"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:background="@android:color/transparent"
        android:src="@drawable/search_clear_normal"
        android:visibility="invisible" />
    
</RelativeLayout>

java类代码:

package com.example.custom;

import com.example.testedittextcustom.R;

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.RelativeLayout;

public class customedittext extends RelativeLayout {

	private EditText mEditText;
	private ImageButton mButton;
	
	
	//自定义组件应该先实现他的构造方法
	public customedittext(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
		initView(context);
	}
	
	public customedittext(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
		initView(context);
	}
	
	
	public customedittext(Context context, AttributeSet attrs, int defStyleAttr) {
		super(context, attrs, defStyleAttr);
		// TODO Auto-generated constructor stub
		initView(context);
	}
	
	private void initView(Context context) {
		LayoutInflater inflater = LayoutInflater.from(context);
		View view = inflater.inflate(R.layout.edittextcustom, this);
		mEditText = (EditText) view.findViewById(R.id.et_view);
		mButton = (ImageButton) findViewById(R.id.iv_clear);
		
		mEditText.addTextChangedListener(new TextWatcher() {
			@Override
			public void onTextChanged(CharSequence s, int start, int before, int count) {
				if(s.length()>0) {
					mButton.setVisibility(View.VISIBLE);
				} else {
					mButton.setVisibility(View.INVISIBLE);
				}
			}
			@Override
			public void beforeTextChanged(CharSequence s, int start, int count,
					int after) {
			}
			@Override
			public void afterTextChanged(Editable s) {
			}
		});
		
		mButton.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				mEditText.getText().clear();//清空输入框
			}
		});
		
	}
	

}

然后我们把这个java类,当作一个普通的控件使用就可以了.只是类名貌似会有点长