android - 如何在Android中创建一个在其上旋转的圆形进度条？

Question

我正在尝试创建一个圆形进度条。这就是我想要实现的目标

有一个灰色的背景环。在它的顶部，会出现一个蓝色进度条，它在 60 秒或任何秒数内以从 0 到 360 的圆形路径移动。

这是我的示例代码。

<ProgressBar
            android:id="@+id/ProgressBar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            style="?android:attr/progressBarStyleLarge"
            android:indeterminateDrawable="@drawable/progressBarBG"
            android:progress="50"
            />

为此，在可绘制的“progressBarBG”中，我创建了一个图层列表，并在该图层列表中给出了两个项目，如图所示。

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
    <shape
            android:shape="ring"
            android:innerRadius="64dp"
            android:thickness="8dp"
            android:useLevel="false">

        <solid android:color="@color/grey" />
    </shape>
</item>

<item android:id="@android:id/progress">
    <clip>
        <shape
                android:shape="ring"
                android:innerRadius="64dp"
                android:thickness="8dp"
                android:useLevel="false">

            <solid android:color="@color/blue" />
        </shape>
    </clip>
</item>

现在，第一个灰色环生成良好。然而，蓝色环从可绘制对象的左侧开始并向右移动，就像线性进度条的工作方式一样。这是进度 50% 时的显示方式，红色箭头指示方向。

我想按预期在圆形路径中移动蓝色进度条。

Answer 1

这是我的两个解决方案。

简答:

我没有创建 layer-list，而是将其分成两个文件。一个用于ProgressBar，一个用于其背景。

这是 ProgressDrawable 文件(@drawable 文件夹):circular_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="1dp"
        android:useLevel="true"><!-- this line fixes the issue for lollipop api 21 -->

        <gradient
            android:angle="0"
            android:endColor="#007DD6"
            android:startColor="#007DD6"
            android:type="sweep"
            android:useLevel="false" />
    </shape>
</rotate>

这是它的背景(@drawable文件夹):circle_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadiusRatio="2.5"
    android:thickness="1dp"
    android:useLevel="false">

    <solid android:color="#CCC" />

</shape>

最后，在您正在工作的布局内:

<ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:indeterminate="false"
        android:progressDrawable="@drawable/circular_progress_bar"
        android:background="@drawable/circle_shape"
        style="?android:attr/progressBarStyleHorizontal"
        android:max="100"
        android:progress="65" />

结果如下:

长答案:

使用继承 android.view.View 的自定义 View

这里是完整的项目on github