2012-09-17 143 views
14

现在我有一个是通过ProgressBarsetProgress方法程序更新的水平进度条:如何打造循环进度条(饼图),如指标 - 安卓

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

有没有办法来这个进度条转换为一个圆形(饼图),并能够以编程方式更新进度?我想要什么

例子:

+0

你是说你想要一个活动圈?就像这里显示的圆形一样:http://developer.android.com/design/building-blocks/progress.html如果不是,你能展示一幅你的意思吗? –

+0

并且还能够以编程方式更新进度? - 你的意思是这个 –

+0

@Renjith K N:以编程方式更新进度:例如,在每2秒我想用某种颜色填充圆圈;与此图片中的内容非常相似:http://3.bp.blogspot.com/_sfxUTOTXTng/TQxMiOjIkNI/AAAAAAAAACo/xSeP2-nSXF4/s1600/progressBarStyleHorizo​​ntal.png,但我想成为一个圈子。 – Paul

回答

0

对于圆形进度条,使用:

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. 
+0

嗯,主要想法是我不想让进度条继续旋转......在每2秒我想用一些颜色填充圆圈;与此图片中的内容非常相似:3.bp.blogspot.com/_sfxUTOTXTng/TQxMiOjIkNI/AAAAAAAAACo/...,但我想围成一圈 – Paul

+0

您添加的网址无效。定制一个ProgressBar似乎不是很直接,应该在另一个问题中提出。只需搜索“android自定义进度栏”。 – Buffalo

+0

这是正确的链接,对不起:http://3.bp.blogspot.com/_sfxUTOTXTng/TQxMiOjIkNI/AAAAAAAAACo/xSeP2-nSXF4/s1600/progressBarStyleHorizo​​ntal.png – Paul

19

您可以使自定义视图(例如PieProgressView)或者自定义绘制对象(例如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! 
    ... 
} 

下面是完整的视图看起来像一个示例应用程序:

PieProgressView in action!

编辑

发布以来,我已经决定真的没有再不久你需要实现一个自定义视图。您可以简单地使用drawable和它的level属性来完成所需的操作。我做了一个gist with the full drawable

+0

谢谢,但它最好写一个例子。 –

+0

@omidnazifi检查链接。 – dcow

+0

我已经检查过了,但是并没有像上面的图片那样绘制出正确的图像!它只是画一个圆圈。 mDrawTo变量永远不会被onLevelChange方法填充。 –

3

在重新发明车轮(或进度指示器)之前,请保存一段时间,然后检查http://github.com/Sage42/AndroidViewUtils是否适合您。只需将其添加到您的项目中即可获得乐趣。它是可定制的,并提供计数或计数的选项。

我忘了补充说,视觉效果看起来几乎完全像你问题中的示例图像。

2

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

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

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

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

对于一个简单的圆形进度,动态或静态,这LIB非常简单,有一个方便的可定制的许多属性(如中风宽度,起始角,里面的背景,文字颜色,等等)。对于OP想要实现的UI,这个库是完美的。

Circular progress sample image