GUI, виджеты, пользовательский интерфейс: как мне создать иглодержатель?

Question

Хорошо, краткое резюме, было предложено создать приложение для работы, которая записывает данные конкретных данных и отображать их на экране, когда закончите. Так что это будет работать так.

press start > press stop > display results.

Однако ИТ-директор моей компании только что сказал мне, что он хочет отображать информацию в виде графиков стрелок (g-force, средняя скорость, максимальная скорость), а также хочет показывать другие наглядно (время, пройденное расстояние).)

Моя первоначальная идея заключается в следующем:

создать манометр, как это, но в меньшем масштабе и отображать цифровое значение ниже или рядом с графиком и просто отображать пройденное расстояние и время, отображаемое в виде цифр стиля будильника. Все это будет проходить по левой стороне экрана в тонком столбце, а затем будет иметь карту, отображающую начальное и конечное местоположение с маршрутом, выбранным для поездки.

в основном я хотел бы, чтобы это выглядело так (извините за грубость рисунка) Что-то в этом роде было бы идеально!

Я думаю, что смогу разобраться с картографическим бизнесом и цифрами для отсчетов времени и расстояния, но я никогда не делал действительно фантастических вещей в интерфейсе.

Как бы я начал делать манометр?

Я думал о том, чтобы попробовать горизонтальную линейку, может быть? В случае, если я не могу заставить иглу работать.

Кроме того, у меня только до вторника!: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. так далее