Android View之View绘制原理
1. View的绘制原理
android.graphics 相关类
Paint： 画笔
Cancas： 画布
Bitmap： Canvas背景图片
Color、Matrix、Drawable
简单绘制
private Bitmap getBitmap(){
int width = 300;
int height = 300;
Bitmap bmp = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bmp);
Paint paint = new Paint();
paint.setColor(Color.YELLOW);
canvas.drawRect(0, 0, width, height, paint);
Paint textPaint = new Paint();
textPaint.setColor(Color.BLUE);
textPaint.setTextSize(100);
textPaint.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD_ITALIC));
textPaint.setTextAlign(Paint.Align.CENTER);
canvas.drawText("Hello", width/2, height/2,textPaint);
return bmp;
}
2. 渐变颜色 Shader 着色器
Shader类子类
BitmapShader：图形渲染
LinearGradient：线性渐变
RadialGradient：环形渐变
SweepGradient：扫描渐变
ComposeShader：组合渲染
//配置渐变色,默认左上角开始斜着渐变
int[] colors =new int[]{Color.WHITE, Color.YELLOW, Color.GREEN};
float[] positions =new float[]{0.0f,0.5f,1.0f};
LinearGradient shader =newLinearGradient(0,0,width,height,colors, positions, Shader.TileMode.CLAMP);
//顺时针旋转45度
Matrix matrix =newMatrix();
matrix.setRotate(45,width/2, height/2);
shader.setLocalMatrix(matrix);
// 设置paint的shader
paint.setShader(shader);
3. 重要绘制方法
3.1 绘制点和线
Bitmap bmp = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas canvas =newCanvas(bmp);
//解析颜色值
canvas.drawColor(Color.parseColor("#DDCC01"));
Paint paint =newPaint();
paint.setColor(Color.WHITE);
paint.setStrokeWidth(5);//设置线宽
float[] pts =new float[]{
20,20,
40,40,
80,80,
100,100
};
canvas.drawPoints(pts, paint);//画点，pts必须为2的倍数
canvas.drawLines(pts, paint);//画线，4个值为一条线
3.2 绘制矩形
Bitmap bmp = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas canvas =newCanvas(bmp);
//解析颜色值
canvas.drawColor(Color.parseColor("#DDCC01"));
Paint paint =newPaint();
paint.setColor(Color.WHITE);
paint.setStrokeWidth(5);//设置线宽
canvas.drawRoundRect(newRectF(100,100,300,300),50,50, paint);
如需要画一个空心的矩形
paint.setStyle(Paint.Style.STROKE);//设置paint的style为STROKE
3.3 绘制路径
Path path =newPath();
path.moveTo(10.0f,10.0f);
path.lineTo(300.0f,30.0f);
path.lineTo(400.0f,500.0f);
path.lineTo(500.0f,300.0f);
canvas.drawPath(path, paint);
注：当画实心的时候，最后一个点会与第一个点粘上，画空心的时候则不会（即调用
paint
.setStyle(Paint.Style.
STROKE
);）
4 绘制表钟的实例
Bitmap bmp = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bmp);
// 解析颜色值
canvas.drawColor(Color.parseColor("#FFFFFF"));
Paint paint = new Paint();
paint.setColor(Color.parseColor("#333333"));
paint.setStyle(Paint.Style.STROKE);
paint.setAntiAlias(true); // 消除锯齿的功能
paint.setStrokeWidth(4);
// 外围圆
float radius = width/2 - 4;
canvas.drawCircle(width/2, height/2, radius, paint);
// 内部实心圆
paint.setStyle(Paint.Style.FILL);
canvas.drawCircle(width/2, height/2, 10, paint);
// 循环画刻度
for(int i = 0; i < 12; i++){
if(i % 3 == 0){
paint.setStrokeWidth(10);
canvas.drawLine(width/2 , height/2 + radius - 24, width/2, height/2 + radius, paint);
}else{
paint.setStrokeWidth(4);
canvas.drawLine(width/2 , height/2 + radius - 20, width/2, height/2 + radius, paint);
}
canvas.rotate(30, width/2, height/2); // 注意：这里巧妙应用canvas旋转的思想
}
// 画时间指针
Calendar calendar = Calendar.getInstance();
int hour = calendar.get(Calendar.HOUR);
int minute = calendar.get(Calendar.MINUTE);
int second = calendar.get(Calendar.SECOND);
float lenH = radius * 0.7f;
float lenM = radius * 0.8f;
float lenS = radius * 0.9f;
float degree = hour * 30.0f + minute / 2;
paint.setStrokeWidth(10);
canvas.save(); // 第二种方法：先保存后restore
canvas.rotate(degree, width/2, height/2);
canvas.drawLine(width/2 , height/2, width/2, height/2 - lenH, paint);
// canvas.rotate(-degree, width/2, height/2); // 第一种方法，旋转回来
canvas.restore(); // 第二种方法：先保存后restore
// canvas.save();// save有count返回值
// canvas.restoreToCount(1);// restore到制定的count
// 画分钟
degree = minute * 6.0f + second / 10;
paint.setStrokeWidth(6);
canvas.save();
canvas.rotate(degree, width/2, height/2);
canvas.drawLine(width/2 , height/2, width/2, height/2 - lenM, paint);
canvas.restore();
// 画分钟
degree = second * 6.0f;
paint.setStrokeWidth(4);
canvas.save();
canvas.rotate(degree, width/2, height/2);
canvas.drawLine(width/2 , height/2, width/2, height/2 - lenS, paint);
canvas.restore();
// 要使表钟动起来，可新建一个AsyncTask，来在后台更新，如下简易版代码：
private class updateClock extends AsyncTask{
@Override
protected Void doInBackground(Void... params) {
while(true){
publishProgress();
try {
Thread.sleep(1000);
}catch (InterruptedException e){
}
}
}
@Override
protected void onProgressUpdate(Void... values) {
super.onProgressUpdate(values);
mImageView.setImageBitmap(getBitmap());
}
} 