效果图:

要实现这样一个进度条，我们要创建一个SportStepCountView,里面要有计算:@SuppressLint("DrawAllocation")

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

final int restore = canvas.save();

final int cx = getMeasuredWidth() / 2;

final int cy = getMeasuredHeight() / 2;

final int radius = getMeasuredWidth() / 2 - strokeWidth / 2;

float drawPercent = percent;

if (drawPercent > 0.97 && drawPercent

drawPercent = 0.97f;

}

// 画渐变圆

canvas.save();

canvas.rotate(-90, cx, cy);

int[] colors;

float[] positions;

if (drawPercent  0) {

calculatePercentEndColor(drawPercent);

customColors[1] = percentEndColor;

colors = customColors;

customPositions[1] = drawPercent;

customPositions[2] = drawPercent;

positions = customPositions;

} else if (drawPercent == 1) {

colors = fullColors;

positions = extremePositions;

} else {

colors = emptyColors;

positions = extremePositions;

}

//这个是灰色的大圆环

canvas.drawCircle(cx, cy, radius, mBackgroundCirclePaint);

final SweepGradient sweepGradient = new SweepGradient(getMeasuredWidth() / 2, getMeasuredHeight() / 2, colors, positions);

paint.setShader(sweepGradient);

//paint.setShadowLayer(13.5f,0,0.5f,getResources().getColor(R.color.circle_shadow_color));

canvas.drawCircle(cx, cy, radius, paint);

canvas.restore();

//中间的步数写在这里

mValueOffset = cy + getBaselineOffsetFromY(mValuePaint)- DensityUtil.dp2px(mContext,20);

//这个是写步数

canvas.drawText(String.valueOf(mFootStep), cx, mValueOffset, mValuePaint);

mHintOffset = cy - radius * mTextOffsetPercentInRadius + getBaselineOffsetFromY(mUnitPaint);

mUnitOffset = cy + radius * mTextOffsetPercentInRadius + getBaselineOffsetFromY(mUnitPaint) -DensityUtil.dp2px(mContext,30);

if (mHint != null) {

canvas.drawText(mHint.toString(), cx, mHintOffset-10, mUnitPaint);

}

if (mUnit != null) {

canvas.drawText(mUnit.toString(), cx, mUnitOffset+10, mUnitPaint);

}

if (drawPercent > 0) {

// 绘制结束的半圆

if (drawPercent

canvas.save();

endPaint.setColor(percentEndColor);

canvas.rotate((int) Math.floor(360.0f * drawPercent) - 1, cx, cy);

canvas.drawArc(rectF, -90f, 180f, true, endPaint);

canvas.restore();

}

canvas.save();

// 绘制开始的半圆

canvas.drawArc(rectF, 90f, 180f, true, startPaint);

canvas.restore();

}

//这个是y顶部非常小的白色小圆，像扣子一样

canvas.drawCircle(cx, cy - radius, mLittleCircleSize, mLittleCirclePaint);

canvas.restoreToCount(restore);

}

然后在MainActivity中调用:private SportStepCountView sportStepCountView;

private Handler mHandler = new MyHandler();

private int mProgress = 0;

private class MyHandler extends Handler{

@Override

public void handleMessage(Message msg) {

super.handleMessage(msg);

sportStepCountView.setValueDuringRefresh(mProgress,100);

}

}

@Override

protected void onCreate(@Nullable Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

sportStepCountView = (SportStepCountView)findViewById(R.id.circleProgress);

//        sportStepCountView.setValue(50,100);

new Thread(new Runnable() {

@Override

public void run() {

while(mProgress<100) {

mProgress++;

try {

Thread.sleep(100);

} catch (InterruptedException e) {

e.printStackTrace();

}

mHandler.sendEmptyMessage(0);

}

}

}).start();

}

xml文件为:<?xml  version="1.0" encoding="utf-8"?>

android:layout_width="match_parent"

android:layout_height="231dp"

android:layout_marginTop="20dp">

android:id="@+id/circleProgress"

android:layout_width="210dp"

android:layout_height="210dp"

android:layout_centerHorizontal="true"

android:layout_marginTop="20dp" />

android:id="@+id/checkHistoryStepCount"

android:layout_marginTop="165dp"

android:layout_width="76dp"

android:layout_height="26dp"

android:layout_centerHorizontal="true"

android:textColor="@color/pregnancy_color_888888"

android:textSize="14sp"

android:text="查看历史"

android:background="@drawable/check_step_history_rectangle"

/>

android:id="@+id/backToToday"

android:layout_width="71dp"

android:layout_height="26dp"

android:layout_alignParentRight="true"

android:background="@drawable/pedometer_back_to_today_background"

android:text="回到今天"

android:textColor="@color/pregnancy_color_888888"

android:visibility="gone" />

如果喜欢，可以star一下，谢谢