自定义View（二）自带清楚按钮的EditText

转载请注明出处：http://blog.csdn.net/darling_r/article/details/54946208
本文出自：哎呀小嘿的博客

效果图如下：

这里写图片描述

步骤很简单，首先新建一个类ClearEditText 继承EditText 并且实现OnFocusChangeListener, TextWatcher这两个接口，用来监听控件获取焦点和输入文本内容的变化；

1。重写三个构造方法：

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 defStyleAttr) {
        super(context, attrs, defStyleAttr);

        // 获取EditText的DrawableRight,假如没有设置我们就使用默认的图片
        mClearDrawable = getCompoundDrawables()[2];
        if (mClearDrawable == null) {
            mClearDrawable = getResources().getDrawable(R.drawable.emotionstore_progresscancelbtn);
        }
        mClearDrawable.setBounds(0, 0, mClearDrawable.getIntrinsicWidth(), mClearDrawable.getIntrinsicHeight());
        setClearIconVisible(false);
        setOnFocusChangeListener(this);
        addTextChangedListener(this);
    }

这里的第二个构造方法跟往常不一样，主要是因为，这里只是简单的继承EditText，不需要自定义其他控件属性，所以在这里引用android.R.attr.editTextStyle；在第三个构造方法里初始化；

2。
因为我们不能直接给EditText设置点击事件，所以我们用记住我们按下的位置来模拟点击事件当我们按下的位置在 EditText的宽度 -图标到控件右边的间距 - 图标的宽度和 EditText的宽度 - 图标到控件右边的间距之间我们就算点击了图标，竖直方向没有考虑

 @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (getCompoundDrawables()[2] != null) {
            if (event.getAction() == MotionEvent.ACTION_UP) {
                boolean touchable = event.getX() > (getWidth() - getPaddingRight() - mClearDrawable
                        .getIntrinsicWidth())
                        && (event.getX() < ((getWidth() - getPaddingRight())));
                if (touchable) {
                    this.setText("");
                }
            }
        }

        return super.onTouchEvent(event);
    }

3。当ClearEditText焦点发生变化的时候，判断里面字符串长度设置清除图标的显示与隐藏

 @Override
    public void onFocusChange(View v, boolean hasFocus) {
        if (hasFocus) {
            setClearIconVisible(getText().length() > 0);
        } else {
            setClearIconVisible(false);
        }
    }

4。设置清除图标的显示与隐藏，调用setCompoundDrawables为EditText绘制上去

 protected void setClearIconVisible(boolean visible) {
        Drawable right = visible ? mClearDrawable : null;
        setCompoundDrawables(getCompoundDrawables()[0], getCompoundDrawables()[1], right,
                getCompoundDrawables()[3]);
    }

5。当输入框里面内容发生变化的时候回调的方法

    @Override
    public void onTextChanged(CharSequence s, int start, int count, int after) {
        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;
    }

到此，一个自带清楚按钮的EditText控件就完成了，在xml文件里调用，跟普通自定义view一样，

<com.yh.clearedittextview.ClearEditText
        android:id="@+id/filter_edit"
        android:layout_marginTop="5dip"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/search_bar_edit_selector"
        android:hint="请输入关键字"
        android:singleLine="true"
        android:textSize="15.0dip" />

最后附上demo源码，欢迎下载！

自定义View（二）自带清楚按钮的EditText

效果图如下：

猜你喜欢