我想创建一个圆形的进度。这就是我想实现

I am trying to create a rounded progressbar. This is what I want to achieve

有一个灰色的背景环。在它的上面，一个蓝色进度条显示其在一个圆形路径移动，从0到360秒60或任何金额。

There is a grey color background ring. On top of it, a blue color progressbar appears which moves in a circular path from 0 to 360 in 60 or whatever amount of seconds.

下面是我的例子code。

Here is my example code.

<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，我创建一个layerlist和图层列表里面我给两个项目，如图所示。

To do this, in the drawable "progressBarBG", I am creating a layerlist and inside that layer list I am giving two items as shown.

<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％的进度。

Now, the first grey ring is generated fine. The blue ring however starts from the left of the drawable and goes to the right just like how a linear progressbar works. This is how it shows at 50% progress with the red color arrow showing direction.

我要像预期的那样移动蓝色进度条在圆形的路径。

I want to move the blue progressbar in circular path as expected.

推荐答案

下面是我的两个解决方案。

Here is my two solution.

简短的回答：

，我在两个文件中分离出来的。一为进度，一个是它的背景。

Instead of creating a layer-list, I separated it in two files. One for ProgressBar and one for its background.

这是 ProgressDrawable 文件（@drawable文件夹）： circular_progress_bar.xml

This is the ProgressDrawable file (@drawable folder): 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>

这是其背景（@绘制文件夹）： circle_shape.xml

And this is for its background(@drawable folder): 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>

和结束时，你正在里面的布置：

And at the End, inside the layout that you're working:

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

下面的结果：

龙回答：

View类的子类，古装视图

A subclass of the View class, A costume view

下面是整个项目的在GitHub上