zoukankan      html  css  js  c++  java
  • DrawRightEditText自定义EditText实现有内容时右侧图标按钮显示无内容时右侧图标按钮隐藏加上为空时晃动动画

    自己也百度了一下,在各位大神的基础上进行了修改实现了我想要的效果,

    不过还是要把思路放上:(大神的思路)

    首先我们先分析一下清除功能怎么实现的,我们怎么知道用户点击的是清除按钮还是别的地方呢?,而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;
            }
  • 相关阅读:
    剑指offer_11:二进制中1的个数
    剑指offer_10:矩形覆盖
    spring mvc 访问静态资源
    spring context:component-scan ex
    spring aop配置未生效
    415 Unsupported Media Type
    spring mvc 接收List对象入参
    JIRA甘特图
    JIRA的工时
    JIRA导出工作日志到Excel
  • 原文地址:https://www.cnblogs.com/wangying222/p/6676787.html
Copyright © 2011-2022 走看看