自己也百度了一下,在各位大神的基础上进行了修改实现了我想要的效果,
不过还是要把思路放上:(大神的思路)
首先我们先分析一下清除功能怎么实现的,我们怎么知道用户点击的是清除按钮还是别的地方呢?,而EditText其实是集成Textview的,
而Textview有方法getTotalPaddingRight()获取图标左边缘至控件右边缘的距离,知道这样一个方法之后就很简单了,如下图所示我们就可以得到用户是不是点击的清除按钮图标,得到之后我们
只要设置setText("")不就实现了清除功能吗?
还有一个重要的问题就是EditText其实没有很好的点击事件,我们如果知道用户点击了并且点击的是清除按钮的位置,所以我们需要知道用户点击还是没有点击,而这个问题我们就可以通过View的onTouchEvent方法
都知道这个方法是用户触摸事件,所以我们只用户抬起屏幕不就相当于点击了么,ok!重要思路知道了之后我们就可以开始愉快的代码变成喽!
首先我们需要先自定义一个类去继承EditText类
1 public class DrawRightEditText extends EditText { 2 private Drawable mClearDrawable; 3 4 public DrawRightEditText(Context context) { 5 this(context, null); 6 } 7 8 public DrawRightEditText(Context context, AttributeSet attrs) { 9 //这里构造方法也很重要,不加这个很多属性不能再XML里面定义 10 this(context, attrs, android.R.attr.editTextStyle); 11 } 12 13 public DrawRightEditText(Context context, AttributeSet attrs, int defStyle) { 14 super(context, attrs, defStyle); 15 init(); 16 } 17 private void init(){ 18 //获取EditText的DrawableRight,getCompoundDrawables()获取Drawable的四个位置的数组 19 mClearDrawable = getCompoundDrawables()[2]; 20 //设置图标的位置以及大小,getIntrinsicWidth()获取显示出来的大小而不是原图片的带小 21 mClearDrawable.setBounds(0, 0, mClearDrawable.getIntrinsicWidth()+10, mClearDrawable.getIntrinsicHeight()+10); 22 //默认设置隐藏图标 23 setClearIconVisible(false); 24 //设置输入框里面内容发生改变的监听 25 addTextChangedListener(new TextWatcher() { 26 @Override 27 public void beforeTextChanged(CharSequence s, int start, int count, int after) { 28 29 } 30 31 @Override 32 public void onTextChanged(CharSequence s, int start, int before, int count) { 33 setClearIconVisible(s.length() > 0); 34 } 35 36 @Override 37 public void afterTextChanged(Editable s) { 38 39 } 40 }); 41 } 42 43 /** 44 * 设置清除图标的显示与隐藏,调用setCompoundDrawables为EditText绘制上去 45 * @param visible 46 */ 47 protected void setClearIconVisible(boolean visible) { 48 Drawable right = visible ? mClearDrawable : null; 49 setCompoundDrawables(getCompoundDrawables()[0], 50 getCompoundDrawables()[1], right, getCompoundDrawables()[3]); 51 } 52 /** 53 * 设置晃动动画 54 */ 55 public void setShakeAnimation(){ 56 this.startAnimation(shakeAnimation(3)); 57 } 58 /** 59 * 晃动动画 60 * @param counts 1秒钟晃动多少下 61 * @return 62 */ 63 public static Animation shakeAnimation(int counts){ 64 Animation translateAnimation = new TranslateAnimation(0, 10, 0, 0); 65 translateAnimation.setInterpolator(new CycleInterpolator(counts)); 66 translateAnimation.setDuration(1000); 67 return translateAnimation; 68 } 69 }
只要了解了TextView获取距离方法的使用,其实还是比较简单的
接下来我们看一下如何使用滴!
<com.views.DrawRightEditText android:id="@+id/name" android:layout_width="match_parent" android:layout_height="30dp" android:layout_centerVertical="true" android:layout_toRightOf="@+id/iv1" android:background="@null" android:hint="请输入账号" android:textColor="#000" android:drawableRight="@drawable/icon_delete" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:textColorHint="#8d8d94" android:textSize="16sp" />
注意这里的drawableright是必须要设置的,我们在自定义DrawRightEditText时用到了获取drawableright,不然会报错
再来看看触摸事件,在点击右侧图标时你想做的事
这个是账号编辑栏,它的右侧是删除图标,点击删除图标时,内容清空
name.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { if (event.getAction() == MotionEvent.ACTION_UP) { if (name.getCompoundDrawables()[2] != null) { //getTotalPaddingRight()图标左边缘至控件右边缘的距离 //getWidth() - getTotalPaddingRight()表示从最左边到图标左边缘的位置 //getWidth() - getPaddingRight()表示最左边到图标右边缘的位置 boolean touchable = event.getX() > (name.getWidth() - name.getTotalPaddingRight()) && (event.getX() < ((name.getWidth() - name.getPaddingRight()))); if (touchable) { name.setText(""); } } } return false; } });
这个是密码编辑栏,它的右侧是密码明文密文图标,点击图标时,密码会明文密文切换
private boolean isSee = false;//密码是否可见 private static final int PASSWORD_MINGWEN = 0x90; private static final int PASSWORD_MIWEN = 0x81; password.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { if (event.getAction() == MotionEvent.ACTION_UP) { if (password.getCompoundDrawables()[2] != null) { //getTotalPaddingRight()图标左边缘至控件右边缘的距离 //getWidth() - getTotalPaddingRight()表示从最左边到图标左边缘的位置 //getWidth() - getPaddingRight()表示最左边到图标右边缘的位置 boolean touchable = event.getX() > (password.getWidth() - password.getTotalPaddingRight()) && (event.getX() < ((password.getWidth() - password.getPaddingRight()))); if (touchable) { if (isSee) { //设置不可见 password.setInputType(PASSWORD_MIWEN);//密文 password.setSelection(password.length());//设置光标显示 } else { //设置可见 password.setInputType(PASSWORD_MINGWEN);//明文 password.setSelection(password.length());//设置光标显示 } isSee = !isSee; } } } return false; } });
ok!最后还有为空点击登录时晃动动画的实现,那就很简单了,直接自定义中的调用方法即可
final String strName = name.getText().toString().trim(); final String strPwd = password.getText().toString().trim(); if (StringUtils.isEmpty(strName)) { //为空设置晃动动画 name.setShakeAnimation(); showWarning("请输入用户名!"); return; } if (StringUtils.isEmpty(strPwd)) { //为空设置晃动动画 password.setShakeAnimation(); showWarning("请输入密码!"); return; }