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

概述前言前段时间看到了豆瓣FM的音乐播放界面，有一个环形的进度条，非常的好看，于是想了想，为什么不自己做一个呢，于是就开始了自定义的过程

前言

前段时间看到了豆瓣FM的音乐播放界面，有一个环形的进度条，非常的好看，于是想了想，为什么不自己做一个呢，于是就开始了自定义的过程

豆瓣FM的播放界面如下图：

功能分析

虽然功能比较简单，但是仍然需要仔细分析

     1.图标外还有一圈圆圈，可以设置宽度

     2.圆形进度条和进度条底部，可以设置宽度，颜色等

     3.内部有一个圆形图片，可旋转

实现思路分析

1.可以设置宽度的圆圈

这个比较容易，直接在onDraw方法中使用canvas绘制即可，当然，在间距和半径的处理上需要仔细，控件本体其实还是一个长方形，我们需要选取较短的那一边作为直径，同时也要处理内部的padding

2.圆形进度条和进度条底部，可以设置宽度，颜色等

这个可以用canvas的drawArc方法来实现，通过绘制不同长度的弧形来达到显示进度的目的，但是需要注意的是，我们需要计算好弧形的半径以及开始和结束点。

3.内部有一个圆形图片，可旋转

这个需求可以分为三个部分，有图片，圆形，可以旋转

先说有图，很简单，canvas的drawbitmap方法绘制（canvas真是好东西）

再说圆形，这就比较复杂了，但是整体来说依然是使用canvas来对bitmap进行 *** 作，会在代码中细说

最后是可以旋转，我们可以通过canvas的rotate方法来做。

效果展示

说了这么多，那么最后的效果是怎样的呢？毕竟空口无凭，在进入代码展示的环节之前还是看看最后的效果吧。

这是我自己做的一个定时锁屏的项目，地址是这里是地址或者本地下载

这是这个项目运行锁屏的时候的动图（大家都喜欢动图）

代码实现

下面开始展示代码，并加以分析

我们主要的工作是在一个自定义的vIEw中的onDraw方法实现的，所以，我们需要有一个继承VIEw类的子类，我们就叫他MyProgress吧

我们展示的就是这个MyProgress的onDraw方法

1.可以设置宽度的圆圈

很简单，我们只需要调用canvas的drawCircle方法即可,但是需要注意对padding的处理，因为不处理就会无效

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); //绘制圆形

2.圆形进度条和进度条底部，可以设置宽度，颜色等

这里需要注意的就是开始的角度和结束的角度了，为了达到进度条目的，所以我们需要随着业务状态的改变来改变这个值

  //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,progress,paint);//绘制进度条

3.内部有一个圆形图片，可旋转

这一段比较复杂，直接用代码解释

  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,bitmapPaint);//画一个圆    bitmapPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));//关键代码，设置为交集模式，会让后面的内容和已有内容取交集   bitmapCanvas.drawBitmap(image,null,new RectF(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,rect,paint);//绘制处理过的图片

有了上面这些代码，我们自定义view的主体部分就完成了，当然还有一些辅助的部分，比如更新进度和选择角度的函数，设置一些颜色和宽度之类的参数等

完整代码

MyProgress

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,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),Bitmap.Config.ARGB_8888);   Canvas bitmapCanvas = new Canvas(bitmap);    Paint bitmapPaint = new Paint();   bitmapPaint.setAntiAlias(true);    bitmapCanvas.drawCircle(totalRadiu,bitmapPaint);    bitmapPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));   bitmapCanvas.drawBitmap(image,bitmapPaint);    }  Rect rect = new Rect((int)(centerX -totalRadiu),(int)(centerY+ totalRadiu));  canvas.save();  if(isRotate)  canvas.rotate(rotateDegree,centerY);  canvas.drawBitmap(bitmap,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,paint);   //draw progress arc  paint.setcolor(progresscolor);  canvas.drawArc(oval,paint); } }

完整的工程，包括对这个自定义view的应用例子可以参考我在GitHub上的工程地址在这里，也可以本地下载

总结

这个看似简单的自定义view的制作当中还是遇到了不少值得思考的问题，这也是为什么有这篇文章的原因

      1.在处理圆形剪裁图片的时候，要注意剪裁的canvas所用的坐标是相对于处理图片的，而不是整体坐标

      2.在绘制时，应该尽量减少重复的处理，比如圆形图片剪裁，一次就够了，如果次数过多，每次更新进度的时候就会去进行一次，导致整个VIEw比较卡，进度不准确

      3.对于自定义view中几个关键点的坐标，应该用一个比较简单易懂的表达式表示，否则做到后期会搞混淆，而陷入坐标的泥潭之中

      4.某些看起来很厉害的效果只要合理分析，分步实现，并不会很难

好了，以上就是这篇文章的全部内容了，希望本文的内容对各位AndroID开发者们能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对编程小技巧的支持。

总结

以上是内存溢出为你收集整理的Android自定义View实现环形进度条的思路与实例全部内容，希望文章能够帮你解决Android自定义View实现环形进度条的思路与实例所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。