51、自定义View基础和原理

一、编写自己的自定义View
最简单的自定义View，继承View
通过覆盖View的onDraw方法来实现自主显示
利用Canvas和paint来绘制显示元素（文字，几何图形等）

<com.myview.v1.MyView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00ff00" />

public class MyView extends View {

private Bitmap bitmap;

public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
bitmap = BitmapFactory.decodeResource(getResources(),
R.drawable.ic_launcher);
}

public MyView(Context context) {
super(context);
bitmap = BitmapFactory.decodeResource(getResources(),
R.drawable.ic_launcher);
}

@Override    // 加入绘制元素
protected void onDraw(Canvas canvas) {

Paint paint = new Paint();
paint.setTextSize(30);
// a,r,g,b（透明度，红色，绿色，蓝色）
paint.setColor(0xffff0000);
/**
* 绘制文字
* Android 中绘制文字的方向是，左下。 所以需要把Y坐标改成30下移，就可以显示了。
* 0, 30 分别为 X Y坐标
* drawText(String text, float x, float y, Paint paint)
*/
canvas.drawText("this is onDraw", 0, 30, paint);
/**
* drawLine(float startX, float startY, float stopX, float stopY, Paint paint)
* 在文字下30的地方绘制一条线，所以开始和结束的Y坐标就是(30+30)。
*/
canvas.drawLine(0, 60, 100, 60, paint);

paint.setStyle(Style.STROKE);

// 通过坐标绘制矩形
// canvas.drawRect(0, 90, 100, 190, paint);
// 通过Rect绘制矩形
// Rect r = new Rect(0, 90, 100, 190);
// canvas.drawRect(r, paint);
// 通过RectF绘制矩形
RectF rect = new RectF(0, 90, 100, 190);
// canvas.drawRect(rect, paint);
// 绘制圆角矩形
// drawRoundRect(RectF rect, float rx, float ry, Paint paint)
canvas.drawRoundRect(rect, 10, 10, paint);

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

canvas.drawBitmap(bitmap, 0, 350, paint);
}

}

二、加入逻辑线程
让文字动起来，改变坐标
在线程中修改坐标（加入循环，时间睡眠）
重新绘制元素（两种方式）
线程休眠时间控制（去除逻辑处理时间）

 import java.util.Random;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

public class LogicView extends View {

// 实例化 画笔。
private Paint paint = new Paint();
//
private float rx = 0;
// 添加线程属性
private MyThread thread;
/**
* 绘制在文字下，30的地方。
* RectF(float left, float top, float right, float bottom)
*         0           30+30                宽度100       60+100
*/
private RectF rectF = new RectF(0, 60, 100, 160);
// 区间角度
private float sweepAngle = 0;

// 在布局当中使用。
public LogicView(Context context, AttributeSet attrs) {
super(context, attrs);
}

// 在代码当中使用。
public LogicView(Context context) {
super(context);
}

@Override
protected void onDraw(Canvas canvas) {
paint.setTextSize(30);
canvas.drawText("LogicView", rx, 30, paint);
/**
* 绘制一个圆。
* drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter,
Paint paint)
* sweepAngle：区间角度。
* useCenter：true ,false. 绘制的效果不同。
*/
canvas.drawArc(rectF, 0, sweepAngle, true, paint);

if (thread == null) {
thread = new MyThread();
thread.start();
}
}

class MyThread extends Thread {
// 随机对象，产生随机值。
Random rand = new Random();
@Override
public void run() {
while (true) {
rx += 3;
// 当超出屏幕的宽度时。
if (rx > getWidth()) {
/**
* 走出屏幕后，重新回到屏幕。
* 0 - 文字的宽度，这样 “LogicView”文字，从左边出来的时候，
* 就可以从w开始一点点移出屏幕。
*/
rx = 0 - paint.measureText("LogicView");
}

sweepAngle++;
if (sweepAngle > 360) {
sweepAngle = 0;
}

// 取到 0-255的随机数。
int r = rand.nextInt(256);
int g = rand.nextInt(256);
int b = rand.nextInt(256);

// 设置颜色。
paint.setARGB(255, r, g, b);

postInvalidate(); // 重绘
try {
Thread.sleep(30); // 睡眠30毫秒
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}

}

把以上代码进行封装。

import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.View;

// 基类
public abstract class BaseView extends View {
private MyThread thread;
private boolean running = true;

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

public BaseView(Context context) {
super(context);
}

protected abstract void drawSub(Canvas canvas);

protected abstract void logic();

@Override
protected final void onDraw(Canvas canvas) {

if (thread == null) {
thread = new MyThread();
thread.start();
} else {
drawSub(canvas);
}

}

@Override
protected void onDetachedFromWindow() {
running = false;
super.onDetachedFromWindow();
}

class MyThread extends Thread {
@Override
public void run() {
while (running) {
logic();
postInvalidate();
try {
Thread.sleep(30);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}

}

import java.util.Random;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;

 public class LogicView extends BaseView {

private Paint paint = new Paint();
private float rx = 0;
private RectF rectF = new RectF(0, 60, 100, 160);
private float sweepAngle = 0;
Random rand = new Random();

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

public LogicView(Context context) {
super(context);
}

@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() {
rx += 3;

if (rx > getWidth()) {
rx = 0 - paint.measureText("LogicView");
}

sweepAngle++;
if (sweepAngle > 360) {
sweepAngle = 0;
}

int r = rand.nextInt(256);
int g = rand.nextInt(256);
int b = rand.nextInt(256);

paint.setARGB(255, r, g, b);
}

}

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;

public class MyText extends BaseView {

private Paint paint = new Paint();
private float rx = 0;

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

public MyText(Context context) {
super(context);
}

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

@Override
protected void logic() {
rx += 3;
if (rx > getWidth()) {
rx = -paint.measureText("MyText");
}
}

}

三、利用xml中定义样式来影响显示效果
在xml中定义样式和属性
在布局中使用属性（命名空间需要声明）
在代码中解析样式的属性
在代码中使用属性对显示效果产生影响

范例：绘制相同的文字，不同的行数。从左边移动到右边。

布局文件：activity_main.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:nt="http://schemas.android.com/apk/res/com.myview"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" >   nt:这个名字是自定义的。

 <com.myview.v4.NumText
android:layout_width="match_parent"
android:layout_height="match_parent"
nt:lineNum="6"
nt:xScroll="true"/>
</FrameLayout>

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import com.myview.R;
import com.myview.v3.BaseView;

// 效果：竖着一排文字，无限 从左移动到右边
public class NumText extends BaseView {

private Paint paint = new Paint();
private int lineNum = 0;
private int mx = 0;
private boolean xScroll = false;

public NumText(Context context) {
super(context);
}

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

// 在代码中解析 “样式属性”。
TypedArray ta = context.obtainStyledAttributes(attrs,
R.styleable.NumText);
//  1  是默认的一行。
lineNum = ta.getInt(R.styleable.NumText_lineNum, 1);
// 默认为不滚动（文字从左滚动到右边）
xScroll = ta.getBoolean(R.styleable.NumText_xScroll, false);
ta.recycle();
}

@Override
protected void drawSub(Canvas canvas) {
for (int i = 0; i < lineNum; i++) {
int textSize = 30 + i;
paint.setTextSize(textSize);
canvas.drawText("百度百科", mx, textSize + textSize * i, paint);
}
}

@Override
protected void logic() {
if (xScroll) {
mx += 3;
if (mx > getWidth()) {
mx = (int) -paint.measureText("百度百科");
}
}
}

}

四、通过代码添加自定义控件。
setContentView(new MyView(this));