在android中用画布绘制四分之一规格?

时间:2015-11-08 06:42:34

标签: java android android-canvas gauge

如何制作与此相同的量规? 这种规格类型是否存在任何库或专家? 我使用画布作为圆规,但我不能创建这个

 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" />

enter image description here

1 个答案:

答案 0 :(得分:5)

  1. 你可以谷歌找到一堆GagueViews。我想你已经做到了。

  2. 这看起来很简单。因此,您可以编写自己的自定义View。您可以使用drawArc绘制3种不同的颜色弧。您可以使用drawLine绘制测量点(只需记住设置Paint.setStrokeCap(Cap.Round))。至于针,您可以使用drawPath。通过一些努力和正确的坐标,您应该能够自己编写一个漂亮的GaugeView。

  3. 如果您发现编写自己的观点很困难,可以在GaugeView中引用一些GitHub。你会有一个很好的起点。

  4. 更新:我根据你问题中的图片写了一个简单的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);
            }
        }
    }
    


    最终渲染的图像如下所示:
    final GuageView