可设置 线性渐变-背景色-进度条颜色-圆弧宽度

效果图

普通效果.png

渐变效果

改变弧度效果

步骤一：新建自定义控件CirclePercentView继承View(代码可直接复制使用)

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;

/**

* 圆形进度条(可设置 线性渐变-背景色-进度条颜色-圆弧宽度)

* 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、绘制背景灰色圆环

int centerX = getWidth() / 2;

int strokeWidth = centerX / radius;

mPaint.setShader(null);//必须设置为null，否则背景也会加上渐变色

mPaint.setStrokeWidth(strokeWidth); //设置画笔的大小

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);//设置线性渐变

} else {

mPaint.setColor(progressColor);

}

canvas.drawArc(rectF, -90, 3.6f * progressPercent, false, mPaint); //画比例圆弧

}

private void init() {

mPaint = new Paint();

//画笔样式

mPaint.setStyle(Paint.Style.STROKE);

//设置笔刷的样式:圆形

mPaint.setStrokeCap(Paint.Cap.ROUND);

//设置抗锯齿

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添加自定义属性

步骤三：使用

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="wrap_content">

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" />

1)动画效果

public static final int ANIMATOR_DURATION = 1000;

private CirclePercentView progressView;

/**

* 设置百分比

* @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();

}

调用setData()方法，传入最大值和占比值即可

2)无动画效果

private CirclePercentView progressView;

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