GUI、小部件、UI：我将如何创建针规？

Question

好的，简要回顾一下，被要求创建一个用于记录数据特定数据并在完成后将其显示到屏幕上的工作应用程序。所以它会像这样运行。

press start > press stop > display results.

然而，我公司的 IT 总监刚刚告诉我，他想要以针形图显示信息（重力、平均速度、最高速度），并且还想要一种华丽的方式来显示其他信息（所用时间、行驶距离） ）

我最初的想法是这样的：

创建一个像这样的针规 ，但比例较小并显示数字值在图表下方或旁边，然后显示以闹钟样式数字显示的行驶距离和花费时间。这一切都将在屏幕的左侧以细列的形式运行，然后显示一张地图，显示起始位置和结束位置以及旅程所采取的路线，

基本上我希望它看起来像这样 （对于绘图的粗糙性表示歉意） 沿着这些思路的东西将是完美的！

我想我可以计算出地图业务以及时间和距离读数的数字，但我从来没有做过任何真正花哨的 UI 东西。

我该如何开始制作针规？

我想尝试一下单杠量规吧？万一我无法让针规工作。

另外，我只有到周二的时间！ ：S

Answer 1

想象以下非常基本的想法：

我们有带有背景图像的自定义视图，它是没有针的仪表！

因此，我们首先使用扩展 View 的类来实现此功能。

public class ourGauge extends View {

    private Bitmap bgImage = null;

    public ourGauge(Context context, Bitmap bgImage) {
        super(context);
        this.bgImage = bgImage;
    }

    public ourGauge(Context context) {
        super(context);
    }

    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawBitmap(bgImage, 0, 0, null);
    }

}

现在让我们添加一个针

public class ourGauge extends View {

    private Bitmap bgImage = null;
    private int indicator;
    Paint paint = new Paint(); 

    public ourGauge(Context context, Bitmap bgImage) {
        super(context);
        this.bgImage = bgImage;
    }

    public ourGauge(Context context) {
        super(context);
    }

    public void setIndicator(int indicator){
        this.indicator = indicator;
        invalidate();
    }

    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawBitmap(bgImage, 0, 0, null);
        //you could set color based on indicator (speed or sth)
        paint.setColor(Color.BLACK); 
        canvas.drawLine(0, 0, 20, 20, paint);
        //you have to find the formula to get from where to where the line should drawn
    }

}

为了使它更好

1. 不要使用 drawLine 绘制针，而是将其做成一个形状
   带有尺寸
2. 要创建速度的动态标签，您也应该绘制它们
3. 等