在android中繪製與畫布四分之一計？

Question

如何創建與此相同的儀表？ 該量表類型的任何庫或maven存在？ 我用帆布圓量規，但我不能創造這一個

RectF oval = getOval(canvas, 1); 
    RectF oval2 = getOval(canvas, 1.1f); 

    Paint paint = new Paint(); 
    paint.setColor(Color.DKGRAY); 

    canvas.drawArc(oval2, 180, 90, true, paint); 
    canvas.drawArc(oval, 180, 90, true, backgroundPaint); 

    RectF innerOval = getOval(canvas, 0.9f); 
    canvas.drawArc(innerOval, 180, 90, true, backgroundInnerPaint); 

<GaugeView 
     android:id="@+id/gauge" 
     android:layout_width="@dimen/panel_gauge_height" 
     android:layout_height="@dimen/panel_gauge_width" 
     app:divisions="8" 
     app:scaleEndValue="8" 
     app:scaleStartAngle="50" 
     app:scaleStartValue="0" 
     app:showNeedle="true" 
     app:subdivisions="2" /> 

Answer 1

1. 你可能只是谷歌找到了一堆GagueViews的。我想你已經做到了。

2. 這看起來很簡單。所以你可以寫你自己的定製View。您可以使用drawArc繪製3種不同顏色的弧線。您可以使用drawLine繪製測量點（請記住設置Paint.setStrokeCap(Cap.Round)）。至於針，您可以使用drawPath。通過一些努力和正確的座標，你應該能夠自己寫一個漂亮的GaugeView。

3. 如果您發現編寫自己的視圖比較困難，您可以參考GitHub中的一些GaugeView。你會得到一個好的起點。

更新：我根據你質疑的圖像上寫了一個簡單GaugeView。計算以像素爲單位，您可能需要將它們與DisplayMetrics.density相乘，以使它們處於獨立像素中。另外，您可能希望通過xml公開大部分值，以便您可以在佈局中控制它們。這可能是一個很好的起點。

public class GaugeView extends View { 

    private Paint arcPaint; 

    public GaugeView(Context context) { 
     super(context); 
     initialize(); 
    } 

    public GaugeView(Context context, AttributeSet attrs) { 
     super(context, attrs); 
     initialize(); 
    } 

    public GaugeView(Context context, AttributeSet attrs, int defStyleAttr) { 
     super(context, attrs, defStyleAttr); 
     initialize(); 
    } 

    private void initialize() { 
     arcPaint = new Paint(Paint.ANTI_ALIAS_FLAG); 
     arcPaint.setStyle(Paint.Style.STROKE); 
     arcPaint.setStrokeWidth(15f); 
    } 

    @Override 
    protected void onDraw(Canvas canvas) { 
     int width = canvas.getWidth(); 
     int height = canvas.getHeight(); 

     int arcCenterX = width - 10; 
     int arcCenterY = height - 10; 

     final RectF arcBounds = new RectF(arcCenterX - 100, arcCenterY - 100, arcCenterX + 100, arcCenterY + 100); 


     // Draw the arc 
     canvas.drawArc(arcBounds, 180f, 20f, false, arcPaint); 
     arcPaint.setColor(Color.DKGRAY); 
     canvas.drawArc(arcBounds, 200f, 40f, false, arcPaint); 
     arcPaint.setColor(Color.GRAY); 
     canvas.drawArc(arcBounds, 2400f, 30f, false, arcPaint); 

     // Draw the pointers 
     final int totalNoOfPointers = 20; 
     final int pointerMaxHeight = 25; 
     final int pointerMinHeight = 15; 

     int startX = arcCenterX - 120; 
     int startY = arcCenterY; 
     arcPaint.setStrokeWidth(5f); 
     arcPaint.setStrokeCap(Paint.Cap.ROUND); 

     int pointerHeight; 
     for (int i = 0; i <= totalNoOfPointers; i++) { 
      if(i%5 == 0){ 
       pointerHeight = pointerMaxHeight; 
      }else{ 
       pointerHeight = pointerMinHeight; 
      } 
      canvas.drawLine(startX, startY, startX - pointerHeight, startY, arcPaint); 
      canvas.rotate(90f/totalNoOfPointers, arcCenterX, arcCenterY); 
     } 
    } 
} 

最終渲染圖像看起來是這樣的：