Android自定义控件之圆形进度条

时间：2022-08-29 23:57:40

废话不多说，先给大家上效果图。
源码地址https://github.com/GitHubToLiao/CircleProgressViews.git
Android自定义控件之圆形进度条
如果是你想要的效果那么就继续往下看吧

其实这个效果的思路非常的简单，在这里主要用到了paint画笔进行绘画。
当我们遇到自定义控件的时候，只要我们队其效果进行分析。将一个大的效果进行拆分成一份一份小的效果，那么你会发现其实在你认为很难的控件其实是非常简单的。

首先这个圆形进度条是由三部分组成
1.就是中间的那块实心圆。
2.就是最外面的蓝色圆环
3.中间的进度文字
其次就是整个动画效果，这个我使用的是属性动画当然你也可以使用Handler或者开启一个线程。

然后说说具体是怎么做的
1.中间的黄色的实心圆，这里先把相关的代码放出来，然后我在慢慢分析

 //绘制内圆
canvas.drawCircle(getWidth()/2,getHeight()/2,getWidth()/2-mRadius,innerPaint);

这里很简单就是画一个元，不知道大家有没有注意到在我画圆的时候，圆的半径我将外弧的直径减去了，这是为什么呢？因为看动态图我们可以看到当外弧进度没有达到100%的时候，未达到的地方是白色的，但是如果你没有减的话，那个地方就会是黄色的

2.最外面代表进度的蓝色的弧度进度条，这里我也和上面一样我先贴出代码，然后在分析


//绘制外圆弧
        RectF rectF = new RectF(mRadius/2,mRadius/2,getWidth()-mRadius/2,getHeight()-mRadius/2);
if(progress ==0 ||maxProgress ==0)
return;
        canvas.drawArc(rectF,0,(progress/maxProgress)*360,false,outerPaint);

这里先从画圆弧的方法说起
canvas.drawArc(rectF,0,(progress/maxProgress)*360,false,outerPaint);
1. 我们可以看到第二个参数我这里传的是0他代表圆弧的起始角度，这里我从0度开始
2. 第三个参数是(progress/maxProgress)*360它代表的是圆弧的结束角度，因为这个角度是根据进度的进行变化的所以需要算他进度所代表的角度
3. 第4个参数代表圆弧是否封闭，大家可以试一试就会明白
注意
我们在画弧的时候要对画笔进行设置，一个是要设置整个圆弧不填充，第二个你可以看到我的圆弧两边是有弧度的这个也可以通过设置画笔进行设置，第三个就是要设置弧度的宽度

//设置不填充
outerPaint.setStyle(Paint.Style.STROKE);
//设置圆弧两边有弧度
outerPaint.setStrokeCap(Paint.Cap.ROUND);
//设置圆弧的宽度
outerPaint.setStrokeWidth(mRadius);

同时我们在计算圆弧四个坐标的时候也有一个注意的地方
RectF rectF = new RectF(mRadius/2,mRadius/2,getWidth()-mRadius/2,getHeight()-mRadius/2);
可以看到这里我的坐标不是（0,0getWidth，getHeight）至于为什么我也不明白但是你可以试一试像我这样传你看下效果就明白了

3.画中间的文字，画文字主要就是算中间的基准线，其他没什么了，我有写这块的博客大家可以看看.
Android文字的文字的画法

最后一个就是动画效果（这里我用到的是属性动画），这里我直接贴出代码，也很简单

 public void setAnimatorProgress(int mProgress){
        ValueAnimator valueAnimator = ObjectAnimator.ofInt(0,mProgress);
        valueAnimator.setDuration(1500);
        valueAnimator.setInterpolator(new DecelerateInterpolator());
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
int progress = (int) animation.getAnimatedValue();
                setProgress((float) progress);
            }
        });

        valueAnimator.start();
    }

最后源码贡献给大家https://github.com/GitHubToLiao/CircleProgressViews.git
标签：

相关文章