效果
绘制直线
首先我们了解下自定义View
代码语言:javascript复制 /**
* 测量的方法
* @param widthMeasureSpec
* @param heightMeasureSpec
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
/**
* 定位的方法
* @param changed
* @param left
* @param top
* @param right
* @param bottom
*/
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
}
/**
* 绘制View的方法
* @param canvas
*/
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
}
知道了这些下面我们开始绘制直线
代码语言:javascript复制 //画笔
Paint red=new Paint();
Paint green=new Paint();
Paint text=new Paint();
Paint black=new Paint();
这就是我们的画笔
现在开始给画笔安装笔芯
代码语言:javascript复制 //颜色
red.setColor(Color.RED);
//宽度
red.setStrokeWidth(50);
red.setAntiAlias(true);
red.setStyle(Paint.Style.FILL);
//抗锯齿功能
green.setAntiAlias(true);
green.setColor(Color.GREEN);
green.setStyle(Paint.Style.FILL);
//Paint.Style.FILL :填充内部
// Paint.Style.FILL_AND_STROKE :填充内部和描边
// Paint.Style.STROKE :仅描边
green.setStrokeWidth(50);
text.setStrokeWidth(4);
text.setColor(Color.BLACK);
text.setTextSize(30);
//绘制文字的笔
black.setColor(Color.BLACK);
black.setStrokeWidth(2);
black.setStyle(Paint.Style.STROKE);
笔芯装完
开始画!
代码语言:javascript复制 //画出红线
canvas.drawLine(0,70,redLength,70,red);
//画出绿线
canvas.drawLine(0,70,greenLength,70,green);
//画出文字
canvas.drawText(end "",end,25, text);
canvas.drawText(start "",0,25, text);
直线画完了
最后我们添加上刷新的方法
代码语言:javascript复制//刷新
invalidate();
代码语言:javascript复制完整代码
public class DrawLine extends View {
//画笔
Paint red=new Paint();
Paint green=new Paint();
Paint text=new Paint();
Paint black=new Paint();
/**
* 整体长度
*/
private float redLength=400;
/**
* 进度长度
*/
private float greenLength=200;
/**
* 起点显示文本
*/
private float start=0;
/**
* 进度条显示文本
*/
private float end=greenLength;
public float getRedLength() {
return redLength;
}
public float getStart() {
return start;
}
public void setStart(float start) {
this.start = start;
}
public float getEnd() {
return end;
}
public void setEnd(float end) {
this.end = end;
}
public void setRedLength(float redLength) {
this.redLength = redLength;
}
public float getGreenLength() {
return greenLength;
}
public void setGreenLength(float greenLength) {
this.greenLength = greenLength;
}
public DrawLine(Context context) {
super(context);
}
/**
* 绘制直线
* @param canvas
*/
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//颜色
red.setColor(Color.RED);
//宽度
red.setStrokeWidth(50);
red.setAntiAlias(true);
red.setStyle(Paint.Style.FILL);
//抗锯齿功能
green.setAntiAlias(true);
green.setColor(Color.GREEN);
green.setStyle(Paint.Style.FILL);
//Paint.Style.FILL :填充内部
// Paint.Style.FILL_AND_STROKE :填充内部和描边
// Paint.Style.STROKE :仅描边
green.setStrokeWidth(50);
text.setStrokeWidth(4);
text.setColor(Color.BLACK);
text.setTextSize(30);
//绘制文字的笔
black.setColor(Color.BLACK);
black.setStrokeWidth(2);
black.setStyle(Paint.Style.STROKE);
//画出红线
canvas.drawLine(0,70,redLength,70,red);
//画出绿线
canvas.drawLine(0,70,greenLength,70,green);
//画出文字
canvas.drawText(end "",end,25, text);
canvas.drawText(start "",0,25, text);
//刷新
invalidate();
}
}
代码其实很少,我添加了些get、set方法
绘制圆环
同样的我们要有一支笔
代码语言:javascript复制 mPaint = new Paint();
给笔装上笔芯
代码语言:javascript复制 mPaint.setStrokeWidth(mCircleWidth); // 设置圆环的宽度
mPaint.setAntiAlias(true); // 消除锯齿
mPaint.setStyle(Paint.Style.STROKE); // 设置空心
好了现在我们开始画
代码语言:javascript复制 RectF oval = new RectF(center - radius, center - radius,
center radius, center radius); // 用于定义的圆弧的形状和大小的界限
ArrayList list=new ArrayList();
mPaint.setColor(mFirstColor); // 设置圆环的颜色
canvas.drawCircle(center, center, radius, mPaint); // 画出圆环
mPaint.setColor(mSecondColor); // 设置圆环的颜色
canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧
/**
* oval :指定圆弧的外轮廓矩形区域。
* startAngle: 圆弧起始角度,单位为度。
* sweepAngle: 圆弧扫过的角度,顺时针方向,单位为度。
* useCenter: 如果为True时,在绘制圆弧时将圆心包括在内,通常用来绘制扇形。
* paint: 绘制圆弧的画板属性,如颜色,是否填充等。
*/
最后同样是刷新
代码语言:javascript复制 invalidate();
代码语言:javascript复制完整代码
public class DrawCircle extends View {
/**
* 第一种颜色
*/
private int mFirstColor=Color.parseColor("#fd0000");
/**
* 第二种颜色
*/
private int mSecondColor=Color.parseColor("#0022ff");
/**
* 圆弧的宽度
*/
private int mCircleWidth=60;
/**
* 画笔
*/
private Paint mPaint;
public int getmProgress() {
return mProgress;
}
public void setmProgress(int mProgress) {
this.mProgress = mProgress;
}
/**
* 圆弧的度数
*/
private int mProgress;
/**
*圆环大小
*/
private int mwidth=300;
public int getMwidth() {
return mwidth;
}
public void setMwidth(int mwidth) {
this.mwidth = mwidth;
}
public DrawCircle(Context context) {
super(context);
mPaint = new Paint();
}
@Override
protected void onDraw(Canvas canvas) {
int center = getMwidth()/ 2;
int radius = center - mCircleWidth / 2;
mPaint.setStrokeWidth(mCircleWidth); // 设置圆环的宽度
mPaint.setAntiAlias(true); // 消除锯齿
mPaint.setStyle(Paint.Style.STROKE); // 设置空心
RectF oval = new RectF(center - radius, center - radius, center radius, center radius); // 用于定义的圆弧的形状和大小的界限
ArrayList list=new ArrayList();
mPaint.setColor(mFirstColor); // 设置圆环的颜色
canvas.drawCircle(center, center, radius, mPaint); // 画出圆环
mPaint.setColor(mSecondColor); // 设置圆环的颜色
canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧
/**
* oval :指定圆弧的外轮廓矩形区域。
* startAngle: 圆弧起始角度,单位为度。
* sweepAngle: 圆弧扫过的角度,顺时针方向,单位为度。
* useCenter: 如果为True时,在绘制圆弧时将圆心包括在内,通常用来绘制扇形。
* paint: 绘制圆弧的画板属性,如颜色,是否填充等。
*/
invalidate();
}
}
如有不足,请指出谢谢!