我们经常在一些应用中见到输入框带有删除功能，今天我们就来实现这个功能（文字组织能力不强，大家随便看看）。主要是记录一下自己的学习经历，如果对大家有帮助，我会更开心的。
先上图：
实现要点：
1、当输入框为空时，删除按钮隐藏；
2、当输入框不为空时，显示删除按钮。
核心代码：
`001.``package` `com.example.view;`
<div class="line alt2">
`002.`<span class="content"><span class="block">`import` `com.example.ui.R;`</span></span>
</div>
<div class="line alt1">
`003.`<span class="content"><span class="block">`import` `android.content.Context;`</span></span>
</div>
<div class="line alt2">
`004.`<span class="content"><span class="block">`import` `android.graphics.Rect;`</span></span>
</div>
<div class="line alt1">
`005.`<span class="content"><span class="block">`import` `android.graphics.drawable.Drawable;`</span></span>
</div>
<div class="line alt2">
`006.`<span class="content"><span class="block">`import` `android.text.Editable;`</span></span>
</div>
<div class="line alt1">
`007.`<span class="content"><span class="block">`import` `android.text.TextWatcher;`</span></span>
</div>
<div class="line alt2">
`008.`<span class="content"><span class="block">`import` `android.util.AttributeSet;`</span></span>
</div>
<div class="line alt1">
`009.`<span class="content"><span class="block">`import` `android.view.MotionEvent;`</span></span>
</div>
<div class="line alt2">
`010.`<span class="content"><span class="block">`import` `android.view.View;`</span></span>
</div>
<div class="line alt1">
`011.`<span class="content"><span class="block">`import` `android.widget.EditText;`</span></span>
</div>
<div class="line alt2">
`012.`<span class="content"><span class="block">`import` `android.widget.Toast;`</span></span>
</div>
<div class="line alt1">
`013.`<span class="content"><span class="block">`import` `android.view.View.OnFocusChangeListener;;`</span></span>
</div>
<div class="line alt2">
`014.`<span class="content"><span class="block">`public` `class` `EditTextWithDelete ``extends` `EditText ``implements` `OnFocusChangeListener{`</span></span>
</div>
<div class="line alt1">
`015.`<span class="content"><span class="block">`private` `Drawable imgEnable;`</span></span>
</div>
<div class="line alt2">
`016.`<span class="content"><span class="block">`private` `Context context;`</span></span>
</div>
<div class="line alt1">
`017.`<span class="content"><span class="block"> </span></span>
</div>
<div class="line alt2">
`018.`<span class="content"><span class="block">`public` `EditTextWithDelete(Context context) {`</span></span>
</div>
<div class="line alt1">
`019.`<span class="content"><span class="block">`super``(context);`</span></span>
</div>
<div class="line alt2">
`020.`<span class="content"><span class="block">`this``.context = context;`</span></span>
</div>
<div class="line alt1">
`021.`<span class="content"><span class="block">`init();`</span></span>
</div>
<div class="line alt2">
`022.`<span class="content"><span class="block">`}`</span></span>
</div>
<div class="line alt1">
`023.`<span class="content"><span class="block">`public` `EditTextWithDelete(Context context, AttributeSet attrs, ``int` `defStyle) {`</span></span>
</div>
<div class="line alt2">
`024.`<span class="content"><span class="block">`super``(context, attrs, defStyle);`</span></span>
</div>
<div class="line alt1">
`025.`<span class="content"><span class="block">`this``.context = context;`</span></span>
</div>
<div class="line alt2">
`026.`<span class="content"><span class="block">`init();`</span></span>
</div>
<div class="line alt1">
`027.`<span class="content"><span class="block">`}`</span></span>
</div>
<div class="line alt2">
`028.`<span class="content"><span class="block">`public` `EditTextWithDelete(Context context, AttributeSet attrs) {`</span></span>
</div>
<div class="line alt1">
`029.`<span class="content"><span class="block">`super``(context, attrs);`</span></span>
</div>
<div class="line alt2">
`030.`<span class="content"><span class="block">`this``.context = context;`</span></span>
</div>
<div class="line alt1">
`031.`<span class="content"><span class="block">`init();`</span></span>
</div>
<div class="line alt2">
`032.`<span class="content"><span class="block">`}`</span></span>
</div>
<div class="line alt1">
`033.`<span class="content"><span class="block"> </span></span>
</div>
<div class="line alt2">
`034.`<span class="content"><span class="block">`private` `void` `init() {`</span></span>
</div>
<div class="line alt1">
`035.`<span class="content"><span class="block">`//获取图片资源`</span></span>
</div>
<div class="line alt2">
`036.`<span class="content"><span class="block">`imgEnable = context.getResources().getDrawable(R.drawable.delete);`</span></span>
</div>
<div class="line alt1">
`037.`<span class="content"><span class="block">`addTextChangedListener(``new` `TextWatcher() {`</span></span>
</div>
<div class="line alt2">
`038.`<span class="content"><span class="block"> </span></span>
</div>
<div class="line alt1">
`039.`<span class="content"><span class="block">`@Override`</span></span>
</div>
<div class="line alt2">
`040.`<span class="content"><span class="block">`public` `void` `onTextChanged(CharSequence s, ``int` `start, ``int` `before, ``int` `count) {`</span></span>
</div>
<div class="line alt1">
`041.`<span class="content"><span class="block"> </span></span>
</div>
<div class="line alt2">
`042.`<span class="content"><span class="block">`}`</span></span>
</div>
<div class="line alt1">
`043.`<span class="content"><span class="block"> </span></span>
</div>
<div class="line alt2">
`044.`<span class="content"><span class="block">`@Override`</span></span>
</div>
<div class="line alt1">
`045.`<span class="content"><span class="block">`public` `void` `beforeTextChanged(CharSequence s, ``int` `start, ``int` `count,`</span></span>
</div>
<div class="line alt2">
`046.`<span class="content"><span class="block">`int` `after) {`</span></span>
</div>
<div class="line alt1">
`047.`<span class="content"><span class="block"> </span></span>
</div>
<div class="line alt2">
`048.`<span class="content"><span class="block">`}`</span></span>
</div>
<div class="line alt1">
`049.`<span class="content"><span class="block"> </span></span>
</div>
<div class="line alt2">
`050.`<span class="content"><span class="block">`@Override`</span></span>
</div>
<div class="line alt1">
`051.`<span class="content"><span class="block">`public` `void` `afterTextChanged(Editable s) {`</span></span>
</div>
<div class="line alt2">
`052.`<span class="content"><span class="block">`setDrawable();`</span></span>
</div>
<div class="line alt1">
`053.`<span class="content"><span class="block">`Toast.makeText(context, getText(), ``10``).show();`</span></span>
</div>
<div class="line alt2">
`054.`<span class="content"><span class="block">`}`</span></span>
</div>
<div class="line alt1">
`055.`<span class="content"><span class="block">`});`</span></span>
</div>
<div class="line alt2">
`056.`<span class="content"><span class="block">`setDrawable();`</span></span>
</div>
<div class="line alt1">
`057.`<span class="content"><span class="block">`}`</span></span>
</div>
<div class="line alt2">
`058.`<span class="content"><span class="block"> </span></span>
</div>
<div class="line alt1">
`059.`<span class="content"><span class="block">`/**`</span></span>
</div>
<div class="line alt2">
`060.`<span class="content"><span class="block">`* 设置删除图片`</span></span>
</div>
<div class="line alt1">
`061.`<span class="content"><span class="block">`*/`</span></span>
</div>
<div class="line alt2">
`062.`<span class="content"><span class="block">`private` `void` `setDrawable() {`</span></span>
</div>
<div class="line alt1">
`063.`<span class="content"><span class="block">`if``(length() == ````) {`</span></span>
</div>
<div class="line alt2">
`064.`<span class="content"><span class="block">`setCompoundDrawablesWithIntrinsicBounds(``null``, ``null``, ``null``, ``null``);`</span></span>
</div>
<div class="line alt1">
`065.`<span class="content"><span class="block">`}``else` `{`</span></span>
</div>
<div class="line alt2">
`066.`<span class="content"><span class="block">`setCompoundDrawablesWithIntrinsicBounds(``null``, ``null``, imgEnable, ``null``);`</span></span>
</div>
<div class="line alt1">
`067.`<span class="content"><span class="block">`}`</span></span>
</div>
<div class="line alt2">
`068.`<span class="content"><span class="block">`}`</span></span>
</div>
<div class="line alt1">
`069.`<span class="content"><span class="block"> </span></span>
</div>
<div class="line alt2">
`070.`<span class="content"><span class="block">`/**`</span></span>
</div>
<div class="line alt1">
`071.`<span class="content"><span class="block">`* event.getX() 获取相对应自身左上角的X坐标`</span></span>
</div>
<div class="line alt2">
`072.`<span class="content"><span class="block">`* event.getY() 获取相对应自身左上角的Y坐标`</span></span>
</div>
<div class="line alt1">
`073.`<span class="content"><span class="block">`* getWidth() 获取控件的宽度`</span></span>
</div>
<div class="line alt2">
`074.`<span class="content"><span class="block">`* getTotalPaddingRight() 获取删除图标左边缘到控件右边缘的距离`</span></span>
</div>
<div class="line alt1">
`075.`<span class="content"><span class="block">`* getPaddingRight() 获取删除图标右边缘到控件右边缘的距离`</span></span>
</div>
<div class="line alt2">
`076.`<span class="content"><span class="block">`* getWidth() - getTotalPaddingRight() 计算删除图标左边缘到控件左边缘的距离`</span></span>
</div>
<div class="line alt1">
`077.`<span class="content"><span class="block">`* getWidth() - getPaddingRight() 计算删除图标右边缘到控件左边缘的距离`</span></span>
</div>
<div class="line alt2">
`078.`<span class="content"><span class="block">`*/`</span></span>
</div>
<div class="line alt1">
`079.`<span class="content"><span class="block">`@Override`</span></span>
</div>
<div class="line alt2">
`080.`<span class="content"><span class="block">`public` `boolean` `onTouchEvent(MotionEvent event) {`</span></span>
</div>
<div class="line alt1">
`081.`<span class="content"><span class="block">`if``(imgEnable != ``null` `&& event.getAction() == MotionEvent.ACTION_UP) {`</span></span>
</div>
<div class="line alt2">
`082.`<span class="content"><span class="block">`int` `x = (``int``) event.getX() ;`</span></span>
</div>
<div class="line alt1">
`083.`<span class="content"><span class="block">`//判断触摸点是否在水平范围内`</span></span>
</div>
<div class="line alt2">
`084.`<span class="content"><span class="block">`boolean` `isInnerWidth = (x > (getWidth() - getTotalPaddingRight())) &&`</span></span>
</div>
<div class="line alt1">
`085.`<span class="content"><span class="block">`(x < (getWidth() - getPaddingRight()));`</span></span>
</div>
<div class="line alt2">
`086.`<span class="content"><span class="block">`//获取删除图标的边界，返回一个Rect对象`</span></span>
</div>
<div class="line alt1">
`087.`<span class="content"><span class="block">`Rect rect = imgEnable.getBounds();`</span></span>
</div>
<div class="line alt2">
`088.`<span class="content"><span class="block">`//获取删除图标的高度`</span></span>
</div>
<div class="line alt1">
`089.`<span class="content"><span class="block">`int` `height = rect.height();`</span></span>
</div>
<div class="line alt2">
`090.`<span class="content"><span class="block">`int` `y = (``int``) event.getY();`</span></span>
</div>
<div class="line alt1">
`091.`<span class="content"><span class="block">`//计算图标底部到控件底部的距离`</span></span>
</div>
<div class="line alt2">
`092.`<span class="content"><span class="block">`int` `distance = (getHeight() - height) /``2``;`</span></span>
</div>
<div class="line alt1">
`093.`<span class="content"><span class="block">`//判断触摸点是否在竖直范围内(可能会有点误差)`</span></span>
</div>
<div class="line alt2">
`094.`<span class="content"><span class="block">`//触摸点的纵坐标在distance到（distance+图标自身的高度）之内，则视为点中删除图标`</span></span>
</div>
<div class="line alt1">
`095.`<span class="content"><span class="block">`boolean` `isInnerHeight = (y > distance) && (y < (distance + height));`</span></span>
</div>
<div class="line alt2">
`096.`<span class="content"><span class="block"> </span></span>
</div>
<div class="line alt1">
`097.`<span class="content"><span class="block">`if``(isInnerWidth && isInnerHeight) {`</span></span>
</div>
<div class="line alt2">
`098.`<span class="content"><span class="block">`setText(``""``);`</span></span>
</div>
<div class="line alt1">
`099.`<span class="content"><span class="block">`}`</span></span>
</div>
<div class="line alt2">
`100.`<span class="content"><span class="block"> </span></span>
</div>
<div class="line alt1">
`101.`<span class="content"><span class="block">`}`</span></span>
</div>
<div class="line alt2">
`102.`<span class="content"><span class="block"> </span></span>
</div>
<div class="line alt1">
`103.`<span class="content"><span class="block">`return` `super``.onTouchEvent(event);`</span></span>
</div>
<div class="line alt2">
`104.`<span class="content"><span class="block">`}`</span></span>
</div>
<div class="line alt1">
`105.`<span class="content"><span class="block"> </span></span>
</div>
<div class="line alt2">
`106.`<span class="content"><span class="block">`@Override`</span></span>
</div>
<div class="line alt1">
`107.`<span class="content"><span class="block">`protected` `void` `finalize() ``throws` `Throwable {`</span></span>
</div>
<div class="line alt2">
`108.`<span class="content"><span class="block">`super``.finalize();`</span></span>
</div>
<div class="line alt1">
`109.`<span class="content"><span class="block">`}`</span></span>
</div>
<div class="line alt2">
`110.`<span class="content"><span class="block">`@Override`</span></span>
</div>
<div class="line alt1">
`111.`<span class="content"><span class="block">`public` `void` `onFocusChange(View v, ``boolean` `hasFocus) {`</span></span>
</div>
<div class="line alt2">
`112.`<span class="content"><span class="block">`if``(hasFocus) {`</span></span>
</div>
<div class="line alt1">
`113.`<span class="content"><span class="block">`setDrawable();`</span></span>
</div>
<div class="line alt2">
`114.`<span class="content"><span class="block">`}``else` `{`</span></span>
</div>
<div class="line alt1">
`115.`<span class="content"><span class="block">`setCompoundDrawablesWithIntrinsicBounds(``null``, ``null``, ``null``, ``null``);`</span></span>
</div>
<div class="line alt2">
`116.`<span class="content"><span class="block">`}`</span></span>
</div>
<div class="line alt1">
`117.`<span class="content"><span class="block">`}`</span></span>
</div>
<div class="line alt2">
`118.`<span class="content"><span class="block"> </span></span>
</div>
<div class="line alt1">
`119.`<span class="content"><span class="block">`}`</span></span>
</div>
代码注释很清楚，相信以大家的水平都会看的懂的。在这边，我就不多做解释了。如果有不明白的，可以给我留言，大家交流交流。
💬 评论