交流控制器直径图

我试图绘制交流控制直径。我被困在2点上，

1. 自定义视图未以XML（图2）的形式显示在移动屏幕（图1）上
2. 如何在触摸时移动圆形对象

图片3：这是预期的结果（忽略颜色组合）；

我用谷歌搜索来解决这个问题，我没有找到，或者我找不到想要的原始东西，有人可以帮我吗 这就是我尝试过的方式：

public class TemperatureView extends View {
    private final float DENSITY = getContext().getResources().getDisplayMetrics().density;
    private Paint pathPaint;
    private Path arrowPath;
    private Paint circlePaint;
    private Paint textPaint;

    public TemperatureView(Context context) {
        super(context);
        init(null);
    }
    public TemperatureView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(attrs);
    }

    public TemperatureView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(attrs);
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public TemperatureView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init(attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    }

    private void init(AttributeSet set){
        pathPaint = new Paint();
        pathPaint.setStyle(Paint.Style.STROKE);
        pathPaint.setAntiAlias(true);
        pathPaint.setStrokeWidth(80);
        pathPaint.setColor(Color.parseColor("#f9f9f9"));


        arrowPath = new Path();
        circlePaint = new Paint();
        circlePaint.setStyle(Paint.Style.FILL);
        circlePaint.setAntiAlias(true);
        circlePaint.setColor(Color.parseColor("#112233"));


        textPaint = new Paint();
        textPaint.setColor(Color.YELLOW);
        textPaint.setTextSize(50);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        drawOvalAndArrow(canvas);
    }

    private void drawOvalAndArrow(Canvas canvas){

        //create a path to draw on

        //create an invisible oval. the oval is for "behind the scenes" ,to set the path´
        //area. Imagine this is an egg behind your circles. the circles are in the middle of this egg
        RectF arrowOval = new RectF();
        arrowOval.set(75,
                80,
                canvas.getWidth()-80,
                canvas.getWidth()-80);


        //main circular path
        arrowPath.addArc(arrowOval,128,282);
        canvas.drawPath(arrowPath,pathPaint);


        //draw circles
        float centerWidth = canvas.getWidth()/4 - 60; //get center x of display
        float centerHeight = canvas.getHeight()/2 - 85; //get center y of display
        float circleRadius = 65; //set radius

        canvas.drawCircle(centerWidth , centerHeight , circleRadius, circlePaint);

        float textCenterWidth = canvas.getWidth()/4 + 20 ; //get center x of display
        float textCenterHeight = canvas.getHeight()/2 - 85; //get center y of display

        canvas.drawText("16",textCenterWidth,textCenterHeight,textPaint);
        canvas.drawText("17",textCenterWidth-45,textCenterHeight - 90,textPaint);
        canvas.drawText("18",textCenterWidth - 90,textCenterHeight - 180,textPaint);
//        canvas.drawText("19",textCenterWidth,textCenterHeight,textPaint);
//        canvas.drawText("20",textCenterWidth,textCenterHeight,textPaint);
//        canvas.drawText("21",textCenterWidth,textCenterHeight,textPaint);
//        canvas.drawText("22",textCenterWidth,textCenterHeight,textPaint);
//        canvas.drawText("23",textCenterWidth,textCenterHeight,textPaint);
//        canvas.drawText("24",textCenterWidth,textCenterHeight,textPaint);
//        canvas.drawText("25",textCenterWidth,textCenterHeight,textPaint);
//        canvas.drawText("26",textCenterWidth,textCenterHeight,textPaint);
//        canvas.drawText("27",textCenterWidth,textCenterHeight,textPaint);
//        canvas.drawText("28",textCenterWidth,textCenterHeight,textPaint);
//        canvas.drawText("29",textCenterWidth,textCenterHeight,textPaint);
//        canvas.drawText("30",textCenterWidth,textCenterHeight,textPaint);
        //draw the path

    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float x = event.getX();
        float y = event.getY();
        return true;

    }

}