2012-09-17 120 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