前面说到了自定义View一般有3种方式来实现,现在这里先说第一种实现方式,也是经常用到的--------对现有控件进行扩展。
在系统原生控件的基础上进行扩展,实现增加功能、修改UI等。一般来说,我们在onDraw()方法中对原生控件行为进行扩展。
下面实现更改TextView的背景为例,为其多绘制几层背景。
原生的TextView使用onDraw()方法绘制显示的文字,当继承了系统的TextView之后,如果不重写其onDraw()方法,则不会修改TextView的任何效果。可以认为在自定义的TextView中调用TextView类的onDraw()方法来绘制了显示的文字,代码如下:
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
}
程序调用super.onDraw(canvas)方法来实现原生控件的功能,但是在调用super.onDraw()方法之前和之后,我们都可以实现自己的逻辑,分别在系统绘制文字的前后,完成自己的操作,即如下所示。
@Override
protected void onDraw(Canvas canvas) {
//在回调父类方法之前,实现自己的逻辑,对TextView来说即是在绘制文本内容前
super.onDraw(canvas);
//在回调父类方法之后,实现自己的逻辑,对TextView来说即是在绘制文本内容后
}
所以,为了改变原生的绘制行为,在系统调用super.onDraw(canvas)方法前,也就是在绘制文字之下,绘制两个不用大小的矩形,形成一个重叠的效果,再让系统调用super.onDraw(canvas)方法,执行绘制文字的工作。这样,我们就通过改变控件的绘制行为,创建了一个全新的控件。
代码如下:
@Override
protected void onDraw(Canvas canvas) {
Log.e("被调用-----》", "onDraw");
mPaint1.setColor(getResources().getColor(
android.R.color.holo_blue_bright));
mPaint1.setStyle(Paint.Style.FILL);
mPaint2.setColor(Color.WHITE);
mPaint2.setStyle(Paint.Style.FILL);
canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint1);
canvas.drawRect(2, 2, getMeasuredWidth() - 2, getMeasuredHeight() - 2,
mPaint2);
canvas.save();
canvas.translate(2, 0);
super.onDraw(canvas);
canvas.restore();
}
其中的画笔的初始化在其两个参数的构造方法中去实现public DefineView1(Context context, AttributeSet attrs) {
super(context, attrs);
mPaint1 = new Paint();
mPaint2 = new Paint();
Log.e("被调用-----》", "初始化");
}
效果如下:
完整代码如下
package com.example.define_view;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.util.Log;
import android.widget.TextView;
public class DefineView1 extends TextView {
private Paint mPaint1, mPaint2;
int mTranslate;
public DefineView1(Context context) {
super(context);
}
public DefineView1(Context context, AttributeSet attrs) {
super(context, attrs);
mPaint1 = new Paint();
mPaint2 = new Paint();
Log.e("被调用-----》", "初始化");
}
public DefineView1(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onDraw(Canvas canvas) {
Log.e("被调用-----》", "onDraw");
mPaint1.setColor(getResources().getColor(
android.R.color.holo_blue_bright));
mPaint1.setStyle(Paint.Style.FILL);
mPaint2.setColor(Color.WHITE);
mPaint2.setStyle(Paint.Style.FILL);
canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint1);
canvas.drawRect(2, 2, getMeasuredWidth() - 2, getMeasuredHeight() - 2,
mPaint2);
canvas.save();
canvas.translate(2, 0);
super.onDraw(canvas);
canvas.restore();
}
}
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#cccccc"
tools:context="com.example.define_view.MainActivity" >
<com.example.define_view.DefineView1
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="通过继承原来的view控件,实现功能的扩展" />
</RelativeLayout>
扩展
利用LinearGradient Shader和Matrix来 实现一个稍微复杂的TextView,绘制一个类似于跑马灯类似的动态文字闪烁的效果。
要实现这一效果,可以充分利用Android中Paint对象的Sharder渲染器。通过设置一个不断变化的LinearGradient,并使用带有该属性的Paint对象来绘制显示的文字。
首先在onSizeChange()方法中进行一些对象的初始化工作,并根据View的宽高设置一个LinearGradient渐变渲染器,代码如下:
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
// TODO 自动生成的方法存根
super.onSizeChanged(w, h, oldw, oldh);
if (mViewWidth == 0) {
mViewWidth = getMeasuredWidth();
if (mViewWidth > 0) {
mPaint1 = getPaint();
mLinearGradient = new LinearGradient(0, 0, mViewWidth, 0,
new int[] { Color.BLUE, 0xffffffff, Color.BLUE }, null,
Shader.TileMode.CLAMP);
}
mPaint1.setShader(mLinearGradient);
mGradientMatrix=new Matrix();
}
}
其中最关键的就是利用getPaint()方法获取当前绘制TextView的Paint对象,并给这个Paint对象设置原生TextView没有的LinearGradient属性。最后,在onDraw()方法中,通过矩阵的方式来不断平移渐变效果,从而在绘制文字时,产生动态的闪动效果,代码如下:
@Override
protected void onDraw(Canvas canvas) {
Log.e("被调用-----》", "onDraw");
super.onDraw(canvas);
if (mGradientMatrix != null) {
mTranslate += mViewWidth / 5;
if (mTranslate>2*mViewWidth) {
mTranslate=-mViewWidth;
Log.e("onDraw---->", ""+mTranslate);
}
mGradientMatrix.setTranslate(mTranslate, 0);
mLinearGradient.setLocalMatrix(mGradientMatrix);
postInvalidateDelayed(200);
}
}
效果如下
其中onSizeChanged()方法,是组件大小改变时回调。
package com.example.define_view;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.util.Log;
import android.widget.TextView;
public class DefineView1 extends TextView {
private Paint mPaint1, mPaint2;
private int mViewWidth = 0;
LinearGradient mLinearGradient;
Matrix mGradientMatrix;
int mTranslate;
public DefineView1(Context context) {
super(context);
}
public DefineView1(Context context, AttributeSet attrs) {
super(context, attrs);
Log.e("被调用-----》", "初始化");
}
public DefineView1(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onDraw(Canvas canvas) {
Log.e("被调用-----》", "onDraw");
super.onDraw(canvas);
if (mGradientMatrix != null) {
mTranslate += mViewWidth / 5;
if (mTranslate>2*mViewWidth) {
mTranslate=-mViewWidth;
Log.e("onDraw---->", ""+mTranslate);
}
mGradientMatrix.setTranslate(mTranslate, 0);
mLinearGradient.setLocalMatrix(mGradientMatrix);
postInvalidateDelayed(200);
}
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
// TODO 自动生成的方法存根
super.onSizeChanged(w, h, oldw, oldh);
if (mViewWidth == 0) {
mViewWidth = getMeasuredWidth();
if (mViewWidth > 0) {
mPaint1 = getPaint();
mLinearGradient = new LinearGradient(0, 0, mViewWidth, 0,
new int[] { Color.BLUE, 0xffffffff, Color.BLUE }, null,
Shader.TileMode.CLAMP);
}
mPaint1.setShader(mLinearGradient);
mGradientMatrix=new Matrix();
}
}
}