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的源代码会产生一个非常复杂的实现。显然，它们涵盖了所有基础，但你不必编写复杂的东西。我们真的只需要两件事：

跟踪当前进度的成员。
根据当前进度绘制饼图的方法。

第一个很简单，只需保留一个跟踪要绘制的饼图当前百分比的成员字段。 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!
    ...
}

以下是示例应用中已完成视图的内容：

PieProgressView in action!

修改

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

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"

可在此处找到更多详细信息：What's the meaning of android:progressBarStyle attribute in ProgressBar?

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

或者你可以实现自定义的东西：在它旁边显示一个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，这个库将是完美的。

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

5 个答案: