1,上一两个demo简单说明一下吧
第一个绘一个实时的钟表:
具体代码:
package demo.com.customviewdemo;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
import java.util.Calendar;
/**
* Created by Alv_chi
*/
public class MyClockView extends View {
private Paint circlePaint;
private Paint pointerPaint;
private Paint textPaint;
public MyClockView(Context context) {
this(context, null);
}
public MyClockView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public MyClockView(Context context, AttributeSet attrs, int defStyleAttr) {
this(context, attrs, defStyleAttr, 0);
}
public MyClockView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
// 初始化画笔工具:
initialPaints();
}
private void initialPaints() {
circlePaint = new Paint();
circlePaint.setAntiAlias(true);
circlePaint.setColor(Color.CYAN);
circlePaint.setStyle(Paint.Style.STROKE);
circlePaint.setStrokeWidth(10);
pointerPaint = new Paint();
pointerPaint.setColor(Color.GREEN);
textPaint = new Paint();
textPaint.setColor(Color.RED);
textPaint.setTextSize(30);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 计算圆心坐标,和半径;
int height = getHeight();
int width = getWidth();
int centerY = height / 2;
int centerX = width / 2;
int radius = (height > width ? width : height) / 4;
// 画个圆,和圆心;
canvas.drawCircle(centerX, centerY, radius, circlePaint);
canvas.drawPoint(centerX, centerY, circlePaint);
// 画钟表上的数字:
double singleAngle = Math.PI * 2 / 12;
for (int i = 1; i < 13; i++) {
float textSize = textPaint.measureText(i + "", 0, (i + "").length());
double deltaAngle = singleAngle * i;
double y = centerY - radius * Math.cos(deltaAngle)+textSize/2;
double x = centerX + radius * Math.sin(deltaAngle)-textSize/2;
canvas.drawText(i + "", (float) x, (float) y, textPaint);
}
// 画时针,分针,秒针:
Calendar calendar = Calendar.getInstance();
int second = calendar.get(Calendar.SECOND);
int minute = calendar.get(Calendar.MINUTE);
int hour = calendar.get(Calendar.HOUR);
float fhour = hour+ minute / 60f;
// 时针
pointerPaint.setStrokeCap(Paint.Cap.ROUND);
pointerPaint.setStrokeWidth(20);
canvas.drawLine(centerX, centerY, (float) (centerX + radius * 0.45 * Math.sin(Math.toRadians(fhour * 30))), (float) (centerY - (radius * 0.5 * Math.cos(Math.toRadians(fhour * 30)))), pointerPaint);
// 分针
pointerPaint.setStrokeWidth(10);
canvas.drawLine(centerX, centerY, (float) (centerX + radius * 0.6 * Math.sin(Math.toRadians(minute * 6))), (float) (centerY - (radius * 0.8 * Math.cos(Math.toRadians(minute * 6)))), pointerPaint);
// 秒针
pointerPaint.setStrokeWidth(3);
canvas.drawLine(centerX, centerY, (float) (centerX + radius * 0.8 * Math.sin(Math.toRadians(second * 6))), (float) (centerY - (radius * 0.8 * Math.cos(Math.toRadians(second * 6)))), pointerPaint);
// 每隔1秒重绘刷新一次;
postInvalidateDelayed(1000);
}
}
效果如图:
2;第二个例子是以一个正五边形和五角星:
package demo.com.customviewdemo;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;
/**
* Created by Alv_chi
*/
public class MyFiveStarView extends View{
private Paint paint;
private double[] arrY;
private double[] arrX;
private Path path;
private double[] X;
private double[] Y;
public MyFiveStarView(Context context) {
this(context,null);
}
public MyFiveStarView(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public MyFiveStarView(Context context, AttributeSet attrs, int defStyleAttr) {
this(context, attrs, defStyleAttr,0);
}
public MyFiveStarView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
paint = new Paint();
paint.setColor(Color.CYAN);
paint.setStrokeWidth(20);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int height = getHeight();
int width = getWidth();
int centerY = height / 2;
int centerX = width / 2;
int radius = (height > width ? width : height) / 4;
initialPointArr(centerY, centerX, radius);
// 画正五边形:
// drawGraphic(canvas,arrX,arrY);
// 改变一下数组坐标顺序,就可以画个五角星:
drawGraphic(canvas,X,Y);
}
private void drawGraphic(Canvas canvas,double[] X,double[] Y) {
path = new Path();
for (int i = 0; i < 5; i++) {
if (i==0)
{
path.moveTo((float) X[i], (float) Y[i]);
}else
{
path.lineTo((float) X[i], (float) Y[i]);
}
}
path.close();
canvas.drawPath(path,paint);
}
private void initialPointArr(int centerY, int centerX, int radius) {
// 从最高顶点开始,从左往右开始计算各个顶点的坐标;
// 顶点坐标:
double tX = centerX;
double tY = centerY - radius;
// 右中顶点坐标:
double rmY = centerY-radius *Math.sin(Math.toRadians(18));
double rmX = tX + radius * Math.cos(Math.toRadians(18));
// 右底顶点坐标:
double rbY = centerY + radius * Math.cos(Math.toRadians(36));
double rbX = centerX + radius *Math.sin(Math.toRadians(36));;
// 相对应的左边中底顶点坐标为:
double lmY = rmY;
double lmX = tX -radius * Math.cos(Math.toRadians(18));
double lbY = rbY;
double lbX = centerX - radius *Math.sin(Math.toRadians(36));
// 分别用两数组对应地装起来;
arrY = new double[]{tY,rmY,rbY,lbY,lmY};
arrX = new double[]{tX,rmX,rbX,lbX,lmX};
// 改变数组顺序:
X = new double[]{lbY,tY,rbY,lmY,rmY};
Y = new double[]{lbX,tX,rbX,lmX,rmX};
}
}
效果如图:
总结; 先是准备好画笔,再计算出相应坐标位置(x,y),最后用相应的Draw方法去绘,不难,主要是数学计算和相关Api的运用,api不懂可以直接看源码;
最后源码下载:点击打开链接下载源码