自定义控件-实现带清空功能的EditText

自定义控件实现带删除功能的EditText控件,先放张效果图。

注释在代码里写的都很清楚,大家一看就明白了,如果哪里不明白直接留言哦,我一定抽空回答。

1) MainActivity, 应用自定义控件.java

public class MainActivity extends Activity implements View.OnClickListener{

    ClearEditText clearEditText;
    Button showBtn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView(){
        clearEditText = (ClearEditText) findViewById(R.id.main_clearEditText);
        showBtn = (Button) findViewById(R.id.main_showBtn);
        showBtn.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        Toast.makeText(MainActivity.this, clearEditText.getText().toString(), Toast.LENGTH_SHORT).show();
    }
}

2) main_activity.layout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <mytest.test.ClearEditText
        android:id="@+id/main_clearEditText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <Button
        android:id="@+id/main_showBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="显示"/>

</LinearLayout>

3) 最重要的自定义View,继承于EditText, ClearEditText.java

/**
 *  总体的思路就是,当焦点在框之内并且有数据时,删除图标显示,点击清空图标
 *  1) 监听焦点变化
 *  2) 监听内容变化
 *  3) 如果按在默认图标之上则清空编辑框内容
 */

public class ClearEditText extends EditText implements View.OnTouchListener{

    private Drawable clearDrawable;
    private boolean isHasFocus;

    public ClearEditText(Context context) {
        super(context);
        init();
    }

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

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

    /**
     *  初始化
     */
    private void init(){
        if(getCompoundDrawables()[2]==null)
            clearDrawable = getResources().getDrawable(R.drawable.icon_del);   //如果右侧没有设置图片,则设置删除图片
        clearDrawable.setBounds(0, 0, getLineHeight(), getLineHeight());       //设置图片在右边的默认位置, 宽高是编辑框一行的高度
        this.setOnTouchListener(this);                                         //设置手势监听
        this.setOnFocusChangeListener(new FocusChangeListenerImpl());          //设置焦点监听
        this.addTextChangedListener(new TextWatcherImpl());                    //设置文字改变监听
        setClearDrawableVisible(false);                                        //初始化右边图标不可见
    }

    /**
     * getX(), 点击的坐标
     * 1) getTotalPaddingRight(), clear图标的左边缘到控件右边缘的距离
     * 2) getPaddingRight(), clear图标的右边缘到控件右边缘的距离
     * 所以,当点击的坐标大于getWidth()-1时且小于getWidth()-2时才点击了clear图标
     */
    @Override
    public boolean onTouch(View view, MotionEvent motionEvent) {
        switch (motionEvent.getAction()){
            case MotionEvent.ACTION_UP:
                boolean tempA = motionEvent.getX() > (getWidth() - getTotalPaddingRight());
                boolean tempB = motionEvent.getX() < (getWidth() - getPaddingRight());
                if(tempA&&tempB){
                    this.setText("");
                }
                break;
            default:
                break;
        }
        return false;
    }

    /**
     *  焦点改变监听
     *  1) 如果焦点在编辑框内且编辑框字符长度大于0则显示删除
     *  2) 其余情况不显示
     */
    private class FocusChangeListenerImpl implements OnFocusChangeListener {
        @Override
        public void onFocusChange(View view, boolean b) {
            isHasFocus = b;
            if(isHasFocus){
                boolean temp = getText().toString().length()>0;
                setClearDrawableVisible(temp);
            }else{
                setClearDrawableVisible(false);
            }
        }
    }

    /**
     * 编辑框内容变化监听
     * 1) 如果编辑框内有数据则显示删除
     * 2) 没有数据不显示删除
     */
    private class TextWatcherImpl implements TextWatcher{

        @Override
        public void afterTextChanged(Editable editable) {
            boolean temp = getText().toString().length()>0;
            setClearDrawableVisible(temp);
        }

        @Override
        public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {}

        @Override
        public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {}

    }

    /**
     * 是否显示编辑框右侧图片,true显示, false不显示
     */
    private void setClearDrawableVisible(boolean isVisible){
        Drawable rightDrawable;
        if(isVisible){
            rightDrawable = clearDrawable;
        }else{
            rightDrawable = null;
        }
        setCompoundDrawables(getCompoundDrawables()[0], getCompoundDrawables()[1], rightDrawable, getCompoundDrawables()[3]);
    }

}