最近自己开发了一个圆形的进度条,乃是继承view 一切都在ondraw里面实现了。希望对各位大大们有所启示。
主要由4部分组成:显示百分比(可设置大小、颜色)、底图圆(可设置颜色)、圆环(可设置宽度和颜色)、头(可设置颜色和大小)。
主要步骤:
1、 在onSizeChanged方法中得到此view显示的宽高,在这里确定圆环的区域放入一个RectF。
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mWidth=w;
mHeight=h;
if(mWidth>mHeight){
mRadius=mHeight/2;
}else{
mRadius=mWidth/2;
}
//圆环绘制区域
mRect=new RectF(mWidth/2-mRadius+circleHeadRadius, mHeight/2-mRadius+circleHeadRadius, mWidth/2+mRadius-circleHeadRadius, mHeight/2+mRadius-circleHeadRadius);
}
2、主要绘制工作,注释比较详细
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.save();
//初始化画笔
setPaint();
//画地图圆
canvas.drawCircle(mWidth/2, mHeight/2, mRadius-circleHeadRadius, mPaint);
//画x%
drawText(canvas);
canvas.rotate(-90, mWidth/2, mHeight/2);
mPaint.setStyle(Style.STROKE);
mPaint.setStrokeWidth(circleRingwidth);
//画圆环底图
canvas.drawArc(mRect, 0, 360, false, mPaint);
mPaint.setStrokeWidth(circleRingwidth+0.5f);
mPaint.setColor(circleRingcolor);
//画圆环
//circleValue:是完成进度转换的角度值
canvas.drawArc(mRect, 0, circleValue, false, mPaint);
canvas.rotate(90, mWidth/2, mHeight/2);
//绘制头
drawHeadView(canvas);
if(circleValue>=circleInitial*360){
circleValue=circleInitial*360;
}else{
circleValue=circleValue+2;
invalidate();
}
canvas.restore();
}
3、余下的代码:
/**
* 尽量让X%在中间
* @param canvas
*/
private void drawText(Canvas canvas) {
mPaint.setTextSize(circleTextSize);
String text1="%";
int value=(int) (circleValue/3.6);
String text=value+"";
int len=text.length();
int left=(int) (len*circleTextSize/4);//如果是汉字则只除以2,是英文数字则是4
mPaint.setColor(Color.WHITE);
canvas.drawText(text1, mWidth/2+left, mHeight/2+circleTextSize/3, mPaint);
mPaint.setColor(circleTextColor);
canvas.drawText(text, mWidth/2-left-circleTextSize/4, mHeight/2+circleTextSize/3, mPaint);
}
/**
* 绘制圆环头部
* @param canvas
*/
private void drawHeadView(Canvas canvas){
float x = 0;
float y = 0;
float radius2=mRadius-circleHeadRadius;
if(circleValue<60){
x= (float) ((radius2*Math.sin(circleValue*Math.PI/180))+mWidth/2);
y=(float) (mHeight/2-(radius2*Math.cos(circleValue*Math.PI/180))+circleRingwidth/2);
//System.out.println("X=="+x+".Y=="+y+".R="+circleValue+".sin()="+Math.sin(circleValue)+".cos()="+Math.cos(circleValue));
//System.out.println("Y=="+y);
}else if(circleValue<150){
x= (float) ((radius2*Math.sin(circleValue*Math.PI/180))+mWidth/2-circleRingwidth/2);
y=(float) (mHeight/2-(radius2*Math.cos(circleValue*Math.PI/180)));
}else if(circleValue<210){
x= (float) ((radius2*Math.sin(circleValue*Math.PI/180))+mWidth/2);
y=(float) (mHeight/2-(radius2*Math.cos(circleValue*Math.PI/180))-circleRingwidth/2);
}else if(circleValue<300){
x= (float) ((radius2*Math.sin(circleValue*Math.PI/180))+mWidth/2+circleRingwidth/2);
y=(float) (mHeight/2-(radius2*Math.cos(circleValue*Math.PI/180)));
}else{
x= (float) ((radius2*Math.sin(circleValue*Math.PI/180))+mWidth/2);
y=(float) (mHeight/2-(radius2*Math.cos(circleValue*Math.PI/180))+circleRingwidth/2);
}
mPaint.setStyle(Style.FILL);
mPaint.setColor(circleHeadColor);
canvas.drawCircle(x, y, circleHeadRadius, mPaint);
System.out.println("头部绘制----->");
}
总体来说 :绘制的比较简单,大家可以看看。