一个圆形进度条

最新推荐文章于 2025-02-18 09:33:56 发布

原创最新推荐文章于 2025-02-18 09:33:56 发布 · 681 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #进度条 #圆形进度条

android 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种自定义圆形进度条的实现方法，包括显示百分比、底图圆、圆环和头四个部分的绘制过程。通过在onSizeChanged方法中获取视图的宽高并确定圆环区域，主要在onDraw方法中完成绘制工作，包括初始化画笔、画地图圆、画x%、画圆环、绘制头等步骤。

最近自己开发了一个圆形的进度条，乃是继承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("头部绘制----->");
	}

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