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

Question

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

press start > press stop > display results.

然而，我公司的IT总监刚刚告诉我，他想要在针状图中显示信息（g-force，平均速度，最高速度），并且还希望以一种华丽的方式显示其他人（所花时间） ，旅行距离）

我最初的想法是：

创建一个像这样的针规，但是在较小的比例上，数字值显示在图形的下方或旁边，只显示行进的距离和显示为闹钟样式数字的时间。这将全部沿着屏幕的左侧以薄列形式运行，然后显示一个地图，显示起始位置和结束位置以及旅程所需的路线

基本上我希望它看起来像（抱歉图纸粗糙） 沿着这些方向的东西将是完美的！

我想我可以解决地图业务和时间和距离读数的数字，但我从来没有做过任何真正花哨的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. 等