摘要:在的输入框中加入清除按钮,是很常见的设计,本文介绍如何创建一个控件,在输入框中加入清除按钮。最后,我们实现判断输入框中的字数,大于则显示清除按钮,否则隐藏。
在Android的输入框中加入清除按钮,是很常见的设计,本文介绍如何创建一个控件,
在输入框中加入清除按钮。
我们来看看实现这个控件都需要做什么:
1. 清除按钮在输入框中有内容时出现
2. 清除按钮必须出现在输入框内
3. 点击清除按钮,清除输入框中的所有内容
4. 清除按钮的颜色必须与主题一致
实现第一点,我们可以通过加入TextWatcher来监听EditText的变化,在onFocusChangeListener方法中处理清除按钮是否可见。
实现第二点,我们需要使用compound drawable作为清除按钮,然后在 OnTouch listener中处理点击事件。
我们使用AppCompatEditText作为基类
public class ClearableEditText extends AppCompatEditText implements View.OnTouchListener, View.OnFocusChangeListener, TextWatcher {
接着加入构造函数
public ClearableEditText(final Context context) { super(context); init(context); } public ClearableEditText(final Context context, final AttributeSet attrs) { super(context, attrs); init(context); } public ClearableEditText(final Context context, final AttributeSet attrs, final int defStyleAttr) { super(context, attrs, defStyleAttr); init(context); }
实现init方法
* 创建drawable,并为其加入Touch、Focus事件处理
* 加入TextChangedListener,监听EditText内容变化
private void init(final Context context) { final Drawable drawable = ContextCompat.getDrawable(context, R.drawable.abc_ic_clear_mtrl_alpha); final Drawable wrappedDrawable = DrawableCompat.wrap(drawable); //Wrap the drawable so that it can be tinted pre Lollipop DrawableCompat.setTint(wrappedDrawable, getCurrentHintTextColor()); mClearTextIcon = wrappedDrawable; mClearTextIcon.setBounds(0, 0, mClearTextIcon.getIntrinsicHeight(), mClearTextIcon.getIntrinsicHeight()); setClearIconVisible(false); super.setOnTouchListener(this); super.setOnFocusChangeListener(this); addTextChangedListener(this); }
我们默认使用setClearIconVisible(false)隐藏了清除按钮,在输入文本时才会显示
private void setClearIconVisible(final boolean visible) { mClearTextIcon.setVisible(visible, false); final Drawable[] compoundDrawables = getCompoundDrawables(); setCompoundDrawables( compoundDrawables[0], compoundDrawables[1], visible ? mClearTextIcon : null, compoundDrawables[3]); }加入Listener
private Drawable mClearTextIcon; private OnFocusChangeListener mOnFocusChangeListener; private OnTouchListener mOnTouchListener; @Override public void setOnFocusChangeListener(final OnFocusChangeListener onFocusChangeListener) { mOnFocusChangeListener = onFocusChangeListener; } @Override public void setOnTouchListener(final OnTouchListener onTouchListener) { mOnTouchListener = onTouchListener; }实现Listener
最后我们来实现3个Listener,先来看focus Listener
@Override public void onFocusChange(final View view, final boolean hasFocus) { if (hasFocus) { setClearIconVisible(getText().length() > 0); } else { setClearIconVisible(false); } if (mOnFocusChangeListener != null) { mOnFocusChangeListener.onFocusChange(view, hasFocus); } }
在获取焦点时,判断输入框中内容是否大于0,有内容则显示清除按钮。
接着我们来看onTouch方法:
@Override public boolean onTouch(final View view, final MotionEvent motionEvent) { final int x = (int) motionEvent.getX(); if (mClearTextIcon.isVisible() && x > getWidth() - getPaddingRight() - mClearTextIcon.getIntrinsicWidth()) { if (motionEvent.getAction() == MotionEvent.ACTION_UP) { setText(""); } return true; } return mOnTouchListener != null && mOnTouchListener.onTouch(view, motionEvent); }
在这里,我们首先检查了清除按钮是否为显示状态,然后判断点击的范围是否在清除按钮内,
如果在范围内的话,在ACTION_UP时清空输入框内容,否则执行mOnTouchListener的
onTouch方法。
最后,我们实现TextWatcher:
@Override public final void onTextChanged(final CharSequence s, final int start, final int before, final int count) { if (isFocused()) { setClearIconVisible(s.length() > 0); } } @Override public void beforeTextChanged(CharSequence s, int start, int count, int after) { } @Override public void afterTextChanged(Editable s) { }
判断输入框中的字数,大于0则显示清除按钮,否则隐藏。
如果你使用的是AutoCompleteTextView,我们也可以使用同样的方法添加清除按钮:
public class ClearableAutoCompleteTextView extends AppCompatAutoCompleteTextView implements View.OnTouchListener, View.OnFocusChangeListener, TextWatcher {
该控件的源码已上传到Github: ClearableEditText
本文译自:Giving your Edit Texts the All Clear
本文作者: 阳春面
原文地址:http://www.aswifter.com/2015/07/31/android-edittext-add-clear-button/
欢迎关注我的微信公众号,分享Android 开发,IOS开发,Swift开发和互联网内容
微信号:APP开发者
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/12326.html
摘要:序言前两天发布了正式版本,正式版发布之后,身边越来越多的人都开始入坑了,不得不说框架的魅力还是很吸引人的哈,所以我们更要抓紧学习了之前我写了两篇文章来介绍中的组件和中的组件,今天我们继续学习输入框组件,话不多说,先上图组件的先来看一下的构造 序言 Google 前两天发布了 Flutter 1.0 正式版本,正式版发布之后,LZ身边越来越多的人都开始入坑了,不得不说 Flutter 框...
摘要:序言前两天发布了正式版本,正式版发布之后,身边越来越多的人都开始入坑了,不得不说框架的魅力还是很吸引人的哈,所以我们更要抓紧学习了之前我写了两篇文章来介绍中的组件和中的组件,今天我们继续学习输入框组件,话不多说,先上图组件的先来看一下的构造 序言 Google 前两天发布了 Flutter 1.0 正式版本,正式版发布之后,LZ身边越来越多的人都开始入坑了,不得不说 Flutter 框...
摘要:前言这一篇我们来看自定义的各种姿势。在进行自定义之前我们先来看一下的坐标系。需要注意的是直接继承自的控件需要对支持和做处理。以及在方法中加入了自身的处理。很明显,我们需要自定义一个控件符合上述要求。 该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,如果能给各位看官带来一丝启发或者帮助,那真是极好的。 前言 这一篇我们来看自定义View的各种姿势。前面几篇...
摘要:恢复状态销毁在关闭了时,如果的音乐或视频,还在播放。经测试,在系统上运行稳定,可以正常调用,但是在系统上运行时出现崩溃。基本算是一个比较严重的,没办法解决。在方法中显示,并在方法回调时更新的进度值。需要在文件中声明和两个权限。文章大纲 一、webview基本介绍1.什么是webview2.为什么要使用webview3.webview基本操作 二、webview高级使用1.WebView状态2...
摘要:打个招聘广告杭州阿里巴巴招前端想去西溪的也可帮推荐,比较缺人,机会多多广告位长期有效,有兴趣简历我邮箱个人在移动端的一些总结归纳,有新的知识点会一直更新一部分用做动画时,变形尽量通过来实现,而不是用,等属性。不过的事件有一个事件穿透的问题。 打个招聘广告: 杭州 阿里巴巴B2B 招前端(想去西溪的也可帮推荐),比较缺人,机会多多!广告位长期有效,有兴趣简历我邮箱:854936875@q...
阅读 1881·2021-11-23 09:51
阅读 2948·2021-11-17 09:33
阅读 1729·2021-10-13 09:40
阅读 1113·2021-09-30 10:01
阅读 405·2021-09-26 09:46
阅读 1974·2021-09-23 11:55
阅读 800·2021-09-14 17:57
阅读 1104·2021-09-10 10:51