上图: 本文代码GitHub地址
两个重点:
- 属性: ProgressBar的progressDrawable属性,实现圆形进度条
- 进度: ProgressBar的progress添加属性动画,并且addUpdateListener来监听当前进度
代码
- 属性progressDrawable的drawable:
circle_progress_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="270"
android:toDegrees="270">
<shape
android:innerRadiusRatio="2.5"
android:shape="ring"
android:thickness="2dp"
android:useLevel="true">
<gradient
android:angle="0"
android:endColor="#4285f4"
android:startColor="#4285f4"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>
- ProgressBar布局(当然也可以把ProgressBar拆出来单独使用):
<FrameLayout
android:id="@+id/fl_count_down_top"
android:layout_width="50dp"
android:layout_height="50dp"
android:gravity="center">
<ProgressBar
android:id="@+id/pb_count_down_top"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
// 上面的drawable
android:progressDrawable="@drawable/circle_progress_bar"
tools:max="100"
tools:progress="100" />
<TextView
android:id="@+id/tv_count_down_top"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="4dp"
android:background="@drawable/selector_circle_background"
android:gravity="center"
android:textColor="@android:color/black"
android:textSize="11sp" />
</FrameLayout>
- 给ProgressBar 添加updateListener:
objectAnimatorTop = ObjectAnimator
// 这里的animate的目标值是0,所以在updateListener我们获取到剩余的进度
// 改成progressBar.getMax(),获取到的就是正向的进度了
.ofInt(progressBarTop, "progress", 0)
.setDuration(MS_IN_FUTURE);
// 保证动画的插值器是线性的
objectAnimatorTop.setInterpolator(new LinearInterpolator());
objectAnimatorTop
.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
// 通过animated多少数值,来获取当前剩余的进度或者已经完成的进度
tvCountDownTop.setText(String.format("剩余\n%d"), (int) animation.getAnimatedValue()));
}
});
objectAnimatorTop.start();
使用
- 优点: 实现简单
- 缺点: 如果设定的total progress time相对于ProgressBar max progress比较长的话,会有断断续续的感觉
个人博客:
https://christmasjason.github.io
GitHub地址:
https://github.com/christmasjason/CircleProgressBar
写在最后:
欢迎大家批评指正_