上圖: 本文代碼GitHub地址

progress.gif

兩個(gè)重點(diǎn):

• 屬性: ProgressBar的progressDrawable屬性，實(shí)現(xiàn)圓形進(jìn)度條
• 進(jìn)度: ProgressBar的progress添加屬性動(dòng)畫(huà)，并且addUpdateListener來(lái)監(jiān)聽(tīng)當(dāng)前進(jìn)度

代碼

• 屬性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布局(當(dāng)然也可以把ProgressBar拆出來(lái)單獨(dú)使用):

<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的目標(biāo)值是0，所以在updateListener我們獲取到剩余的進(jìn)度
  // 改成progressBar.getMax()，獲取到的就是正向的進(jìn)度了
  .ofInt(progressBarTop, "progress", 0)
  .setDuration(MS_IN_FUTURE);
// 保證動(dòng)畫(huà)的插值器是線性的
objectAnimatorTop.setInterpolator(new LinearInterpolator());
objectAnimatorTop
  .addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
      // 通過(guò)animated多少數(shù)值，來(lái)獲取當(dāng)前剩余的進(jìn)度或者已經(jīng)完成的進(jìn)度
      tvCountDownTop.setText(String.format("剩余\n%d"), (int) animation.getAnimatedValue()));
    }
  });
objectAnimatorTop.start();

使用

• 優(yōu)點(diǎn): 實(shí)現(xiàn)簡(jiǎn)單
• 缺點(diǎn): 如果設(shè)定的total progress time相對(duì)于ProgressBar max progress比較長(zhǎng)的話，會(huì)有斷斷續(xù)續(xù)的感覺(jué)

個(gè)人博客：

https://christmasjason.github.io

GitHub地址:

https://github.com/christmasjason/CircleProgressBar

寫(xiě)在最后:

歡迎大家批評(píng)指正^_