java - 如何改进我的进度条匹配以跟随图像(颜色、角度、形状等)

Question

我创建了一个圆形进度条，并使其尽可能符合下图中的设计。

但我很难让它与下图中的设计(颜色、角度、形状等)相匹配:

不知道怎么匹配:

• 上面的颜色？
• 还是形状？

我想要遵循的设计:

我目前的设计如下所示:

到目前为止我的代码如下:

activity_main.xml

 <ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:id="@+id/progressBar"
        android:layout_width="240dp"
        android:layout_height="240dp"
        android:indeterminate="false"
        android:max="100"
        android:progress="75"
        android:progressDrawable="@drawable/style_circular_fill"
        android:secondaryProgress="10"
        android:layout_alignParentBottom="false"
        android:layout_alignParentStart="false"
        android:focusableInTouchMode="false"
        android:layout_alignParentTop="true"
        android:layout_marginTop="70dp"
        xmlns:android="http://schemas.android.com/apk/res/android" />

style_circular_fill.xml

<item android:id="@android:id/secondaryProgress">
    <rotate
        android:fromDegrees="270"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="270" >
        <shape
            android:innerRadiusRatio="2.5"
            android:shape="ring"
            android:thicknessRatio="20.0"
            android:useLevel="true" >
            <gradient
                android:centerColor="#A9E2F3"
                android:endColor="#A9E2F3"
                android:startColor="#A9E2F3"
                android:type="sweep" />
        </shape>
    </rotate>
</item>
<item android:id="@android:id/progress">
    <rotate
        android:fromDegrees="270"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="270" >
        <shape
            android:innerRadiusRatio="2.5"
            android:shape="ring"
            android:thicknessRatio="20.0"
            android:useLevel="true" >
            <gradient
                android:centerColor="#26ce61"
                android:endColor="#26ce61"
                android:startColor="#26ce61"
                android:type="sweep" />
        </shape>
    </rotate>
</item>

Answer 1

你可以试试 CircleProgress图书馆。其中一个示例与您的要求非常相似。

我没有使用过它，所以无法确认它的易用性。

为了平衡，查看this list进度条库。可能有一个库可以达到预期的效果。