2013-11-01 110 views
4

這是我在stackoverflow.com上的第一個問題,所以請原諒我自己,如果我做錯了東西。用2種顏色的Android繪製圓圈(餅圖)

我想創建一個基本上像進度條的圓。現在我想通過一些代碼設置百分比。

我想實現的是:https://raw.github.com/psud/Melde-App/master/res/drawable-hdpi/circlemiddle.png

我的問題:

  1. 無法獲得具有兩種顏色的圓圈工作(一直在尋找了幾個小時的論壇,發現解決類似問題但我不能將這些解決方案實現到我的應用程序中,我已經閱讀了很多有關canvas.drawArc(...)的內容,但似乎無法找到如何使用它)。
  2. 如何將畫布放入佈局? (我有一個xml佈局,畫布應該在特定的佈局內繪製,而不會改變佈局的其餘部分)。

謝謝。

+2

可能重複[畫出的Android餅圖?](http://stackoverflow.com/questions/4397192/draw-pie-chart-in- android) – SERPRO

回答

18

這只是一個提示。它只是一個視圖,它在同一矩形中繪製兩個弧線:第一個弧線從角度0到360.第二個(在第一個之上)從0跨越到一個取決於百分比的角度。

public class PercentView extends View { 

    public PercentView (Context context) { 
     super(context); 
     init(); 
    } 
    public PercentView (Context context, AttributeSet attrs) { 
     super(context, attrs); 
     init(); 
    } 
    public PercentView (Context context, AttributeSet attrs, int defStyle) { 
     super(context, attrs, defStyle); 
     init(); 
    } 
    private void init() { 
     paint = new Paint(); 
     paint.setColor(getContext().getResources().getColor(R.color.lightblue)); 
     paint.setAntiAlias(true); 
     paint.setStyle(Paint.Style.FILL); 
     bgpaint = new Paint(); 
     bgpaint.setColor(getContext().getResources().getColor(R.color.darkblue)); 
     bgpaint.setAntiAlias(true); 
     bgpaint.setStyle(Paint.Style.FILL); 
     rect = new RectF(); 
    } 
    Paint paint; 
    Paint bgpaint; 
    RectF rect; 
    float percentage = 0; 
    @Override 
    protected void onDraw(Canvas canvas) { 
     super.onDraw(canvas); 
     //draw background circle anyway 
     int left = 0; 
     int width = getWidth(); 
     int top = 0; 
     rect.set(left, top, left+width, top + width); 
     canvas.drawArc(rect, -90, 360, true, bgpaint); 
     if(percentage!=0) { 
      canvas.drawArc(rect, -90, (360*percentage), true, paint); 
     } 
    } 
    public void setPercentage(float percentage) { 
     this.percentage = percentage/100; 
     invalidate(); 
    } 
} 

添加到您的佈局:

<bla.bla.PercentView 
      android:id="@+id/percentview" 
      android:layout_width="100dp" 
      android:layout_height="100dp" /> 
+1

真棒老兄!非常感謝!儘管對你的代碼進行了一次更正:在「canvas.drawArc(rect,-90,(360 * percentage),true,paint);」360必須替換爲3.6。 – patsud

+0

有一個小錯誤:當我開始活動時,只顯示前景色並且背景保持透明。如果我然後進入一個不同的活動,然後再回來,餅圖顯示正確(現在背景也顯示)。任何想法爲什麼發生這種情況? – patsud