计步用进度条效果很棒

效果图:

要实现这样一个进度条，我们要创建一个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 < 1) {
        drawPercent = 0.97f;
    }

    // 画渐变圆
    canvas.save();
    canvas.rotate(-90, cx, cy);
    int[] colors;
    float[] positions;

    if (drawPercent < 1 && 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 < 1) {
            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"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="231dp"
    android:layout_marginTop="20dp">


    <nickgao.com.viewpagerswitchexample.view.SportStepCountView
        android:id="@+id/circleProgress"
        android:layout_width="210dp"
        android:layout_height="210dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp" />

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


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



</RelativeLayout>

​gitHub地址为:https://github.com/nickgao1986/ProgressWithAnimation

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