Android——自定义环形音量调节控件

今天同样是练习自定义View的一天，今天实现环形音量调节控件，下滑增大音量值，上滑减小音量。
然后里面还做了一点仪表盘绘制的扩展，代码在注释里面。
attrs.xml

 <declare-styleable name="CircleVolumeView">
        <attr name="choiceColor" format="color|reference" />
        <attr name="defaultColor" format="color|reference" />
        <attr name="maxVolume" format="integer"/>
        <attr name="curVolume" format="integer"/>
        <attr name="radius" format="dimension|reference"/>
        <attr name="circleWidth" format="dimension|reference"/>
        <attr name="intervalW" format="dimension|reference"/>
        <attr name="arcCount" format="integer"/>
        <attr name="centerImg" format="reference"/>
    </declare-styleable>

CircleVolumeView

public class CircleVolumeView extends View {
    private static final String TAG = CircleVolumeView.class.getSimpleName();
    private Paint paint;
    // 未选中音量颜色
    private int unChoiceVolumeColor;
    // 选中音量颜色
    private int choiceVolumeColor;
    // 当前音量
    private int currentVolume;
    // 最大音量  圆环个数
    private int maxVolume;
    // 半径
    private float radius;
    // 厚度
    private float circleWidth;
    //圆环间隔
    private float intervalW;
    //中间img
    private Drawable centerImg;

    public CircleVolumeView(Context context) {
        this(context, null);
    }

    public CircleVolumeView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CircleVolumeView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CircleVolumeView);
        choiceVolumeColor = typedArray.getColor(R.styleable.CircleVolumeView_choiceColor, Color.BLACK);
        unChoiceVolumeColor = typedArray.getColor(R.styleable.CircleVolumeView_defaultColor, Color.WHITE);
        currentVolume = typedArray.getInteger(R.styleable.CircleVolumeView_curVolume, 0);
        maxVolume = typedArray.getInteger(R.styleable.CircleVolumeView_maxVolume, 0);
        radius = typedArray.getDimension(R.styleable.CircleVolumeView_radius, 0);
        circleWidth = typedArray.getDimension(R.styleable.CircleVolumeView_circleWidth, 0);
        intervalW = typedArray.getDimension(R.styleable.CircleVolumeView_intervalW, 0);
        centerImg = typedArray.getDrawable(R.styleable.CircleVolumeView_centerImg);
        typedArray.recycle();

        paint = new Paint();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //圆心
        float cx = getWidth() / 2;
        float cy = getHeight() / 2;
        Log.d(TAG, "cx-> " + cx + "; cy-> " + cy);

//        Bitmap volume = BitmapFactory.decodeResource(getResources(), R.drawable.volume);
        Bitmap volume = ((BitmapDrawable) centerImg).getBitmap();
        canvas.drawBitmap(volume, cx - volume.getWidth() / 2, cy - volume.getHeight() / 2, paint);

        paint.setStyle(Paint.Style.STROKE);//画笔样式:空心
        paint.setStrokeWidth(circleWidth);// 设置圆环的宽度
        paint.setStrokeCap(Paint.Cap.ROUND);// 定义线段断电形状为圆头

        double circum = Math.PI * 2 * radius;
        float intervalAngle = (int) (intervalW / circum * 360);
        float arcAngle = 360 / maxVolume - intervalAngle;
        //仪表盘
//        intervalAngle = 360 / maxVolume - 1;
//        arcAngle = 1;
        Log.d(TAG, " arcAngle-> " + arcAngle + "; intervalAngle-> " + intervalAngle);

        RectF rectF = new RectF(cx - radius, cy - radius, cx + radius, cy + radius);

        paint.setColor(choiceVolumeColor);
        //只画部分圆环
//        for (int i = 0; i < maxVolume - 7; i++) {
//            if (i == currentVolume) {
//                paint.setColor(unChoiceVolumeColor);
//            }
//            canvas.drawArc(rectF, arcAngle - i * (arcAngle + intervalAngle), arcAngle, false, paint);
//        }

        for (int i = 0; i < maxVolume; i++) {
            if (i == currentVolume) {
                paint.setColor(unChoiceVolumeColor);
            }
            canvas.drawArc(rectF, 360 - i * (arcAngle + intervalAngle), arcAngle, false, paint);
        }
    }

    public void addVolume() {
        Log.d(TAG, "addVolume()");
        if (currentVolume >= maxVolume) {
            return;
        }
        currentVolume++;
        invalidate();
    }

    public void minusVolume() {
        Log.d(TAG, "minusVolume()");
        if (currentVolume <= 0) {
            return;
        }
        currentVolume--;
        invalidate();
    }

    float eventY = 0;

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            eventY = event.getY();
        } else if (event.getAction() == MotionEvent.ACTION_UP) {
            Log.d(TAG, "evenY-> " + eventY + " newEventY-> " + event.getY());
            if (event.getY() > eventY) {//move down
                addVolume();
            } else {//move up
                minusVolume();
            }
        }
        return true;
    }
}

main.xml

<com.text.demo.volume.CircleVolumeView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible"
        app:centerImg="@drawable/volume"
        app:choiceColor="@color/white"
        app:circleWidth="10dp"
        app:curVolume="3"
        app:defaultColor="@color/black"
        app:intervalW="18dp"
        app:maxVolume="20"
        app:radius="120dp" />