一个属性实现带进度的圆形进度条

2019年6月7日 293次阅读 来源: ChristmasJason

上图: 本文代码GitHub地址

《一个属性实现带进度的圆形进度条》 progress.gif

两个重点:

  • 属性: 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

写在最后:

欢迎大家批评指正_

    原文作者：ChristmasJason
    原文地址: https://www.jianshu.com/p/25b57c849663
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞