android edittext清除功能,Android：带一键清除功能的EditText

作为一个前端应用开发者，下面这样的场景可以说是屡见不鲜了？

20181218135459.png

当然了，本文所要讲的重点不是如何做一个登录页面，而是输入框后面的那个清除按钮。你可能会说了，这有什么好讲的，在EditText后面加一个按钮就行了。没错，这样也可以实现想要的效果，但是如果一个页面有10个甚至更多的EditText，那就意味着你的布局会变得很臃肿，并且需要为每个EditText设置监听来控制其删除按钮的显隐。可见这并不是一个完美的解决方案。

思路分析

看了上面的场景分析，我们下面就来整理一下思路，自定义一个带清除功能的EditText来满足这样的需求。

布局组合封装

即组合EditText和删除按钮，封装成一个整体来使用，这种方式也是比较常见的自定组件方式，其本质就是利用基础组件拼装，然后封装成模块化的组件避免重复码代码。日常的开发过程中这种模式基本上能够解决大多数的功能场景，也不失为一个良策。

对EditText本身动刀

对于android开发者来说CompoundDrawable并不陌生吧，这里第二个思路就是利用这个属性来实现一键清除功能。

20181218165750.png

以上图为例，我们这个条思路重点要处理的就是C到E的这块区域，通过监听touch事件来模拟点击事件，那么我们就需要获取一下几个参数：

getWidth()获取整个控件的宽度

getTotalPaddingRight()图标左边缘至控件右边缘的距离，也就是D->E的距离

getCompoundDrawablePadding()表示从文本右边到图标左边缘的距离，也就是C->D的距离

因此就可以通过getWidth() - getTotalPaddingRight() - getCompoundDrawablePadding()来获取到C的位置，这样当ACTION_UP事件触发的时候只要触摸点在C到E之间我们就认为是点击了清除按钮。

接下来最后一件事儿就是通过TextWatcher和View.OnFocusChangeListener来设置和清除CompoundDrawable了。

撸代码

其实思路理通了，代码写起来就非常简单了，下面我就给出完整的代码，并在里面做出