Я пытаюсь создать пользовательский вид шкалы, как показано на картинке ниже:
Пока я не добился большого прогресса.
это код ниже, который я сделал до сих пор
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);
}
}
Пока это прогресс
Я пытался переместить эти галочки (указатели) в центр, но не могу понять, как это сделать.
Это мой первый CustomView с canvas, и второй раз я задаю здесь вопрос в stackoverflow. искал вокруг, но не мог понять вещи точно.
Так, пожалуйста, если кто-нибудь может помочь или какие-нибудь идеи, как достигнуть этого?