带删除按钮的 EditText
来源:互联网 发布:图片打格子软件 编辑:程序博客网 时间:2024/04/28 22:33
一个带删除按钮的 EditText 在各种 APP 中随处可见,比如,搜索框、登录时用户名与密码的输入框等等。在没有自己实现之前,想法是这样的:在 EditText 中的添加一个 Drawable 然后给这个 Drawable 添加一个监听事件,当点击 Drawable 时设置 EditText 里的字符串为空。当要实现的时候却发现 Drawable 没有点击事件,所以这个方法是行不通的。那么只好通过触摸事件来实现,通过计算触摸的位置,这个位置正好就是该 Drawable 所在的位置。
获取 EditText 的 DrawableRight
mClearDrawable = getCompoundDrawables()[2];
getCompoundDrawables() 方法源码是这样的
/** * Returns drawables for the left, top, right, and bottom borders. * * @attr ref android.R.styleable#TextView_drawableLeft * @attr ref android.R.styleable#TextView_drawableTop * @attr ref android.R.styleable#TextView_drawableRight * @attr ref android.R.styleable#TextView_drawableBottom */ @NonNull public Drawable[] getCompoundDrawables() { final Drawables dr = mDrawables; if (dr != null) { return dr.mShowing.clone(); } else { return new Drawable[] { null, null, null, null }; } }
返回值是控件四周的 Drawable 数组,顺序为左、上、右、下。在这里需要的是右边的 Drawable,所以下标为 2.
2. 接下来就是获取并设置 Drawable 图标
if (mClearDrawable == null) { mClearDrawable = getResources().getDrawable(R.drawable.x); } // 为 Drawable 设置为自身大小的宽高 mClearDrawable.setBounds(0, 0, mClearDrawable.getIntrinsicWidth(), mClearDrawable.getIntrinsicHeight());
3.最后一步就是设置点击 Drawable 图标实现删除文本框中的内容
@Override public boolean onTouchEvent(MotionEvent event) { if (event.getAction() == MotionEvent.ACTION_UP){ if (getCompoundDrawables()[2] != null){ boolean touchable = event.getX() > (getWidth() - getTotalPaddingRight()) && (event.getX() < (getWidth() - getPaddingRight())); if (touchable){ this.setText(""); } } } return super.onTouchEvent(event); }
红色的横线代表的是 (getWidth() - getTotalPaddingRight())的值,黑色的横线代表的是 (getWidth() - getPaddingRight()) 的值,当触摸到这两个值之间的位置就正好是 Drawable 所在位置。也就实现了点击删除图标就可以清空文本框中的内容。
到此最主要功能就可以实现了,当然还可以再添加一些其他的功能,以提高用户体验。比如,当文本框中没有内容时,就不显示删除图标,或是在输入错误时文本框抖动等。
首先实现删除图标的隐藏功能。
public void setClearIconVisible(boolean visible) { Drawable right = visible ? mClearDrawable : null; setCompoundDrawables(getCompoundDrawables()[0],getCompoundDrawables()[1],right,getCompoundDrawables()[3]); }
setCompoundDrawables() 方法里的四个参数就是按照左、上、右、下的顺序分别为组件添加四个方向上的 Drawable。这里添加的在右边的,所以在第三个位置设置刚刚设置好的 Drawable。其他设置为默认的。然后实 TextWatcher 接口,在 onTextChange 方法里进行设置。
public void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) { if (hasFocus){ setClearIconVisible(text.length() > 0); } }
接下来实现抖动功能。
public void setSharkAnimation(){ this.setAnimation(sharkAnimation(5)); }public static Animation sharkAnimation(int counts){ Animation translateAnimation = new TranslateAnimation(0,10,0,0); translateAnimation.setInterpolator(new CycleInterpolator(counts)); translateAnimation.setDuration(1000); return translateAnimation; }
在输入错误或是有重要信息时调用 setSharkAnimation() 方法就可以实现了。
最终效果图:
总结
实现文章中的功能并不是很难,只要动动手基本都可以实现。所以重点是要动手去做,在没有动手之前虽然也有很多的想法,想了几种可能实现的方法,那些方法到底能不能实现,或是实现起来有什么困难,亦或是可以更加简洁等等,这些都不是只靠想就可以做到的,所以以后再想到什么想法的时候一定要亲自动手实践一下,再做结论。以上!
- 带删除按钮的EditText
- 带删除按钮的EditText
- 带删除按钮的EditText
- 带删除按钮的EditText
- 带删除按钮的 EditText
- editText带删除按钮
- 带删除按钮的EditText实现
- 自定义带删除按钮的EditText
- 自定义带删除按钮的EditText
- [Android]带删除按钮的EditText
- 自定义控件 带删除按钮的EditText
- 自定义控件 --- DeletableEditText带删除按钮的EditText
- android自定义控件(组合控件)--带删除按钮的EditText
- Android自定义右边带删除按钮的EditText
- 自定义带删除按钮的EditText搜索框
- Android自定义带删除按钮的输入框EditText
- 自定义带删除按钮的 Edittext 并伴随动画效果
- 带删除的EditText
- java中 Process的使用
- SpringMVC:ajax请求处理
- MongoDB 生态
- Eclipse 修改项目名称
- 关于MAVEN子父工程上传SVN以及从SVN检出过程简介
- 带删除按钮的 EditText
- [bigdata-104] 多交易所的多币种的行情
- SpringBoot中MongoDB注解概念及使用
- 如何使用spy ++ (How to use Spy ++)
- 数据库设计总结
- nginx:TIME_WAIT过多或者CLOSE_WAIT过多的状态
- 浅谈数据库设计
- Java开发中的23种设计模式详解----迭代子模式(Iterator)
- 图片格式的识别