自定义View基础与原理

这里写链接内容# 自定义View基础与原理

什么是自定义View

其实就是继承系统的View，然后加入绘制元素（文字/图形）和逻辑，最终达到自己想要想过的控件。

为什么使用自定义View

特定的显示风格

处理特有的用户交互

优化布局

封装等

如何自定义控件

编写自己的自定义View

- 编写最简单的自定义View，什么都不显示，但是有View的特性

/**
* java代码创建视图的时候被调用，如果是从xml填充的视图，就不会调用这个
*
* @param context
*/
public MyView(Context context) {
super(context);
}

/**
* 这个是在xml创建但是没有指定style的时候被调用
*
* @param context
* @param attrs
*/
public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
}

/**
* 这个是在xml创建且指定style的时候被调用
*
* @param context
* @param attrs
* @param defStyleAttr
*/
public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}

那种情况下调用那个构造方法，上面注释已经写的很清楚了。不妨我们想一下，让第一个构造方法去调用第二个构造方法，第二个去调用第三个，这样会不会省去一些事呢。如下面例子的代码所示。

- 可以显示自己的元素（文字/几何图形/图片）

public class MyView extends View {

private Paint paint;
private Bitmap bitmap;

/**
* java代码创建视图的时候被调用，如果是从xml填充的视图，就不会调用这个
*
* @param context
*/
public MyView(Context context) {
this(context, null);
}

/**
* 这个是在xml创建但是没有指定style的时候被调用
*
* @param context
* @param attrs
*/
public MyView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

/**
* 这个是在xml创建且指定style的时候被调用
*
* @param context
* @param attrs
* @param defStyleAttr
*/
public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);

init();
}

private void init() {
// Paint样式和颜色信息，关于文字/几何图形和bitmap的
paint = new Paint();

bitmap = BitmapFactory.decodeResource(getResources(),
R.drawable.ic_launcher);
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
paint.setTextSize(30);
paint.setColor(Color.BLUE);
paint.setStyle(Paint.Style.STROKE);
// 绘制文字
canvas.drawText("this is onDraw", 0, 30, paint);

// 绘制直线
canvas.drawLine(0, 60, 100, 60, paint);

// 绘制矩形
canvas.drawRect(0, 90, 100, 190, paint);
// Rect中参数int类型
Rect r = new Rect(100, 90, 200, 190);
canvas.drawRect(r, paint);
// Rectf中参数float类型
RectF rect = new RectF(200, 90, 300, 190);
canvas.drawRect(rect, paint);
// 圆角矩形rx, ry x和y方向上的弧度
RectF rect2 = new RectF(300, 90, 400, 190);
canvas.drawRoundRect(rect2, 30, 30, paint);

// 绘制圆形
canvas.drawCircle(50, 270, 50, paint);

// 绘制图片
canvas.drawBitmap(bitmap, 0, 350, paint);
}

}

布局中使用

<!-- 完整的包名和类名 -->
<com.example.myview.MyView
android:layout_width="match_parent"
android:layout_height="match_parent"/>

运行结果如图：

加入逻辑线程

怎么让元素动起来呢，需要什么

不断的改变元素绘制的坐标位置，我们在视觉上就会感觉到元素在运动

元素动起来的逻辑放在哪里

创建一个线程，执行run方法里面改变其坐标，在进行重新绘制，android提供了在线程中重新绘制的方法postInvalidate()

怎样看起来动起来的元素流畅

一秒内绘制20次即可

public class LogicView extends View {
private Paint paint;
private float rx;
/**
* 逻辑线程
*/
private MyThread mThread;
private RectF rectF;
/**
* 区间角度
*/
private float sweepAngle;

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

public LogicView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

public LogicView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);

init();
}

/**
* 对类成员进行初始化
*/
private void init() {
paint = new Paint();
rectF = new RectF(0, 60, 100, 160);
mThread = new MyThread();
mThread.start();
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
paint.setTextSize(30);
canvas.drawText("LogicView", rx, 30, paint);

// 起始角度/区间角度
canvas.drawArc(rectF, 0, sweepAngle, true, paint);
}

class MyThread extends Thread {
Random random = new Random();

@Override
public void run() {
super.run();
// 不断的进行绘制
while (true) {
long start = System.currentTimeMillis();
// 超出屏幕长度
if ((rx += 3) > getWidth()) {
rx = 0 - paint.measureText("LogicView");
}
// 超出360度，清零
if (sweepAngle++ > 360) {
sweepAngle = 0;
}

int r = random.nextInt(256);
int g = random.nextInt(256);
int b = random.nextInt(256);
paint.setARGB(255, r, g, b);

// 线程中更新绘制的方法
// postInvalidate();
invalidateView();

long end = System.currentTimeMillis();
// 一秒绘制20次即可
if (end - start < 50) {
try {
Thread.sleep(50 - (end - start));
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}
}

/**
* 重绘
*/
private void invalidateView() {
if (Looper.getMainLooper() == Looper.myLooper()) {
invalidate();
} else {
postInvalidate();
}
}
}

提取和封装自定义View

封装后的基类

public abstract class BaseView extends View {
/**
* 逻辑线程
*/
private MyThread mThread;

/**
* 线程的控制开关
*/
private boolean isRunning = true;

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

public BaseView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

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

// 这里使用final关键字，不让子类重写
@Override
protected final void onDraw(Canvas canvas) {
if (mThread == null) {
mThread = new MyThread();
mThread.start();
} else {
drawSub(canvas);
}
}

/**
* 绘制元素
*
* @param canvas
*/
protected abstract void drawSub(Canvas canvas);

/**
* 逻辑处理
*/
protected abstract void logic();

//离开屏幕的时候结束掉线程
@Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();

isRunning = false;
}

class MyThread extends Thread {
@Override
public void run() {
super.run();
// 不断的进行绘制
while (isRunning) {
long start = System.currentTimeMillis();
logic();

invalidateView();

long end = System.currentTimeMillis();
// 一秒绘制20次即可
if (end - start < 50) {
try {
Thread.sleep(50 - (end - start));
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}
}

/**
* 重绘
*/
public void invalidateView() {
if (Looper.getMainLooper() == Looper.myLooper()) {
invalidate();
} else {
postInvalidate();
}
}
}

该过程中我们提出的绘制元素drawSub(Canvas canvas)方法和逻辑处理logic()方法。并将onDraw使用final关键字，不让子类去重写。当绘制离开屏幕的时候，结束掉逻辑处理线程。

使用基类

public class LogicView extends BaseView {

private Paint paint;
private float rx;
private RectF rectF;
/**
* 区间角度
*/
private float sweepAngle;

private Random random;

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

public LogicView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

public LogicView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);

init();
}

/**
* 对类成员进行初始化
*/
protected void init() {
paint = new Paint();
rectF = new RectF(0, 60, 100, 160);

random = new Random();
}

@Override
protected void drawSub(Canvas canvas) {
paint.setTextSize(30);
canvas.drawText("LogicView", rx, 30, paint);

// 起始角度/区间角度
canvas.drawArc(rectF, 0, sweepAngle, true, paint);

}

@Override
protected void logic() {
// 超出屏幕长度
if ((rx += 3) > getWidth()) {
rx = 0 - paint.measureText("LogicView");
}
// 超出360度，清零
if (sweepAngle++ > 360) {
sweepAngle = 0;
}

int r = random.nextInt(256);
int g = random.nextInt(256);
int b = random.nextInt(256);
paint.setARGB(255, r, g, b);
}
}

运行结果如图：

定义XML中定义的样式来影响显示效果

自定义样式attr.xml

新建自定义样式attr.xml在res/values目录下

<?xml version="1.0" encoding="utf-8"?>
<resources>

<declare-styleable name="NumText">

<!-- 绘制的行数 -->
<attr name="lineNum" format="integer"></attr>
<!-- 文字是否滚动显示 -->

<attr name="isScrool" format="boolean"></attr>
</declare-styleable>

</resources>

在布局中使用

在使用自定义属性的时候先声明xml的命名空间

eclipse:

xmlns:myview=”http://schemas.android.com/apk/res/完整的包名”

android studio:

xmlns:myview=”http://schemas.android.com/apk/res-auto”

布局中的使用：

<com.example.myview.v4.NumText
android:layout_width="match_parent"
android:layout_height="match_parent"
myview:isScrool="true"
myview:lineNum="3" >
</com.example.myview.v4.NumText>

例子代码

public class NumText extends BaseView {
/**
* 画笔
*/
private Paint paint;
/**
* 绘制文字x坐标
*/
private float rx;
/**
* 绘制的行数
*/
private int lintNum;
private Random random;
/**
* 是否滚动
*/
private boolean isScrool;

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

public NumText(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

public NumText(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);

paint = new Paint();
random = new Random();
//默认不滚动
isScrool = false;
//在view构造方法中获取自定义属性
TypedArray a = context.obtainStyledAttributes(attrs,
R.styleable.NumText);

int n = a.getIndexCount();

for (int i = 0; i < n; i++) {
int attr = a.getIndex(i);
switch (attr) {
case R.styleable.NumText_lineNum:
lintNum = (int) a.getInt(attr, 1);
break;

case R.styleable.NumText_isScrool:
isScrool = (boolean) a.getBoolean(attr, false);
break;
}

}

a.recycle();
}

@Override
protected void drawSub(Canvas canvas) {
// 绘制lineNum行文字
for (int i = 0; i < lintNum; i++) {
int textSize = 30 + i;
paint.setTextSize(textSize);
canvas.drawText("自定义View基础与原理", rx, textSize + textSize * i, paint);
}
}

@Override
protected void logic() {
if(isScrool){
// 超出屏幕长度
if ((rx += 5) > getWidth()) {
rx = 0 - paint.measureText("自定义View基础与原理");
}
// 改变画笔的颜色
int r = random.nextInt(256);
int g = random.nextInt(256);
int b = random.nextInt(256);
paint.setARGB(255, r, g, b);
}
}
}

运行结果：


源码下载