计步用进度条效果很棒

效果图:

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

要实现这样一个进度条，我们要创建一个SportStepCountView,里面要有计算:

<pre class="brush:java;toolbar:false" style="margin: 0.5em 0px; padding: 0.4em 0.6em; line-height: 1.5; border-radius: 8px; background: rgb(248, 248, 248); color: rgb(28, 31, 33); font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">@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);

}
</pre>

然后在MainActivity中调用:

<pre class="brush:java;toolbar:false" style="margin: 0.5em 0px; padding: 0.4em 0.6em; line-height: 1.5; border-radius: 8px; background: rgb(248, 248, 248); color: rgb(28, 31, 33); font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">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();
}

</pre>

xml文件为:

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

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

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

计步用进度条效果很棒

推荐阅读更多精彩内容