Question

我正在尝试制作一个圆形进度条，其中进度条由纯色和红点组成。参见下图。基本上它是一个计时器，其中红点“吃掉”白色。这是我想要实现的目标：

这是我从其他StackOverflow问题中使用的代码

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

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

通过此代码，我可以获得白环，但如何使红点随其移动（使用XML）

谢谢

PS：这不是重复的问题，因为我没有看到讨论progress bar具有2种不同类型可绘制对象的问题。

Answer 1

您应该使用进度条。将进度条视图添加到您的代码中，然后像下面的代码一样添加背景XML文件：

 <?xml version="1.0" encoding="UTF-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromDegrees="120"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="140">
        <item android:id="@android:id/background">
            <shape
                android:innerRadiusRatio="2.6"
                android:shape="ring"
                android:useLevel="false"
                android:angle="0"
                android:type="sweep"
                android:thicknessRatio="80.0">
                <solid android:color="#d3d3d3"/>
            </shape>
        </item>
        <item android:id="@+id/rate_progress">
            <rotate
                android:fromDegrees="270"
                android:toDegrees="270">
                <shape
                    android:innerRadiusRatio="2.78"
                    android:shape="ring"
                    android:angle="0"
                    android:type="sweep"
                    android:thicknessRatio="15.0">
                    <solid android:color="@color/colorAccent"/>
                </shape>
            </rotate>
        </item>
    </layer-list>

在背景下方设置进度条。下面的代码是我的示例：

LayerDrawable layerDrawable = (LayerDrawable) progressBar.getContext().getResources()
            .getDrawable(R.drawable.rate_background);
    RotateDrawable progressDrawable = (RotateDrawable) layerDrawable
            .findDrawableByLayerId(R.id.rate_progress);
    GradientDrawable gradientDrawable = (GradientDrawable) progressDrawable.getDrawable();
    if (gradientDrawable != null) {
        gradientDrawable.setColor(Color.parseColor(color));
        progressBar.setProgressDrawable(layerDrawable);
    }
    progressBar.setProgress(rate);

并在进度栏中添加以下样式

 style="?android:attr/progressBarStyleHorizontal"

Answer 2

您可以通过扩展log类和覆盖fire方法来创建自定义进度视图画半圆，您可以使用drawArc()

并使用View更改圆弧角度

代码：

onDraw()

并在xml布局中像这样使用它：

ValueAnimator

最终结果：screenshot

希望有帮助

圆形进度条，如何实现

2 个答案: