EditText末尾添加删除按钮

EditText末尾添加删除按钮

看一下效果图吧：

这里面用到了多个安卓知识，下面是详解：

1.在res目录下创建drawable文件夹，在该文件夹中添加xml文件,选择类型是selector,选择器

选择器能更帮助我们快速定义各种情况下控件的外关，语法简单。

添加如下代码:

my_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_focused="true">
        <shape >
            <corners android:radius="8dp"/>
            <stroke android:width="0.5dp"
                android:color="#3399ee"
                />
            <solid android:color="#3399ee"/>
            <padding android:left="15dp" android:right="15dp"/>
        </shape>
    </item>
	<item android:state_focused="false">
        <shape >
            <corners android:radius="8dp"/>
            <stroke android:width="0.5dp"
                android:color="#2266aa"
                />
            <padding android:left="15dp" android:right="15dp"/>
        </shape>
    </item>
    <item>
        <shape >
            <corners android:radius="8dp"/>
            <stroke android:width="0.5dp"
                android:color="#2266aa"
                />
            <padding android:left="15dp" android:right="15dp"/>
        </shape>
    </item>
</selector>

2.在/res/values/下创建my_style.xml文件，style就像Html中的样式表那样，可以定义控件的各种属性，把相同的属性写进去，就可以实现复用效果。

my_style.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="mystyle">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:background">@drawable/my_selector</item>
        <item name="android:layout_margin">10dp</item>
    </style>
</resources>

在第6行引用了上面定义的my_selector

3.自定义EditText，在项目的包中添加一个类名叫ClearEdit.java

/src/com.example.myclearedittext/ClearEdit.java:

package com.example.myclearedittext;

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

public class ClearEdit extends EditText
{
	public static final int CLEAR_ICON_HEIGHT=20;//删除图标的宽高
	Drawable dr;
	
	public ClearEdit(Context context, AttributeSet attrs) {
		super(context, attrs);
		dr=getResources().getDrawable(android.R.drawable.ic_delete);//获取系统的×图片
		dr.setBounds(0, 0, CLEAR_ICON_HEIGHT,CLEAR_ICON_HEIGHT);//设置绘制范围

<span style="white-space:pre">		</span>//为EditText添加文本变化的监听器
		this.addTextChangedListener(new TextWatcher() {
			@Override
			public void onTextChanged(CharSequence s, int start, int before, int count) 
			{
				if(TextUtils.isEmpty(s))
				{
					ClearEdit.this.setCompoundDrawables(null, null, null, null);//如果文本为空，则不显示×号
				}
				else
				{
					ClearEdit.this.setCompoundDrawables(null, null, dr, null);<span style="font-family: Arial, Helvetica, sans-serif;">//如果文本不为空，则在右侧显示×号</span>

				}
			}
			@Override
			public void beforeTextChanged(CharSequence s, int start, int count, int after) {}
			@Override
			public void afterTextChanged(Editable s) {}
		});
	}
	//为自定义EditText添加触摸事件
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		
		if(event.getAction()==MotionEvent.ACTION_DOWN)
		{
			float x= event.getX();//点击的横坐标
			float y= event.getY();//点击的纵坐标
			int width = getWidth();//获取控件的宽度
			int height = getHeight();//获取控件的高度
			int top=(height-CLEAR_ICON_HEIGHT)/2;
			int btm=top+CLEAR_ICON_HEIGHT;

<span style="white-space:pre">			</span>//下面判断是否点击到了删除图标
			if(x>=width-CLEAR_ICON_HEIGHT-getPaddingRight()&&x<=width-getPaddingRight()&&y>=top&&y<=btm)
			{
				setText("");
			}
		}
		return super.onTouchEvent(event);
	}
	
}

4.布局文件/res/layout/activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="${relativePackage}.${activityClass}" >
    
    <com.example.myclearedittext.ClearEdit style="@style/mystyle" />
    <EditText style="@style/mystyle"/>
	
</LinearLayout>

第8行和第9行引用了上面定义的mystyle

第8行是自定义EditText

第9行是系统提供的EditText

布局效果图