计步用进度条效果很棒

效果图:

https://img1.mukewang.com/5c4281b90001eb9d01380138.jpg

要实现这样一个进度条，我们要创建一个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文件为:

  android:layout_width="match_parent"
 android:layout_height="231dp"
 android:layout_marginTop="20dp">
 
 





 
 

 

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

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