如何创建循环进度条（饼图）像指标 - Android

Question

现在我有一个水平进度条，它通过ProgressBar setProgress方法以编程方式更新：

<ProgressBar
            style="@android:style/Widget.ProgressBar.Horizontal"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="20dip"
            android:id="@+id/progressbar"
            >
    </ProgressBar>

有没有办法将此进度条转换为圆形（饼图）并能够以编程方式更新进度？

我想要的例子：

Answer 1

您可以创建自定义视图（例如PieProgressView ）或自定义Drawable（例如PieProgressDrawable ）。 我采用了自定义视图方法，但要么完全可行。

快速浏览Android的ProgressView源代码会产生一个非常复杂的实现。 显然，它们涵盖了所有基础，但你不必编写复杂的东西。 我们真的只需要两件事：

1. 跟踪当前进度的成员。
2. 一种基于当前进度绘制饼图的方法。

第一个很简单，只需保留一个跟踪要绘制的饼图当前百分比的成员字段。 2号有点复杂，但幸运的是，我们可以使用标准的Canvas绘制方法。

方便的是，Android的Canvas类提供了drawArc（）方法。 您可以使用它来获得Pie效果。 假设我们将一个名为mPercent的成员字段中的百分比存储为0到1之间的浮点数， onDraw()方法可能如下所示：

@Override
protected void onDraw(Canvas canvas) {

    final float startAngle = 0f;
    final float drawTo = startAngle + (mPercent * 360);

    // Rotate the canvas around the center of the pie by 90 degrees
    // counter clockwise so the pie stars at 12 o'clock.
    canvas.rotate(-90f, mArea.centerX(), mArea.centerY());
    canvas.drawArc(mArea, startAngle, drawTo, true, mPaint);

    // Draw inner oval and text on top of the pie (or add any other
    // decorations such as a stroke) here..
    // Don't forget to rotate the canvas back if you plan to add text!
    ...
}

以下是示例应用中已完成视图的样子：

编辑

自发布以来，我已经确定您没有理由需要实现自定义视图。 您可以简单地使用drawable和它的level属性来完成所需的操作。 我用完全的绘画做了一个要点 。

Answer 2

节省一些时间，然后重新发明轮子（或进度指示器），检查http://github.com/Sage42/AndroidViewUtils上的那个是否适合您。 只需将其添加到您的项目中即可享受乐趣。 它可以自定义，并提供Counting Up或Counting Down选项。

我忘了添加视觉效果看起来几乎与您问题中的示例图像完全一样。

Answer 3

尝试使用这段代码创建循环进度条（饼图）。 传递整数值来绘制填充区域的百分之几。 :)

private void circularImageBar(ImageView iv2, int i) {

    Bitmap b = Bitmap.createBitmap(300, 300,Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(b); 
    Paint paint = new Paint();

        paint.setColor(Color.parseColor("#c4c4c4"));
        paint.setStrokeWidth(10);
        paint.setStyle(Paint.Style.STROKE);
        canvas.drawCircle(150, 150, 140, paint);
        paint.setColor(Color.parseColor("#FFDB4C"));
        paint.setStrokeWidth(10);   
        paint.setStyle(Paint.Style.FILL);
        final RectF oval = new RectF();
        paint.setStyle(Paint.Style.STROKE);
        oval.set(10,10,290,290);
        canvas.drawArc(oval, 270, ((i*360)/100), false, paint);
        paint.setStrokeWidth(0);    
        paint.setTextAlign(Align.CENTER);
        paint.setColor(Color.parseColor("#8E8E93")); 
        paint.setTextSize(140);
        canvas.drawText(""+i, 150, 150+(paint.getTextSize()/3), paint); 
        iv2.setImageBitmap(b);
}

Answer 4

对于循环进度条，请使用：

style="?android:attr/progressBarStyle"

更多细节可以在这里找到： 在ProgressBar中android：progressBarStyle属性的含义是什么？

至于设置进度：循环进度条将继续旋转。 只需在不再需要它之后隐藏它。

或者你可以实现自定义的东西：在它旁边显示一个TextView并更新它而不是使用Progressbar.setProgress。

Step 0: setText("0%");
Step 1 (2 seconds later): setText("3%");
Step 2 (4 seconds later): setText("9%"); etc.

Answer 5

即使这是一个老问题，我希望这个答案可以帮助未来的观众。

看看这个库 - https://github.com/lzyzsd/CircleProgress

对于简单的循环进度，动态或静态，这个lib非常简单，并且具有许多易于定制的属性（如笔划宽度，起始角度，内部背景，文本颜色等）。 对于OP想要实现的UI，这个库将是完美的。