一个圆形进度条

来源：互联网发布：去日本必买的东西知乎编辑：程序博客网时间：2024/06/09 16:51

最近自己开发了一个圆形的进度条，乃是继承view 一切都在ondraw里面实现了。希望对各位大大们有所启示。

主要由4部分组成：显示百分比（可设置大小、颜色）、底图圆（可设置颜色）、圆环（可设置宽度和颜色）、头（可设置颜色和大小）。

主要步骤：

1、在onSizeChanged方法中得到此view显示的宽高，在这里确定圆环的区域放入一个RectF。

@Overrideprotected 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、主要绘制工作，注释比较详细

@Overrideprotected 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，是英文数字则是4mPaint.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("头部绘制----->");}

总体来说：绘制的比较简单，大家可以看看。

0 0