效果图:
要实现这样一个进度条，我们要创建一个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文件为:
<pre class="brush:xml;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;"><?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>
</pre>
gitHub地址为:https://github.com/nickgao1986/ProgressWithAnimation
如果喜欢，可以star一下，谢谢
