如何在安卓中创建圆形进度条？

Question

您知道如何制作类似Google Fit应用程序中的圆形进度条吗？就像下面的图片一样。

- Mohamed

---

最近我其实做了类似的东西。这可能是一个有用的起点？https://github.com/daentech/CircularDemo - daentech

有人知道如何让加载部分的边缘像示例中一样变成圆角吗？ - Siebe

@Siebe，你可以使用我在答案中提到的库。它可以被定制为您想要的加载部分。 - WannaBeGeek

也许这可以指引你朝着正确的方向前进 https://github.com/grmaciel/two-level-circular-progress-bar - gmemario

您可以使用类似这个的项目 https://github.com/emre1512/CircleProgressBar. - Zapdos

Answer 1

你可以轻松自己创建这个

在你的布局中，包含以下具有特定可绘制对象的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）和厚度数值。

圆形（适用于Lollipop之前或API级别小于21）

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

循环（>= Lollipop 或 API 级别 >= 21）

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

< p > useLevel 在 API Level 21（Lollipop）中默认为"false"。

开始动画

接下来在您的代码中使用ObjectAnimator 对您布局中的 ProgressBar 的进度字段进行动画处理。

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();

附言：与上面的例子不同，它提供了流畅的动画效果。

- Murtaza Khursheed Hussain

---

删除进度条的样式 - “progressbarstyleHorizontal”，这是使其可见的方法。 - ERJAN

您的回答看起来可能非常有效，但一张图片胜过千言万语。如果您能将输出结果作为截图附加上去，那么对未来用户来说会更有用 - 个人认为。 - Ranjithkumar

好的，我会尝试去做。 - Murtaza Khursheed Hussain

你需要在 shape 元素之前使用 rotate 元素。 - Murtaza Khursheed Hussain

好的解决方案。 将circular.xml更改为layer-list，并添加secondaryProgress项以设置背景。 - LaYer Sutachad

Answer 2

您可以尝试使用Circle Progress库。

请注意，进度视图的宽度和高度应始终保持一致。

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"/>

ArcProgress：

<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"/>

- Top Cat

---

我想使用DonutPrgress，但希望进度条具有渐变颜色，并且在一个角落有圆角。我该如何实现？ - Piyush Agarwal

最大的执照 - radu122

WTF许可证。哈哈。 - z21

这里有一个非常轻量级的库 -> https://github.com/lopspower/CircularProgressBar - lopez.mikhael

获取未绑定前缀错误。 - Animesh Mangla