Android自定义View实现环形进度条的思路与实例

super.onDraw(canvas); //需要在函数开始的地方调用父类的onDraw
 
  final int paddingLeft = getPaddingLeft();
  final int paddingRight = getPaddingRight();
  final int paddingTop = getPaddingTop();
  final int paddingBottom = getPaddingBottom(); //获取padding
 
  //get the view's width and height and decide the radiu
  int width = getWidth() - paddingLeft - paddingRight;
  int height = getHeight() - paddingTop - paddingBottom;
  radiu = Math.min(width , height) / 2 - boundWidth - progressWidth; //计算半径，选取长宽中短的那个做处理，boundWidth是圆圈的宽度，progressWidth是进度条的宽度
 
  //setup the paint
  paint.setStyle(Paint.Style.STROKE); //设置paint为画轮廓
  paint.setStrokeWidth(boundWidth); //设置宽度
  paint.setColor(Color.BLACK);  //设置颜色
 
  //draw the inner circle
  int centerX = paddingLeft + getWidth()/2;
  int centerY = paddingTop + getHeight() / 2; //计算圆的中心点
  canvas.drawCircle(centerX,centerY, radiu, paint); //绘制圆形

  //set paint for arc
  paint.setStrokeWidth(progressWidth);
  paint.setStrokeCap(Paint.Cap.ROUND);//设置进度宽度,设置末端是一个圆弧
 
  //prepare for draw arc
  RectF oval = new RectF();
  oval.left = centerX -totalRadiu ;
  oval.top =centerY- totalRadiu ;
  oval.right = centerX + totalRadiu;
  oval.bottom = centerY+ totalRadiu; //新建一个椭圆，设置其四个点的坐标
  paint.setColor(progressBackColor);//设置进度条背景的颜色
 
  //draw background arc
  canvas.drawArc(oval, arcStar, arcEnd, false, paint); //绘制底部的一个圆弧，作为背景
 
  //draw progress arc
  paint.setColor(progressColor);//设置进度条的颜色
  canvas.drawArc(oval, arcStar, progress, false, paint);//绘制进度条

  float totalRadiu = radiu +boundWidth +progressWidth/2;//设置外径
 
  //draw the circlr pic
  if (drawable != null&&bitmap == null) {
   image = ((BitmapDrawable) drawable).getBitmap();//获取设置的bitmap资源
 
   bitmap = Bitmap.createBitmap((int)(2*totalRadiu),(int)(2*totalRadiu), Bitmap.Config.ARGB_8888);
   Canvas bitmapCanvas = new Canvas(bitmap);//新建一个bitmap并新建一个canvas用以操作
 
   Paint bitmapPaint = new Paint();
   bitmapPaint.setAntiAlias(true);//新建一个paint并设置反锯齿
 
   bitmapCanvas.drawCircle(totalRadiu, totalRadiu, radiu, bitmapPaint);//画一个圆
 
   bitmapPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));//关键代码，设置为交集模式，会让后面的内容和已有内容取交集
   bitmapCanvas.drawBitmap(image,null,new RectF(0,0,2*totalRadiu,2*totalRadiu) , bitmapPaint);//绘制自己的图片到现有画布上
 
  }
  Rect rect = new Rect((int)(centerX -totalRadiu),(int)(centerY-totalRadiu),(int)(centerX+totalRadiu),(int)(centerY+ totalRadiu));//新建一个rect,设定边界点
  canvas.save();
  if(isRotate)
  canvas.rotate(rotateDegree,centerX,centerY);//设置旋转，为了实现图片转动效果，rotateDegree为旋转角度
  canvas.drawBitmap(bitmap,null ,rect, paint);//绘制处理过的图片

public class MyProgressBar extends View {
 float progress = 360;
 float arcStar = 270;
 float arcEnd = 360;
 double rotateStep = 0.2;
 Bitmap bitmap;
 int totalTime;
 Bitmap image;
 Drawable drawable;
 int boundWidth = 5;
 private int progressWidth = 30;
 private boolean isRotate = false;
 private int progressColor = Color.GREEN;
 private int progressBackColor = Color.GREEN;
 private float rotateDegree = 0;
 
 
 public MyProgressBar(Context context) {
  super(context);
 }
 
 public MyProgressBar(Context context, AttributeSet attrs) {
  super(context, attrs);
 }
 
 public MyProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
 }
 
 private float radiu;
 private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
 
 public void setRadiu(float radiu) {
  this.radiu = radiu;
  invalidate();
 }
//start 函数使用 countDownTimer类来更新progress和旋转角度
 public void start(long time) {
  bitmap = null;
 
  time *= 60000;
  final float step = (float) 360 / (time / 30);
  CountDownTimer mTimer = new CountDownTimer(time, 30) {
   public void onTick(long millisUntilFinished) {
    progress -= step;
    rotateDegree -= rotateStep;
    invalidate();
   }
 
   @Override
   public void onFinish() {
    end(step);
   }
 
  };
  mTimer.start();
 }
 
 private void end(float step) {
  progress -= step;
  invalidate();
  progress = 0;
  rotateDegree = 0;
  invalidate();
 }
 
 public void setBoundWidth(int width) {
  boundWidth = width;
 }
 
 public void setProgressWidth(int width) {
  progressWidth = width;
 }
 
 public void setProgressColor(int color) {
  progressColor = color;
 }
 
 public void setProgressBackColor(int color) {
  progressBackColor = color;
 }
 
 public void setDrawable(Drawable drawable) {
  this.drawable = drawable;
  invalidate();
 }
 public void setIsRote(boolean rotate)
 {
  this.isRotate = rotate;
  invalidate();
 }
 
 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
 
  final int paddingLeft = getPaddingLeft();
  final int paddingRight = getPaddingRight();
  final int paddingTop = getPaddingTop();
  final int paddingBottom = getPaddingBottom();
 
  //get the view's width and height and decide the radiu
  int width = getWidth() - paddingLeft - paddingRight;
  int height = getHeight() - paddingTop - paddingBottom;
  radiu = Math.min(width , height) / 2 - boundWidth - progressWidth;
 
  //setup the paint
  paint.setStyle(Paint.Style.STROKE);
  paint.setStrokeWidth(boundWidth);
  paint.setColor(Color.BLACK);
 
  //draw the inner circle
  int centerX = paddingLeft + getWidth()/2;
  int centerY = paddingTop + getHeight() / 2;
  canvas.drawCircle(centerX,centerY, radiu, paint);
  
 
  float totalRadiu = radiu +boundWidth +progressWidth/2;
 
  //draw the circlr pic
  if (drawable != null&&bitmap == null) {
   image = ((BitmapDrawable) drawable).getBitmap();
 
   bitmap = Bitmap.createBitmap((int)(2*totalRadiu),(int)(2*totalRadiu), Bitmap.Config.ARGB_8888);
   Canvas bitmapCanvas = new Canvas(bitmap);
 
   Paint bitmapPaint = new Paint();
   bitmapPaint.setAntiAlias(true);
 
   bitmapCanvas.drawCircle(totalRadiu, totalRadiu, radiu, bitmapPaint);
 
   bitmapPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
   bitmapCanvas.drawBitmap(image,null,new RectF(0,0,2*totalRadiu,2*totalRadiu) , bitmapPaint);
 
 
  }
  Rect rect = new Rect((int)(centerX -totalRadiu),(int)(centerY-totalRadiu),(int)(centerX+totalRadiu),(int)(centerY+ totalRadiu));
  canvas.save();
  if(isRotate)
  canvas.rotate(rotateDegree,centerX,centerY);
  canvas.drawBitmap(bitmap,null ,rect, paint);
 
  canvas.restore();
  //set paint for arc
  paint.setStrokeWidth(progressWidth);
  paint.setStrokeCap(Paint.Cap.ROUND);
 
  //prepare for draw arc
  RectF oval = new RectF();
  oval.left = centerX -totalRadiu ;
  oval.top =centerY- totalRadiu ;
  oval.right = centerX + totalRadiu;
  oval.bottom = centerY+ totalRadiu;
  paint.setColor(progressBackColor);
 
  //draw background arc
  canvas.drawArc(oval, arcStar, arcEnd, false, paint);
 
  //draw progress arc
  paint.setColor(progressColor);
  canvas.drawArc(oval, arcStar, progress, false, paint);
 }
 
}