可設(shè)置 線性漸變-背景色-進(jìn)度條顏色-圓弧寬度
效果圖

普通效果.png

漸變效果

改變弧度效果

步驟一：新建自定義控件CirclePercentView繼承View（代碼可直接復(fù)制使用）

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Shader;
import android.support.annotation.Keep;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

/**
 * 圓形進(jìn)度條（可設(shè)置 線性漸變-背景色-進(jìn)度條顏色-圓弧寬度）
 * Created by ZWQ 
 */
public class CirclePercentView extends View {

    public static final int WIDTH_RADIUS_RATIO = 8;     // 弧線半徑 : 弧線線寬 (比例)
    public static final int MAX = 100;
    private Paint mPaint;
    private float progressPercent;
    private int radius;//圓弧寬度
    private RectF rectF;
    private int bgColor, progressColor;
    private int startColor, endColor;
    private LinearGradient gradient;
    private boolean isGradient;

    public CirclePercentView(Context context) {
        super(context);
        init();
    }

    public CirclePercentView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CirclePercentView);
        bgColor = typedArray.getColor(R.styleable.CirclePercentView_circleBgColor, getResources().getColor(R.color.gray_cfcfcf));
        progressColor = typedArray.getColor(R.styleable.CirclePercentView_circleProgressColor, getResources().getColor(R.color.orange_ffc032));
        radius = typedArray.getInt(R.styleable.CirclePercentView_circleRadius, WIDTH_RADIUS_RATIO);
        isGradient = typedArray.getBoolean(R.styleable.CirclePercentView_circleIsGradient, false);
        startColor = typedArray.getColor(R.styleable.CirclePercentView_circleStartColor, getResources().getColor(R.color.black_3A3D4E));
        endColor = typedArray.getColor(R.styleable.CirclePercentView_circleEndColor, getResources().getColor(R.color.black_475B80));
        typedArray.recycle();
        init();
    }

    public CirclePercentView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(getMeasuredWidth(), getMeasuredWidth());//自定義的View能夠使用wrap_content或者是match_parent的屬性
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        gradient = new LinearGradient(getWidth(), 0, getWidth(), getHeight(), startColor, endColor, Shader.TileMode.MIRROR);
    }

    @SuppressWarnings("Duplicates")
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 1贮尉、繪制背景灰色圓環(huán)
        int centerX = getWidth() / 2;
        int strokeWidth = centerX / radius;
        mPaint.setShader(null);//必須設(shè)置為null芹彬，否則背景也會(huì)加上漸變色
        mPaint.setStrokeWidth(strokeWidth); //設(shè)置畫(huà)筆的大小
        mPaint.setColor(bgColor);
        canvas.drawCircle(centerX, centerX, centerX - strokeWidth / 2, mPaint);
        // 2座菠、繪制比例弧
        if (rectF == null) {//外切正方形
            rectF = new RectF(strokeWidth / 2, strokeWidth / 2, 2 * centerX - strokeWidth / 2, 2 * centerX - strokeWidth / 2);
        }
        //3匈子、是否繪制漸變色
        if (isGradient) {
            mPaint.setShader(gradient);//設(shè)置線性漸變
        } else {
            mPaint.setColor(progressColor);
        }
        canvas.drawArc(rectF, -90, 3.6f * progressPercent, false, mPaint);   //畫(huà)比例圓弧
    }

    private void init() {
        mPaint = new Paint();
        //畫(huà)筆樣式
        mPaint.setStyle(Paint.Style.STROKE);
        //設(shè)置筆刷的樣式:圓形
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        //設(shè)置抗鋸齒
        mPaint.setAntiAlias(true);
    }

    @Keep
    public void setPercentage(float percentage) {
        this.progressPercent = percentage;
        invalidate();
    }

    public void setRadius(int radius) {
        this.radius = radius;
    }

    public void setBgColor(int bgColor) {
        this.bgColor = bgColor;
    }

    public void setProgressColor(int progressColor) {
        this.progressColor = progressColor;
    }

    public void setStartColor(int startColor) {
        this.startColor = startColor;
    }

    public void setEndColor(int endColor) {
        this.endColor = endColor;
    }

    public void setGradient(boolean gradient) {
        isGradient = gradient;
    }
}

步驟二：自定義屬性

在styles.xml添加自定義屬性

    <declare-styleable name="CirclePercentView">
        <!--圓弧背景色-->
        <attr name="circleBgColor" format="reference" />
        <!--圓弧進(jìn)度條顏色-->
        <attr name="circleProgressColor" format="reference" />
        <!--圓弧寬度-->
        <attr name="circleRadius" format="integer" />
        <!--漸變開(kāi)始顏色-->
        <attr name="circleStartColor" format="reference" />
        <!--漸變結(jié)束顏色-->
        <attr name="circleEndColor" format="reference" />
        <!--是否漸變-->
        <attr name="circleIsGradient" format="boolean" />
    </declare-styleable>

步驟三：使用

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.yate.jsq.widget.progress.CirclePercentView
        android:id="@id/circle_percent_progress"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center_horizontal"
        app:circleBgColor="@color/gray_color2"
        app:circleIsGradient="true"
        app:circleProgressColor="@color/black_3A3D4E" />
    
</FrameLayout>

1）動(dòng)畫(huà)效果

    public static final int ANIMATOR_DURATION = 1000;
    private CirclePercentView progressView;

   /**
     * 設(shè)置百分比
     * @param max     最大值
     * @param current 占比
     */
    private void setData(int max, float current) {
        float percentage = (100f * current) / max;
        ObjectAnimator animator = ObjectAnimator.ofFloat(progressView, "percentage", 0, percentage);
        animator.setDuration(ANIMATOR_DURATION);
        animator.start();
    }

調(diào)用setData（）方法尤慰，傳入最大值和占比值即可

2）無(wú)動(dòng)畫(huà)效果

        private CirclePercentView progressView;

        progressView.setPercentage(50);//傳入百分比的值