本文共 5164 字，大约阅读时间需要 17 分钟。

我就不从canvas和paint开始说了，onMeasure,onLayout,onDraw这些方法的介绍和源码解析。网上一搜很多。一篇解释不清楚，多看几篇。话不多说了，先看看效果吧。

做成gif显示会有问题。我们先来分析一下需要什么数据、

那么就来看看具体逻辑。

package com.example.administrator.myapplication.circle;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.RectF;import android.support.annotation.Nullable;import android.util.AttributeSet;import android.view.View;import com.example.administrator.myapplication.R;/** * Created by ShuWen on 2017/6/10. */public class CircleProgressBar extends View {
       //进度条背景色    private int mCircleBgColor = Color.BLUE;    //进度条文字展示颜色    private int mTextColor = Color.GRAY;    //进度条宽度    private float mCircleWidth = 50;    //进度条颜色    private int mProgressColor = Color.GREEN;    //进度条展示文字大小    private float mTextSize = 50;    private int progress;    private int max = 100;    private Paint paint = new Paint();    public CircleProgressBar(Context context) {        super(context);        init(context,null);    }    public CircleProgressBar(Context context, @Nullable AttributeSet attrs) {        super(context, attrs);        init(context,attrs);    }    public CircleProgressBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        init(context,attrs);    }    public void init(Context context,AttributeSet attrs){        TypedArray array = context.obtainStyledAttributes(attrs,R.styleable.CircleProgressBar);        mCircleBgColor = array.getColor(R.styleable.CircleProgressBar_mCircleBgColor,Color.BLUE);        mTextColor = array.getColor(R.styleable.CircleProgressBar_mTextColor,Color.GRAY);        mProgressColor = array.getColor(R.styleable.CircleProgressBar_mProgressColor,Color.GREEN);        mCircleWidth = array.getDimension(R.styleable.CircleProgressBar_mCircleWidth,50);        mTextSize = array.getDimension(R.styleable.CircleProgressBar_mTextSize,50);        array.recycle();    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        //画背景        paint.setColor(mCircleBgColor);        paint.setStyle(Paint.Style.STROKE);        paint.setAntiAlias(true);        paint.setStrokeWidth(mCircleWidth);        int center = getWidth() / 2;        int radius = (int) (center - mCircleWidth / 2);        canvas.drawCircle(center,center,radius,paint);        //写文字        int percent = (int) (( progress / (float)max ) * 100);        String percentStr = percent + "%";        paint.setStrokeWidth(0);        paint.setColor(mTextColor);        paint.setTextSize(mTextSize);        Paint.FontMetricsInt fm = paint.getFontMetricsInt();        if (progress != 0){            canvas.drawText(percentStr,center - paint.measureText(percentStr) / 2,                    center + (fm.bottom - fm.top) / 2 -fm.bottom,paint);        }        //画弧形        RectF oval = new RectF(center - radius,center - radius,center + radius,center + radius);        paint.setStrokeWidth(mCircleWidth);        paint.setColor(mProgressColor);        paint.setStrokeCap(Paint.Cap.ROUND);        canvas.drawArc(oval,0,360 * progress/max,false,paint);    }    //设置进度条    public void setProgress(int progress){        if (progress > max){            progress = max;        }        if (progress <= max){            this.progress = progress;            postInvalidate();        }    }}

需要自定义的属性。

详细布局

ManActivity，开启一个线程，休眠100ms，重新设置进度。

package com.example.administrator.myapplication;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;import com.example.administrator.myapplication.circle.CircleProgressBar;import com.example.administrator.myapplication.flow.WaterFallLayout;import java.util.Random;public class MainActivity extends AppCompatActivity {
       WaterFallLayout waterfall;    private static int IMG_COUNT = 5;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        final CircleProgressBar progressBar = (CircleProgressBar) findViewById(R.id.progressBar);        progressBar.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                new Thread(new Runnable() {                    @Override                    public void run() {                        int progress = 0;                        while (progress <= 100){                            progress += 2;                            progressBar.setProgress(progress);                            try {                                Thread.sleep(100);                            } catch (InterruptedException e) {                                e.printStackTrace();                            }                        }                    }                }).start();            }        });    }}

圆形进度条呢，网上其实很多。写的也很详细，我这里只是做一个学习笔记。