Android带清除功能的编辑框(ClearEditText)

Android带清除功能的编辑框(ClearEditText)

标签: Android控件自定义控件布局xml
760人阅读 评论(0) 收藏 举报
本文章已收录于:
分类:
Android学习(21)
作者同类文章 X
移动开发(11)
作者同类文章 X
Android自定义控件(1)
作者同类文章 X
Android开发(9)
作者同类文章 X

在Android开发中,EditText控件是最基本的控件之一。最近按照项目需求要求做一个EditText控件,带有清空功能的控件,比如在登录页面,帐号和密码输入框中,输入后发现错误,需要一个一个删除,这时候添加一个清除功能的按钮图标就很有必要了。好了,功能描述就到这里,下面开始贴效果图和代码(在小编眼里,代码比描述要有用的多):

Android带清除功能的编辑框(ClearEditText)_第1张图片

效果图如上,接下来我们看代码:

首先新建一个Java文件继承EditText,小编新建的是ClearEditText.java

[java] view plain copy
print ?
  1. package com.text.view;  
  2.   
  3. import android.content.Context;  
  4. import android.graphics.drawable.Drawable;  
  5. import android.text.Editable;  
  6. import android.text.TextWatcher;  
  7. import android.util.AttributeSet;  
  8. import android.view.MotionEvent;  
  9. import android.view.View;  
  10. import android.view.View.OnFocusChangeListener;  
  11. import android.view.animation.Animation;  
  12. import android.view.animation.CycleInterpolator;  
  13. import android.view.animation.TranslateAnimation;  
  14. import android.widget.EditText;  
  15.   
  16. public class ClearEditText extends EditText implements  
  17.         OnFocusChangeListener, TextWatcher {  
  18.     /** 
  19.      * 删除按钮的引用 
  20.      */  
  21.     private Drawable mClearDrawable;  
  22.     /** 
  23.      * 控件是否有焦点 
  24.      */  
  25.     private boolean hasFoucs;  
  26.   
  27.     public ClearEditText(Context context) {  
  28.         this(context, null);  
  29.     }  
  30.   
  31.     public ClearEditText(Context context, AttributeSet attrs) {  
  32.         //这里构造方法也很重要,不加这个很多属性不能再XML里面定义  
  33.         this(context, attrs, android.R.attr.editTextStyle);  
  34.     }  
  35.   
  36.     public ClearEditText(Context context, AttributeSet attrs, int defStyle) {  
  37.         super(context, attrs, defStyle);  
  38.         init();  
  39.     }  
  40.   
  41.   
  42.     private void init() {  
  43.         //获取EditText的DrawableRight,假如没有设置我们就使用默认的图片  
  44.         mClearDrawable = getCompoundDrawables()[2];  
  45.         if (mClearDrawable == null) {  
  46. //          throw new NullPointerException("You can add drawableRight attribute in XML");  
  47.             mClearDrawable = getResources().getDrawable(R.drawable.delete_selector);  
  48.         }  
  49.   
  50.         mClearDrawable.setBounds(00, mClearDrawable.getIntrinsicWidth(), mClearDrawable.getIntrinsicHeight());  
  51.         //默认设置隐藏图标  
  52.         setClearIconVisible(false);  
  53.         //设置焦点改变的监听  
  54.         setOnFocusChangeListener(this);  
  55.         //设置输入框里面内容发生改变的监听  
  56.         addTextChangedListener(this);  
  57.     }  
  58.   
  59.   
  60.     /** 
  61.      * 因为我们不能直接给EditText设置点击事件,所以我们用记住我们按下的位置来模拟点击事件 
  62.      * 当我们按下的位置 在  EditText的宽度 - 图标到控件右边的间距 - 图标的宽度  和 
  63.      * EditText的宽度 - 图标到控件右边的间距之间我们就算点击了图标,竖直方向就没有考虑 
  64.      */  
  65.     @Override  
  66.     public boolean onTouchEvent(MotionEvent event) {  
  67.         if (event.getAction() == MotionEvent.ACTION_UP) {  
  68.             if (getCompoundDrawables()[2] != null) {  
  69.   
  70.                 boolean touchable = event.getX() > (getWidth() - getTotalPaddingRight())  
  71.                         && (event.getX() < ((getWidth() - getPaddingRight())));  
  72.   
  73.                 if (touchable) {  
  74.                     this.setText("");  
  75.                 }  
  76.             }  
  77.         }  
  78.   
  79.         return super.onTouchEvent(event);  
  80.     }  
  81.   
  82.     /** 
  83.      * 当ClearEditText焦点发生变化的时候,判断里面字符串长度设置清除图标的显示与隐藏 
  84.      */  
  85.     @Override  
  86.     public void onFocusChange(View v, boolean hasFocus) {  
  87.         this.hasFoucs = hasFocus;  
  88.         if (hasFocus) {  
  89.             setClearIconVisible(getText().length() > 0);  
  90.         } else {  
  91.             setClearIconVisible(false);  
  92.         }  
  93.     }  
  94.   
  95.   
  96.     /** 
  97.      * 设置清除图标的显示与隐藏,调用setCompoundDrawables为EditText绘制上去 
  98.      * @param visible 
  99.      */  
  100.     protected void setClearIconVisible(boolean visible) {  
  101.         Drawable right = visible ? mClearDrawable : null;  
  102.         setCompoundDrawables(getCompoundDrawables()[0],  
  103.                 getCompoundDrawables()[1], right, getCompoundDrawables()[3]);  
  104.     }  
  105.   
  106.   
  107.     /** 
  108.      * 当输入框里面内容发生变化的时候回调的方法 
  109.      */  
  110.     @Override  
  111.     public void onTextChanged(CharSequence s, int start, int count,  
  112.                               int after) {  
  113.         if(hasFoucs){  
  114.             setClearIconVisible(s.length() > 0);  
  115.         }  
  116.     }  
  117.   
  118.     @Override  
  119.     public void beforeTextChanged(CharSequence s, int start, int count,  
  120.                                   int after) {  
  121.   
  122.     }  
  123.   
  124.     @Override  
  125.     public void afterTextChanged(Editable s) {  
  126.   
  127.     }  
  128.   
  129.     /** 
  130.      * 设置晃动动画 
  131.      */  
  132.     public void setShakeAnimation(){  
  133.         this.setAnimation(shakeAnimation(5));  
  134.     }  
  135.   
  136.     /** 
  137.      * 晃动动画 
  138.      * @param counts 1秒钟晃动多少下 
  139.      * @return 
  140.      */  
  141.     public static Animation shakeAnimation(int counts){  
  142.         Animation translateAnimation = new TranslateAnimation(01000);  
  143.         translateAnimation.setInterpolator(new CycleInterpolator(counts));  
  144.         translateAnimation.setDuration(1000);  
  145.         return translateAnimation;  
  146.     }  
  147.   
  148.   
  149. }  
package com.text.view;

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnFocusChangeListener;
import android.view.animation.Animation;
import android.view.animation.CycleInterpolator;
import android.view.animation.TranslateAnimation;
import android.widget.EditText;

public class ClearEditText extends EditText implements
        OnFocusChangeListener, TextWatcher {
    /**
     * 删除按钮的引用
     */
    private Drawable mClearDrawable;
    /**
     * 控件是否有焦点
     */
    private boolean hasFoucs;

    public ClearEditText(Context context) {
        this(context, null);
    }

    public ClearEditText(Context context, AttributeSet attrs) {
        //这里构造方法也很重要,不加这个很多属性不能再XML里面定义
        this(context, attrs, android.R.attr.editTextStyle);
    }

    public ClearEditText(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }


    private void init() {
        //获取EditText的DrawableRight,假如没有设置我们就使用默认的图片
        mClearDrawable = getCompoundDrawables()[2];
        if (mClearDrawable == null) {
//        	throw new NullPointerException("You can add drawableRight attribute in XML");
            mClearDrawable = getResources().getDrawable(R.drawable.delete_selector);
        }

        mClearDrawable.setBounds(0, 0, mClearDrawable.getIntrinsicWidth(), mClearDrawable.getIntrinsicHeight());
        //默认设置隐藏图标
        setClearIconVisible(false);
        //设置焦点改变的监听
        setOnFocusChangeListener(this);
        //设置输入框里面内容发生改变的监听
        addTextChangedListener(this);
    }


    /**
     * 因为我们不能直接给EditText设置点击事件,所以我们用记住我们按下的位置来模拟点击事件
     * 当我们按下的位置 在  EditText的宽度 - 图标到控件右边的间距 - 图标的宽度  和
     * EditText的宽度 - 图标到控件右边的间距之间我们就算点击了图标,竖直方向就没有考虑
     */
    @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);
    }

    /**
     * 当ClearEditText焦点发生变化的时候,判断里面字符串长度设置清除图标的显示与隐藏
     */
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        this.hasFoucs = hasFocus;
        if (hasFocus) {
            setClearIconVisible(getText().length() > 0);
        } else {
            setClearIconVisible(false);
        }
    }


    /**
     * 设置清除图标的显示与隐藏,调用setCompoundDrawables为EditText绘制上去
     * @param visible
     */
    protected void setClearIconVisible(boolean visible) {
        Drawable right = visible ? mClearDrawable : null;
        setCompoundDrawables(getCompoundDrawables()[0],
                getCompoundDrawables()[1], right, getCompoundDrawables()[3]);
    }


    /**
     * 当输入框里面内容发生变化的时候回调的方法
     */
    @Override
    public void onTextChanged(CharSequence s, int start, int count,
                              int after) {
        if(hasFoucs){
            setClearIconVisible(s.length() > 0);
        }
    }

    @Override
    public void beforeTextChanged(CharSequence s, int start, int count,
                                  int after) {

    }

    @Override
    public void afterTextChanged(Editable s) {

    }

    /**
     * 设置晃动动画
     */
    public void setShakeAnimation(){
        this.setAnimation(shakeAnimation(5));
    }

    /**
     * 晃动动画
     * @param counts 1秒钟晃动多少下
     * @return
     */
    public static Animation shakeAnimation(int counts){
        Animation translateAnimation = new TranslateAnimation(0, 10, 0, 0);
        translateAnimation.setInterpolator(new CycleInterpolator(counts));
        translateAnimation.setDuration(1000);
        return translateAnimation;
    }


}

在XML文件中使用:

[html] view plain copy
print ?
  1. <LinearLayout  
  2.            android:layout_width="match_parent"  
  3.            android:layout_height="50dp"  
  4.            android:layout_marginTop="30dp"  
  5.            android:background="@android:color/white"  
  6.            android:gravity="center_vertical"  
  7.            android:orientation="horizontal" >  
  8.   
  9.            <ImageView  
  10.                android:layout_width="22dp"  
  11.                android:layout_height="22dp"  
  12.                android:layout_marginLeft="15dp"  
  13.                android:background="@drawable/id_icon" />  
  14.   
  15.            <com.test.view.ClearEditText  
  16.                android:id="@+id/et_phone_number"  
  17.                android:layout_width="match_parent"  
  18.                android:layout_height="wrap_content"  
  19.                android:layout_marginLeft="15dp"  
  20.                android:layout_marginRight="15dp"  
  21.                android:background="@null"  
  22.                android:hint="请输入您的手机号"  
  23.                android:inputType="phone"  
  24.                android:textColorHint="@color/app_hint_text_color"  
  25.                android:textSize="@dimen/submit_font" />  
  26.        LinearLayout>  
 

            

            
        

到这里就完成了,代码在上面大家自己可以多琢磨琢磨,这也是参照别人改写的,希望大家多多吐槽,共同进步


0
0
 
 

我的同类文章

Android学习(21) 移动开发(11) Android自定义控件(1) Android开发(9)
http://blog.csdn.net
  • Android二级页面闪退一级页面的fragment重叠bug解决方法2017-04-07阅读37
  • Android自定义状态栏颜色2016-09-07阅读458
  • Android OkHttp完全解析 是时候来了解OkHttp了2016-08-30阅读175
  • Android性能优化方案2016-06-06阅读420
  • 多个Activity之间传值,使用Intent2016-04-21阅读434
  • 史上最详细的Android Studio系列教程四--Gradle基础2016-09-08阅读310
  • Android之EditText表单验证框架2016-09-01阅读1207
  • AndroidStudio 常用快捷键2016-08-09阅读70
  • Android拍照或选择本地图片并剪裁图片设置成头像2016-06-06阅读464
  • Java中的接口作用2015-11-12阅读265
更多文章

你可能感兴趣的:(安卓自定义控件)