圆环形进度条

自定义控件CircleProgressBar:

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

/**
 * Author: xiongwenwei@aliyun.com
 * Note:
 * CreatedTime: 2016/11/16 10:36
 */
public class CircleProgressBar extends View {
    // 画圆环的画笔
    private Paint ringPaint;
    // 圆环颜色
    private int ringColor;
    // 半径
    private float radius;
    // 圆环宽度
    private float strokeWidth;
    // 总进度
    private int totalProgress = 100;
    // 当前进度
    private int currentProgress;
    // 透明度
    private int alpha = 25;

    public CircleProgressBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        initAttrs(context, attrs);
        initVariable();
    }

    private void initAttrs(Context context, AttributeSet attrs) {
        TypedArray typeArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CircleProgressbar, 0, 0);
        radius = typeArray.getDimension(R.styleable.CircleProgressbar_radius, 80);
        strokeWidth = typeArray.getDimension(R.styleable.CircleProgressbar_strokeWidth, 10);
        ringColor = typeArray.getColor(R.styleable.CircleProgressbar_ringColor, 0xFF0000);
    }

    private void initVariable() {
        ringPaint = new Paint();
        ringPaint.setAntiAlias(true);//抗锯齿
        ringPaint.setDither(true);//防抖动
        ringPaint.setColor(ringColor);
        ringPaint.setStyle(Paint.Style.STROKE);
        ringPaint.setStrokeCap(Paint.Cap.ROUND);
        ringPaint.setStrokeWidth(strokeWidth);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (currentProgress >= 0) {
            ringPaint.setAlpha((int) (alpha + ((float) currentProgress / totalProgress) * 230));
            RectF oval = new RectF(getWidth() / 2 - radius, getHeight() / 2 - radius, getWidth() / 2 + radius, getHeight() / 2 + radius);
            canvas.drawArc(oval, 0, 0, false, ringPaint);
            canvas.drawArc(oval, -90, ((float) currentProgress / totalProgress) * 360, false, ringPaint);
        }
    }

    public void setProgress(int progress) {
        currentProgress = progress;
        postInvalidate();
    }
}

布局文件:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:cp="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.pujiang.roundprogressbar.CircleProgressBar
        android:id="@+id/bar0Bg"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:layout_centerInParent="true"
        cp:radius="120dp"
        cp:ringColor="#ECEDF1"
        cp:strokeWidth="8dp"/>

    <com.pujiang.roundprogressbar.CircleProgressBar
        android:id="@+id/bar0"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:layout_centerInParent="true"
        cp:radius="120dp"
        cp:ringColor="#74C0AD"
        cp:strokeWidth="8dp"/>

    <com.pujiang.roundprogressbar.CircleProgressBar
        android:id="@+id/bar1Bg"
        android:layout_width="170dp"
        android:layout_height="170dp"
        android:layout_centerInParent="true"
        cp:radius="80dp"
        cp:ringColor="#ECEDF1"
        cp:strokeWidth="8dp"/>

    <com.pujiang.roundprogressbar.CircleProgressBar
        android:id="@+id/bar1"
        android:layout_width="170dp"
        android:layout_height="170dp"
        android:layout_centerInParent="true"
        cp:radius="80dp"
        cp:ringColor="#ECC061"
        cp:strokeWidth="8dp"/>
</RelativeLayout>

新建attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CircleProgressbar">
        <attr name="radius" format="dimension"/>
        <attr name="strokeWidth" format="dimension"/>
        <attr name="ringColor" format="color"/>
    </declare-styleable>
</resources>

代码使用:

public class MainActivity extends AppCompatActivity {

    private CircleProgressBar bar0Bg, bar0, bar1, bar1Bg;
    private int currentProgress = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
        startView();
    }

    private void initView() {
        bar0Bg = (CircleProgressBar) findViewById(R.id.bar0Bg);
        bar0 = (CircleProgressBar) findViewById(R.id.bar0);
        bar1 = (CircleProgressBar) findViewById(R.id.bar1);
        bar1Bg = (CircleProgressBar) findViewById(R.id.bar1Bg);
    }

    private void startView() {
        new Thread(new Runnable() {
            @Override
            public void run() {
                while (currentProgress < 100) {
                    currentProgress++;
                    bar0.setProgress(currentProgress > 75 ? 75 : currentProgress);
                    bar1.setProgress(currentProgress > 25 ? 25 : currentProgress);
                    bar0Bg.setProgress((currentProgress > 50 ? 50 : currentProgress) * 2);
                    bar1Bg.setProgress((currentProgress > 50 ? 50 : currentProgress) * 2);
                    try {
                        Thread.sleep(30);
                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                }
            }
        }).start();
    }
}

只是简单的修改，需要特定的需求可以改代码。原文的是带文本的，我用不到就删除了，原文链接： 点击打开

效果图:

实际效果是有动画的，圆环慢慢旋转到实际进度，自己也可以用循环模拟出动画效果。