我们经常在一些应用中见到输入框带有删除功能,今天我们就来实现这个功能(文字组织能力不强,大家随便看看)。主要是记录一下自己的学习经历,如果对大家有帮助,我会更开心的。
先上图:
实现要点:
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> 代码注释很清楚,相信以大家的水平都会看的懂的。在这边,我就不多做解释了。如果有不明白的,可以给我留言,大家交流交流。
...