如何在 android 中创建循环进度条？

你知道怎么做一个像 Google Fit 应用程序那样的圆形进度条吗？就像下面的图片。

enter image description here

191056 次浏览
小开
最佳答案

您可以尝试使用这个 循环进步库

enter image description here

enter image description here

注意: 请始终使用相同的宽度和高度进行进度视图

DonutProgress:

 <com.github.lzyzsd.circleprogress.DonutProgress
android:id="@+id/donut_progress"
android:layout_marginLeft="50dp"
android:layout_width="100dp"
android:layout_height="100dp"
custom:circle_progress="20"/>

循环进度:

  <com.github.lzyzsd.circleprogress.CircleProgress
android:id="@+id/circle_progress"
android:layout_marginLeft="50dp"
android:layout_width="100dp"
android:layout_height="100dp"
custom:circle_progress="20"/>

进展:

<com.github.lzyzsd.circleprogress.ArcProgress
android:id="@+id/arc_progress"
android:background="#214193"
android:layout_marginLeft="50dp"
android:layout_width="100dp"
android:layout_height="100dp"
custom:arc_progress="55"
custom:arc_bottom_text="MEMORY"/>
小开

自己动手很容易

在你的布局包括以下 ProgressBar与一个特定的绘图(注意，应该从尺寸获得宽度)。最大值是重要的在这里:

<ProgressBar
android:id="@+id/progressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:max="500"
android:progress="0"
android:progressDrawable="@drawable/circular" />

现在使用以下形状在资源中创建可绘制的内容。使用半径(可以使用 innerRadius而不是 innerRadiusRatio)和厚度值。

(前棒棒糖或 API 级别 < 21)

   <shape
android:innerRadiusRatio="2.3"
android:shape="ring"
android:thickness="3.8sp" >
<solid android:color="@color/yourColor" />
</shape>

圆形(> = 棒棒糖或 API 级别 > = 21)

    <shape
android:useLevel="true"
android:innerRadiusRatio="2.3"
android:shape="ring"
android:thickness="3.8sp" >
<solid android:color="@color/yourColor" />
</shape>

UseLevel 在 API Level 21(Lollipop)中默认为 “假”。

开始动画制作

接下来在代码中使用 ObjectAnimator来动画化布局的 ProgessBar的进度字段。

ProgressBar progressBar = (ProgressBar) view.findViewById(R.id.progressBar);
ObjectAnimator animation = ObjectAnimator.ofInt(progressBar, "progress", 0, 500); // see this max value coming back here, we animate towards that value
animation.setDuration(5000); // in milliseconds
animation.setInterpolator(new DecelerateInterpolator());
animation.start();

停止动画

progressBar.clearAnimation();

另外，与上面的例子不同，它给出了流畅的动画效果。


提交答案