现在很多APP的会员进度条、等级、积分进度条都是按分段显示的，由于最近自己的项目也用到类似的控件，如下图所示，于是就自己撸了一个！

package progressandanimation.wtt.com.myapplication;

import android.animation.ValueAnimator;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.util.AttributeSet;

import android.util.Log;

import android.view.View;

/**

* Date:2018/11/27

* Author:WangTingting

* 说明:自定义信用等级

*/

public class MyProgressView extends View {

private Paint mCircleOutPaint;

private Paint mCircleInPaint;

private Paint mLinePaint;

private Paint mDefaltCircleOutPaint;

private Paint mDefaltCircleInPaint;

private Paint mDefaltLinePaint;

private Paint mTvPaint;

private int circleOutRadius = 16;

private int circleInRadius = 8;

private int margin = 60; //左右margin

private float mProgress;

private ValueAnimator animation;

public MyProgressView(Context context) {

super(context);

initView();

}

public MyProgressView(Context context, AttributeSet attrs) {

super(context, attrs);

initView();

}

public MyProgressView(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

initView();

}

public void initView() {

mCircleOutPaint = new Paint();

mCircleOutPaint.setStyle(Paint.Style.FILL);

mCircleOutPaint.setColor(Color.parseColor("#40A5FF"));

mCircleOutPaint.setAntiAlias(true);

mCircleInPaint = new Paint();

mCircleInPaint.setStyle(Paint.Style.FILL);

mCircleInPaint.setColor(Color.WHITE);

mCircleInPaint.setAntiAlias(true);

mLinePaint = new Paint();

mLinePaint.setColor(Color.parseColor("#40A5FF"));

mLinePaint.setStrokeWidth(8);

mDefaltCircleOutPaint = new Paint();

mDefaltCircleOutPaint.setStyle(Paint.Style.FILL);

mDefaltCircleOutPaint.setColor(Color.parseColor("#858585"));

mDefaltCircleOutPaint.setAntiAlias(true);

mDefaltCircleInPaint = new Paint();

mDefaltCircleInPaint.setStyle(Paint.Style.FILL);

mDefaltCircleInPaint.setColor(Color.WHITE);

mDefaltCircleInPaint.setAntiAlias(true);

mDefaltLinePaint = new Paint();

mDefaltLinePaint.setColor(Color.parseColor("#858585"));

mDefaltLinePaint.setStrokeWidth(8);

mTvPaint = new Paint();

mTvPaint.setColor(Color.parseColor("#858585"));

mTvPaint.setTextSize(sp2px(getContext(), 12));

}

public void setProgress(float progress) {

if (animation == null) {

animation = ValueAnimator.ofFloat(0f, Float.valueOf(progress));

}

if (progress > 0 && progress <= 400) {

mLinePaint.setColor(getResources().getColor(R.color.ring1));

mCircleOutPaint.setColor(getResources().getColor(R.color.ring1));

} else if (progress > 400 && progress <= 700) {

mLinePaint.setColor(getResources().getColor(R.color.ring2));

mCircleOutPaint.setColor(getResources().getColor(R.color.ring2));

} else if (progress > 700 && progress <= 900) {

mLinePaint.setColor(getResources().getColor(R.color.ring3));

mCircleOutPaint.setColor(getResources().getColor(R.color.ring3));

} else if (progress > 900) {

mLinePaint.setColor(getResources().getColor(R.color.ring4));

mCircleOutPaint.setColor(getResources().getColor(R.color.ring4));

}

animation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

mProgress = (float) animation.getAnimatedValue();

invalidate();

}

});

animation.setDuration(3000);

animation.start();

}

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

getSuggestedMinimumWidth();

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

int height = getHeight();

int width = getWidth();

int realWidth = (width - 2 * margin - 8 * circleOutRadius) / 3;

canvas.drawLine(margin + circleOutRadius * 2, height / 2, width - margin - circleOutRadius * 2, height / 2, mDefaltLinePaint);

for (int i = 0; i < 4; i++) {

canvas.drawCircle(margin + circleOutRadius * (i * 2 + 1) + realWidth * i, height / 2, circleOutRadius, mDefaltCircleOutPaint);

canvas.drawCircle(margin + circleOutRadius * (i * 2 + 1) + realWidth * i, height / 2, circleInRadius, mDefaltCircleInPaint);

}

canvas.drawText("0", margin + circleOutRadius - getTextWidth("0"), height / 2 - 30, mTvPaint);

canvas.drawText("400", margin + circleOutRadius * 3 + realWidth - getTextWidth("400"), height / 2 - 30, mTvPaint);

canvas.drawText("700", margin + circleOutRadius * 5 + realWidth * 2 - getTextWidth("700"), height / 2 - 30, mTvPaint);

canvas.drawText("900+", margin + circleOutRadius * 7 + realWidth * 3 - getTextWidth("900+"), height / 2 - 30, mTvPaint);

canvas.drawText("低信用", margin + circleOutRadius - getTextWidth("低信用"), height / 2 + 50, mTvPaint);

canvas.drawText("中信用", margin + circleOutRadius * 3 + realWidth - getTextWidth("中信用"), height / 2 + 50, mTvPaint);

canvas.drawText("高信用", margin + circleOutRadius * 5 + realWidth * 2 - getTextWidth("高信用"), height / 2 + 50, mTvPaint);

canvas.drawText("极高信用", margin + circleOutRadius * 7 + realWidth * 3 - getTextWidth("极高信用"), height / 2 + 50, mTvPaint);

float ratio;

float result = 0;

if (mProgress > 0 && mProgress <= 400) {

ratio = mProgress / 400;

result = margin + circleOutRadius * 2 + (ratio * realWidth);

} else if (mProgress > 400 && mProgress <= 700) {

ratio = (mProgress - 400) / 300;

result = margin + circleOutRadius * 4 + (ratio * realWidth) + realWidth;

} else if (mProgress > 700 && mProgress <= 900) {

ratio = (mProgress - 700) / 200;

result = margin + circleOutRadius * 6 + realWidth * 2 + (ratio * realWidth);

} else if (mProgress > 900) {

result = margin + circleOutRadius * 8 + 3 * realWidth;

}

canvas.drawLine(margin + circleOutRadius, height / 2, result, height / 2, mLinePaint);

if (mProgress <= 0) {

return;

}

canvas.drawCircle(margin + circleOutRadius, height / 2, circleOutRadius, mCircleOutPaint);

canvas.drawCircle(margin + circleOutRadius, height / 2, circleInRadius, mCircleInPaint);

if (mProgress <= 400) {

return;

}

canvas.drawCircle(margin + circleOutRadius * 3 + realWidth, height / 2, circleOutRadius, mCircleOutPaint);

canvas.drawCircle(margin + circleOutRadius * 3 + realWidth, height / 2, circleInRadius, mCircleInPaint);

if (mProgress <= 700) {

return;

}

canvas.drawCircle(margin + circleOutRadius * 5 + realWidth * 2, height / 2, circleOutRadius, mCircleOutPaint);

canvas.drawCircle(margin + circleOutRadius * 5 + realWidth * 2, height / 2, circleInRadius, mCircleInPaint);

if (mProgress <= 900) {

return;

}

canvas.drawCircle(margin + circleOutRadius * 7 + realWidth * 3, height / 2, circleOutRadius, mCircleOutPaint);

canvas.drawCircle(margin + circleOutRadius * 7 + realWidth * 3, height / 2, circleInRadius, mCircleInPaint);

}

public float getTextWidth(String text) {

return mTvPaint.measureText(text) / 2;

}

public static int sp2px(Context context, float spValue) {

final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;

return (int) (spValue * fontScale + 0.5f);

}

}

然后在Activity中这样写就实现了