当前位置：首页 > 未命名 > 正文内容

自定义View实践——环形进度条的设计与实现分析

u3blog9年前 (2016-03-22)未命名677

需求分析与实现规划

引子

前段时间看到了豆瓣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的处理，因为不处理就会无效 
  1. super.onDraw(canvas);  //需要在函数开始的地方调用父类的onDraw
  2.  
  3.         final int paddingLeft = getPaddingLeft();
  4.         final int paddingRight = getPaddingRight();
  5.         final int paddingTop = getPaddingTop();
  6.         final int paddingBottom = getPaddingBottom();  //获取padding
  7.  
  8.         //get the view's width and height and decide the radiu
  9.         int width = getWidth() - paddingLeft - paddingRight;
  10.         int height = getHeight() - paddingTop - paddingBottom;
  11.         radiu = Math.min(width , height) / 2 - boundWidth - progressWidth;  //计算半径，选取长宽中短的那个做处理，boundWidth是圆圈的宽度，progressWidth是进度条的宽度
  12.  
  13.         //setup the paint
  14.         paint.setStyle(Paint.Style.STROKE); //设置paint为画轮廓
  15.         paint.setStrokeWidth(boundWidth);   //设置宽度
  16.         paint.setColor(Color.BLACK);        //设置颜色
  17.  
  18.         //draw the inner circle
  19.         int centerX = paddingLeft + getWidth()/2;
  20.         int centerY = paddingTop + getHeight() / 2;  //计算圆的中心点
  21.         canvas.drawCircle(centerX,centerY, radiu, paint);  //绘制圆形
  22.

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

这里需要注意的就是开始的角度和结束的角度了，为了达到进度条目的，所以我们需要随着业务状态的改变来改变这个值 
  1.   
  2.         //set paint for arc
  3.         paint.setStrokeWidth(progressWidth);
  4.         paint.setStrokeCap(Paint.Cap.ROUND);//设置进度宽度,设置末端是一个圆弧
  5.  
  6.         //prepare for draw arc
  7.         RectF oval = new RectF();
  8.         oval.left = centerX -totalRadiu ;
  9.         oval.top =centerY- totalRadiu ;
  10.         oval.right =  centerX + totalRadiu;
  11.         oval.bottom = centerY+ totalRadiu; //新建一个椭圆，设置其四个点的坐标
  12.         paint.setColor(progressBackColor);//设置进度条背景的颜色
  13.  
  14.         //draw background arc
  15.         canvas.drawArc(oval, arcStar, arcEnd, false, paint); //绘制底部的一个圆弧，作为背景
  16.  
  17.         //draw progress arc
  18.         paint.setColor(progressColor);//设置进度条的颜色
  19.         canvas.drawArc(oval, arcStar, progress, false, paint);//绘制进度条

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

这一段比较复杂，直接用代码解释 
  1.  
  2.  
  3.        float  totalRadiu = radiu +boundWidth  +progressWidth/2;//设置外径
  4.  
  5.         //draw the circlr pic
  6.         if (drawable != null&&bitmap == null) {
  7.             image = ((BitmapDrawable) drawable).getBitmap();//获取设置的bitmap资源
  8.  
  9.             bitmap = Bitmap.createBitmap((int)(2*totalRadiu),(int)(2*totalRadiu), Bitmap.Config.ARGB_8888);
  10.             Canvas bitmapCanvas = new Canvas(bitmap);//新建一个bitmap并新建一个canvas用以操作
  11.  
  12.             Paint bitmapPaint = new Paint();
  13.             bitmapPaint.setAntiAlias(true);//新建一个paint并设置反锯齿
  14.  
  15.             bitmapCanvas.drawCircle(totalRadiu, totalRadiu, radiu, bitmapPaint);//画一个圆
  16.  
  17.             bitmapPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));//关键代码，设置为交集模式，会让后面的内容和已有内容取交集
  18.             bitmapCanvas.drawBitmap(image,null,new RectF(0,0,2*totalRadiu,2*totalRadiu) , bitmapPaint);//绘制自己的图片到现有画布上
  19.  
  20.         }
  21.         Rect rect = new Rect((int)(centerX -totalRadiu),(int)(centerY-totalRadiu),(int)(centerX+totalRadiu),(int)(centerY+ totalRadiu));//新建一个rect,设定边界点
  22.         canvas.save();
  23.         if(isRotate)
  24.         canvas.rotate(rotateDegree,centerX,centerY);//设置旋转，为了实现图片转动效果，rotateDegree为旋转角度
  25.         canvas.drawBitmap(bitmap,null ,rect, paint);//绘制处理过的图片
有了上面这些代码，我们自定义View的主体部分就完成了，当然还有一些辅助的部分，比如更新进度和选择角度的函数，设置一些颜色和宽度之类的参数等

完整代码

MyProgress 
  1. public class MyProgressBar extends View {
  2.     float progress = 360;
  3.     float arcStar = 270;
  4.     float arcEnd = 360;
  5.     double rotateStep = 0.2;
  6.     Bitmap bitmap;
  7.     int totalTime;
  8.     Bitmap image;
  9.     Drawable drawable;
  10.     int boundWidth = 5;
  11.     private int progressWidth = 30;
  12.     private boolean isRotate = false;
  13.     private int progressColor = Color.GREEN;
  14.     private int progressBackColor = Color.GREEN;
  15.     private float rotateDegree = 0;
  16.  
  17.  
  18.     public MyProgressBar(Context context) {
  19.         super(context);
  20.     }
  21.  
  22.     public MyProgressBar(Context context, AttributeSet attrs) {
  23.         super(context, attrs);
  24.     }
  25.  
  26.     public MyProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
  27.         super(context, attrs, defStyleAttr);
  28.     }
  29.  
  30.     private float radiu;
  31.     private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
  32.  
  33.     public void setRadiu(float radiu) {
  34.         this.radiu = radiu;
  35.         invalidate();
  36.     }
  37. //start 函数使用 countDownTimer类来更新progress和旋转角度
  38.     public void start(long time) {
  39.         bitmap = null;
  40.  
  41.         time *= 60000;
  42.         final float step = (float) 360 / (time / 30);
  43.         CountDownTimer mTimer = new CountDownTimer(time, 30) {
  44.             public void onTick(long millisUntilFinished) {
  45.                 progress -= step;
  46.                 rotateDegree -= rotateStep;
  47.                 invalidate();
  48.             }
  49.  
  50.             @Override
  51.             public void onFinish() {
  52.                 end(step);
  53.             }
  54.  
  55.         };
  56.         mTimer.start();
  57.     }
  58.  
  59.     private void end(float step) {
  60.         progress -= step;
  61.         invalidate();
  62.         progress = 0;
  63.         rotateDegree = 0;
  64.         invalidate();
  65.     }
  66.  
  67.     public void setBoundWidth(int width) {
  68.         boundWidth = width;
  69.     }
  70.  
  71.     public void setProgressWidth(int width) {
  72.         progressWidth = width;
  73.     }
  74.  
  75.     public void setProgressColor(int color) {
  76.         progressColor = color;
  77.     }
  78.  
  79.     public void setProgressBackColor(int color) {
  80.         progressBackColor = color;
  81.     }
  82.  
  83.     public void setDrawable(Drawable drawable) {
  84.         this.drawable = drawable;
  85.         invalidate();
  86.     }
  87.     public void setIsRote(boolean rotate)
  88.     {
  89.         this.isRotate = rotate;
  90.         invalidate();
  91.     }
  92.  
  93.     @Override
  94.     protected void onDraw(Canvas canvas) {
  95.         super.onDraw(canvas);
  96.  
  97.         final int paddingLeft = getPaddingLeft();
  98.         final int paddingRight = getPaddingRight();
  99.         final int paddingTop = getPaddingTop();
  100.         final int paddingBottom = getPaddingBottom();
  101.  
  102.         //get the view's width and height and decide the radiu
  103.         int width = getWidth() - paddingLeft - paddingRight;
  104.         int height = getHeight() - paddingTop - paddingBottom;
  105.         radiu = Math.min(width , height) / 2 - boundWidth - progressWidth;
  106.  
  107.         //setup the paint
  108.         paint.setStyle(Paint.Style.STROKE);
  109.         paint.setStrokeWidth(boundWidth);
  110.         paint.setColor(Color.BLACK);
  111.  
  112.         //draw the inner circle
  113.         int centerX = paddingLeft + getWidth()/2;
  114.         int centerY = paddingTop + getHeight() / 2;
  115.         canvas.drawCircle(centerX,centerY, radiu, paint);
  116.         
  117.  
  118.         float  totalRadiu = radiu +boundWidth  +progressWidth/2;
  119.  
  120.         //draw the circlr pic
  121.         if (drawable != null&&bitmap == null) {
  122.             image = ((BitmapDrawable) drawable).getBitmap();
  123.  
  124.             bitmap = Bitmap.createBitmap((int)(2*totalRadiu),(int)(2*totalRadiu), Bitmap.Config.ARGB_8888);
  125.             Canvas bitmapCanvas = new Canvas(bitmap);
  126.  
  127.             Paint bitmapPaint = new Paint();
  128.             bitmapPaint.setAntiAlias(true);
  129.  
  130.             bitmapCanvas.drawCircle(totalRadiu, totalRadiu, radiu, bitmapPaint);
  131.  
  132.             bitmapPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
  133.             bitmapCanvas.drawBitmap(image,null,new RectF(0,0,2*totalRadiu,2*totalRadiu) , bitmapPaint);
  134.  
  135.  
  136.         }
  137.         Rect rect = new Rect((int)(centerX -totalRadiu),(int)(centerY-totalRadiu),(int)(centerX+totalRadiu),(int)(centerY+ totalRadiu));
  138.         canvas.save();
  139.         if(isRotate)
  140.         canvas.rotate(rotateDegree,centerX,centerY);
  141.         canvas.drawBitmap(bitmap,null ,rect, paint);
  142.  
  143.         canvas.restore();
  144.         //set paint for arc
  145.         paint.setStrokeWidth(progressWidth);
  146.         paint.setStrokeCap(Paint.Cap.ROUND);
  147.  
  148.         //prepare for draw arc
  149.         RectF oval = new RectF();
  150.         oval.left = centerX -totalRadiu ;
  151.         oval.top =centerY- totalRadiu ;
  152.         oval.right =  centerX + totalRadiu;
  153.         oval.bottom = centerY+ totalRadiu;
  154.         paint.setColor(progressBackColor);
  155.  
  156.         //draw background arc
  157.         canvas.drawArc(oval, arcStar, arcEnd, false, paint);
  158.  
  159.         //draw progress arc
  160.         paint.setColor(progressColor);
  161.         canvas.drawArc(oval, arcStar, progress, false, paint);
  162.     }
  163.  
  164. }
完整的工程，包括对这个自定义VIEW的应用例子可以参考我在GitHub上的工程地址在这里

几点总结

这个看似简单的自定义View的制作当中还是遇到了不少值得思考的问题，这也是为什么有这篇文章的原因 1.在处理圆形剪裁图片的时候，要注意剪裁的canvas所用的坐标是相对于处理图片的，而不是整体坐标 2.在绘制时，应该尽量减少重复的处理，比如圆形图片剪裁，一次就够了，如果次数过多，每次更新进度的时候就会去进行一次，导致整个View比较卡，进度不准确 3.对于自定义View中几个关键点的坐标，应该用一个比较简单易懂的表达式表示，否则做到后期会搞混淆，而陷入坐标的泥潭之中 4.某些看起来很厉害的效果只要合理分析，分步实现，并不会很难
阅读剩余的79%

扫描二维码推送至手机访问。

版权声明：本文由u3blog发布，如需转载请注明出处。

本文链接：https://u3blog.xyz/?id=293

分享给朋友：
返回列表

上一篇：View's sliding conflict and solution in Android

下一篇：Android中多进程以及IPC的基础概念

发表评论

访客

◎欢迎参与讨论，请在这里发表您的看法和观点。

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP. Theme by TOYEAN.