圆形进度条，如何实现这一目标

Posted 2021-04-12

我试图做一个圆形进度条在进度条由纯色和红点。见下面的图片。基本上它是一个计时器，其中红点“吃”的白颜色。这就是我想实现：

下面是我从其他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种不同类型可绘制的问题。

答案

您可以创建自定义发展观的扩展View类并覆盖onDraw()方法绘制你可以使用drawArc()半圆

并使用ValueAnimator改变弧角

码：

TimerView.java 

import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PointF;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.support.v4.math.MathUtils;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.LinearInterpolator;

import java.util.concurrent.TimeUnit;

public class TimerView extends View {
private Paint ProgressPaint,indicatorPaint;
private float mProgressValue;
private ValueAnimator mTimerAnimator;
float stratAngel=270;
private int strokeWidth=10;

public TimerView(Context context) {
    super(context);
    ini();
}

public TimerView(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    ini();

}

public TimerView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    ini();

}

void ini(){
    ProgressPaint =new Paint();
    ProgressPaint.setAntiAlias(true);
    ProgressPaint.setStyle(Paint.Style.STROKE);
    ProgressPaint.setStrokeWidth(strokeWidth);
    ProgressPaint.setColor(Color.WHITE);

    indicatorPaint=new Paint();
    indicatorPaint.setAntiAlias(true);
    indicatorPaint.setStyle(Paint.Style.FILL);
    indicatorPaint.setColor(Color.RED);



}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    float w = (getWidth() - getPaddingLeft() - getPaddingRight())/2;
    float h = (getHeight() - getPaddingTop() - getPaddingBottom())/2;
    float radius = Math.min(w, h) / 2.0f;

    PointF center = new PointF(getLeft() + radius, getTop() + radius);

   RectF rect = new RectF(center.x - radius, center.y - radius,
           center.x + radius, center.y + radius);
    float progressAngel=360 * mProgressValue;
    canvas.drawArc(rect, stratAngel, progressAngel, false, ProgressPaint);
    float xPos = radius * (float)Math.cos(Math.toRadians(stratAngel+progressAngel)) + center.x;
    float yPos = radius * (float)Math.sin(Math.toRadians(stratAngel+progressAngel)) + center.y;
    canvas.drawCircle(xPos, yPos, 30, indicatorPaint);


}


public void start(int secs) {
    stop();

    mTimerAnimator = ValueAnimator.ofFloat(1f, 0f);
    mTimerAnimator.setDuration(TimeUnit.SECONDS.toMillis(secs));
    mTimerAnimator.setInterpolator(new LinearInterpolator());
    mTimerAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            mProgressValue=(float) animation.getAnimatedValue();
            invalidate();
        }
    });
    mTimerAnimator.setRepeatCount(Integer.MAX_VALUE);
    mTimerAnimator.start();
}

public void stop() {
    if (mTimerAnimator != null && mTimerAnimator.isRunning()) {
        mTimerAnimator.cancel();
        mTimerAnimator = null;
        mProgressValue=0.0f;

    }
}


@Override
protected void onAttachedToWindow() {
    super.onAttachedToWindow();
    start(5);
}




 }

在XML布局一样使用它：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:background="#dedede"
android:padding="16dp"
>
<<your package name>.TimerView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />
 </LinearLayout>

最终结果：screenshot

希望能帮助到你

另一答案

您应该使用进度条。添加进度条以您的代码，然后添加背景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"