Как нарисовать этот пользовательский вид, как показано на рисунке в android studio? - PullRequest
0 голосов
/ 14 января 2020

Я пытаюсь создать пользовательский вид шкалы, как показано на картинке ниже:

enter image description here

Пока я не добился большого прогресса.

это код ниже, который я сделал до сих пор

private Paint arcPaint;
private Paint outerCirclePaint;
private Paint centerCirclePaint;
private Paint innerCirclePaint;

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

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

public CustomGaugeView(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);

    outerCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    outerCirclePaint.setStyle(Paint.Style.STROKE);
    outerCirclePaint.setStrokeWidth(12f);

    centerCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    centerCirclePaint.setStyle(Paint.Style.STROKE);
    centerCirclePaint.setStrokeWidth(8f);

    innerCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    innerCirclePaint.setStyle(Paint.Style.STROKE);
    innerCirclePaint.setStrokeWidth(10f);
}

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

    outerCirclePaint.setColor(getResources().getColor(R.color.outerCounterStroke));
    canvas.drawCircle(width/2, height/2, width/2.6f, outerCirclePaint);
    centerCirclePaint.setColor(getResources().getColor(R.color.colorAccent));
    canvas.drawCircle(width/2, height/2, width/3.6f, centerCirclePaint);
    innerCirclePaint.setColor(getResources().getColor(R.color.innerCounterStroke));
    canvas.drawCircle(width/2, height/2, width/5f, innerCirclePaint);

    int x = width/2;
    int y = height/2;
    int radius;
    radius = (int) (width/3.6f-27);
    arcPaint.setStyle(Paint.Style.STROKE);
    arcPaint.setStrokeWidth(width/15);

    final RectF arcBounds = new RectF(x-radius,y-radius,
            x+radius,y+radius);
    canvas.drawArc(arcBounds, 0f, 70f, false, arcPaint);
    arcPaint.setColor(Color.WHITE);
    canvas.drawArc(arcBounds, 70f, 52.5f, false, arcPaint);
    arcPaint.setColor(Color.YELLOW);
    canvas.drawArc(arcBounds, 122.5f, 105f, false, arcPaint);
    arcPaint.setColor(Color.DKGRAY);
    canvas.drawArc(arcBounds, 227.5f, 132.5f, false, arcPaint);
    arcPaint.setColor(Color.GRAY);
    canvas.drawArc(arcBounds, 360f, 30f, false, arcPaint);

    final int totalNoOfPointers = 100;
    final int pointerMaxHeight = 25;
    final int pointerMinHeight = 15;

    int startX = width/2;
    int startY = height/2;
    centerCirclePaint.setColor(getResources().getColor(R.color.white));
    centerCirclePaint.setStrokeCap(Paint.Cap.ROUND);

    int pointerHeight;
    for (int i = 0; i <= totalNoOfPointers; i++) {
        if(i%50 == 0) {
            pointerHeight = pointerMaxHeight;
            centerCirclePaint.setStrokeWidth(5f);
        }
        else {
            pointerHeight = pointerMinHeight;
            centerCirclePaint.setStrokeWidth(2f);
        }
        canvas.drawLine(startX, startY, startX - pointerHeight, startY, centerCirclePaint);
        canvas.rotate(360f/totalNoOfPointers, x-radius, y);
    }
}

Пока это прогресс

enter image description here

Я пытался переместить эти галочки (указатели) в центр, но не могу понять, как это сделать.

Это мой первый CustomView с canvas, и второй раз я задаю здесь вопрос в stackoverflow. искал вокруг, но не мог понять вещи точно.

Так, пожалуйста, если кто-нибудь может помочь или какие-нибудь идеи, как достигнуть этого?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...