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) {

}
});

四 源码地址

源码地址