Android自定义View——从零开始实现圆形进度条

版权声明：本文为博主原创文章，未经博主允许不得转载。
系列教程：Android开发之从零开始系列
源码：github.com/AnliaLee/Progressbar，欢迎star

大家要是看到有错误的地方或者有啥好的建议，欢迎留言评论

---

前言：以前老是用别人造的轮子，知其然不知其所以然，有时看懂了别人写的过多几个月又忘了，遂来开个坑把一步步实现和思路写下来，弄成一个系列。由于上班时间不多，争取一周撸个一到两篇出来

本篇只着重于思路和实现步骤，里面用到的一些知识原理不会非常细地拿来讲，如果有不清楚的api或方法可以在网上搜下相应的资料，肯定有大神讲得非常清楚的，我这就不献丑了。本着认真负责的精神我会把相关知识的博文链接也贴出来（其实就是懒不想写那么多哈哈），大家可以自行传送

效果展示

目录

• 绘制一个圆弧
• 为圆弧添加动画效果
• 测量及自适应圆形进度条View的宽高
• 自定义attr属性
• 实现可跟随进度条进度变化的文字效果
• 实现进度条颜色渐变动画

---

绘制一个圆弧

相关博文链接

【Android - 自定义View】之自定义View浅析
Android 自定义View (一)
自定义控件三部曲之绘图篇(七)——Paint之函数大汇总

本着先写后优化的思想，怎么简单怎么来，像参数定义，自定义View大小适配什么的都先不去管，后面再慢慢填坑，我们就先简单画一个圆弧（为了更好地观察圆弧的绘制区域，我们会将绘制圆弧的矩形区域画出来）。代码如下

public class CircleBarView extends View {
   
   

    private Paint rPaint;//绘制矩形的画笔
    private Paint progressPaint;//绘制圆弧的画笔

    public CircleBarView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context,attrs);
    }

    private void init(Context context,AttributeSet attrs){
        rPaint = new Paint();
        rPaint.setStyle(Paint.Style.STROKE);//只描边，不填充
        rPaint.setColor(Color.RED);

        progressPaint = new Paint();
        progressPaint.setStyle(Paint.Style.STROKE);//只描边，不填充
        progressPaint.setColor(Color.BLUE);
        progressPaint.setAntiAlias(true);//设置抗锯齿
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        float x = 50;
        float y = 50;
        RectF rectF = new RectF(x,y,x+300,y+300);//建一个大小为300 * 300的正方形区域

        canvas.drawArc(rectF,0,270,false,progressPaint);//这里角度0对应的是三点钟方向，顺时针方向递增
        canvas.drawRect(rectF,rPaint);
    }
}

界面布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <com.anlia.progressbar.CircleBarView
            android:id="@+id/circle_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
</RelativeLayout>

在Activity中进行注册

circleBarView = (CircleBarView)findViewById(R.id.circle_view);

效果如图

---

为圆弧添加动画效果

我们需要给圆弧的绘制加上一个动画效果，这里主要用到Animation方面的知识，我们改下之前的CircleBarView代码

private float sweepAngle;//圆弧经过的角度

private void init(Context context,AttributeSet attrs){
    //省略部分代码...
    anim = new CircleAnim();
}

@Override
protected void onDraw(Canvas canvas) {
    //省略部分代码...
    canvas.drawArc(rectF,0,sweepAngle,false,progressPaint);
}