android - 如何创建类似于指示器的圆形进度条（饼图） - 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>

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

我想要的示例：

score 22 · Accepted Answer

您可以制作自定义视图（例如PieProgressView）或自定义 Drawable （例如PieProgressDrawable）。我采用了自定义视图方法，但两者都是完全可行的。

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

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

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

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

@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 在行动！

编辑

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

score 3 · Accepted Answer

节省一些时间，在重新发明轮子（或进度指示器）之前，检查http://github.com/Sage42/AndroidViewUtils上的那个是否适合你。只需将其添加到您的项目中并玩得开心。它是可定制的，并提供向上计数或向下计数的选项。

我忘了补充一点，视觉效果看起来几乎与您问题中的示例图像一模一样。

score 2 · Accepted Answer

试试这段代码来创建圆形进度条（饼图）。传递它整数值以绘制填充区域的百分比。:)

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);
}

score 0 · Accepted Answer

对于圆形进度条，请使用：

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.

score 0 · Accepted Answer

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

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

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

android - 如何创建类似于指示器的圆形进度条（饼图） - Android

5 回答 5

Related

Reference