Android 自定义View第三弹——继承控件

概述：本篇为自定义控件实现方式第二种—继承控件。在本篇中将以一个栗子来展现继承控件的实现方式。

一 继承控件的定义

继承已有的控件，创建新控件，保留继承的父控件的特性，并且还可以引入新特性。

二 自定义继承控件的步骤

1 我们需要继承一个具体的控件 比如 textView imageView
2 自定义属性
3 获取自定义属性
4 设置需要显示的ui
4 重写onDraw方法
5 处理特殊的事件

三一个栗子

1 栗子说明

本篇栗子实现的是一个带清除按钮的EditText 右侧的图标 可以在布局文件中 通过两种方式引用 为了在本篇文章中 用到 onDraw方法 我给这个Edittext 画了一个 矩形框 还添加了点击事件 点击清除按钮时 会删除输入的文字 在输入框内容为空时 添加了一个 抖动的动画。

2 具体实现步骤

① 继承EditText

ClearEditText extends EditText

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

 public ClearEditText(Context context, AttributeSet attrs) {
        this(context, attrs, android.R.attr.editTextStyle);
 }

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

② 设置自定义属性 获取自定义属性
设置

<declare-styleable name="ClearEditText">
        <attr name="rightDrawable" format="reference" />
        <attr name="isShake" format="boolean" />
</declare-styleable>

获取

        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.ClearEditText, defStyleAttr, 0);

        mLeftDrawable = array.getDrawable(R.styleable.ClearEditText_leftDrawable);

        mRightDrawable = array.getDrawable(R.styleable.ClearEditText_rightDrawable);

        mIsShake = array.getBoolean(R.styleable.ClearEditText_isShake, false); //默认不抖动

③设置清除图片

 private void setRightDrawable() {
        if (mRightDrawable == null) {
            // 获取设置 左 上 右 下  的 drawable数组  0  1  2  3  drawableLeft  drawableTop drawableRight drawableBottom
            mRightDrawable = getCompoundDrawables()[2];
            if (mRightDrawable != null) {
                mRightDrawable.setBounds(0, 0, mRightDrawable.getMinimumWidth(), mRightDrawable.getMinimumHeight());
                setCompoundDrawables(getCompoundDrawables()[0], getCompoundDrawables()[1], mRightDrawable, getCompoundDrawables()[3]);
            }
        }
    }

④ 重写onDraw方法 被EditText 添加背景框

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint_line.setStyle(Paint.Style.STROKE);
        paint_line.setStrokeWidth(4);
        paint_line.setColor(Color.GRAY);
        drawLine(canvas);

    }
 private void drawLine(Canvas canvas) {
        canvas.save();
        canvas.drawLine(0, getHeight(), getWidth(), getHeight(), paint_line);

        canvas.drawLine(0, 0, 0, getHeight(), paint_line);

        canvas.drawLine(0, 0, getWidth(), 0, paint_line);

        canvas.drawLine(getWidth(), 0, getWidth(), getHeight(), paint_line);
    }

⑤处理事件
点击清除事件

/**
     * 因为我们不能直接给EditText设置点击事件，所以我们用记住我们按下的位置来模拟点击事件
     * 当我们按下的位置 在  EditText的宽度 - 图标到控件右边的间距 - 图标的宽度  和
     * EditText的宽度 - 图标到控件右边的间距之间我们就算点击了图标，竖直方向就没有考虑
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_UP) {
            if (getCompoundDrawables()[2] != null) {
                //getTotalPaddingRight()图标左边缘至控件右边缘的距离
                //getWidth() - getTotalPaddingRight()表示从最左边到图标左边缘的位置
                //getWidth() - getPaddingRight()表示最左边到图标右边缘的位置
                boolean touchable = event.getX() > (getWidth() - getTotalPaddingRight())
                        && (event.getX() < ((getWidth() - getPaddingRight())));

                if (touchable) {
                    this.setText("");
                }
            }
        }

        return super.onTouchEvent(event);
    }

获取焦点事件

//设置焦点改变的监听
        setOnFocusChangeListener(this);
        //设置输入框里面内容发生改变的监听
        addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                if (hasFoucs) {
                    setClearIconVisible(charSequence.length() > 0);
                }
            }

            @Override
            public void afterTextChanged(Editable editable) {

            }
        });

四 源码地址

源码地址