绘制音量调节视图

今天看到一篇自定义音量图标的，觉得也不错，自己改改就来用。

是不是你想看到的？如果不是，那返回吧~~~~- -!!

下面就是我这个绘制的处理

• 分化细节，定义成员

    // 画笔
    private Paint paint = new Paint();
    // 矩阵
    private Matrix matrix = new Matrix();
    // 音量图标状态
    private Bitmap volumeMute;
    private Bitmap volumeFull;
    private Bitmap volumeNormal;
    // 背景高度
    private int height = 100;
    // 背景宽度
    private int width = 450;
    // 音量个数
    private int count = 15;
    // 一个矩形的长度（实体矩形 + 空隙）
    private float rectLength;
    // 音量高度
    private float rectH;
    // 音量宽度
    private float rectW;
    // 当前音量值
    private int current;
    // 最左侧空隙，这里放了音量图标
    private float leftMargin;

• 加入绘制
  按顺序一步一步来画，先画音量调节的背景，再从左到右，音量图标（这里处理了，显示三种不同状态），接下来，就是画每个音量块 – 每个音量块 == 音量矩形+空隙，代码如下，按步就搬

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 绘制背景颜色
        paint.setColor(getResources().getColor(R.color.back_color));
        canvas.drawRect(0, 0, width, height, paint);

        // 绘制音量图标
        if (current == 0) {
            drawVolIcon(canvas, volumeMute);
        } else if (current < count / 2) {
            drawVolIcon(canvas, volumeNormal);
        } else {
            drawVolIcon(canvas, volumeFull);
        }

        // 绘制没有被选中的白色音量矩形
        paint.setColor(getResources().getColor(R.color.whrite));
        for (int i = current; i < count; i++) {
            canvas.drawRect(leftMargin + i * rectLength, height / 2 - rectH / 2, leftMargin + i * rectLength + rectW,
                    height / 2 + rectH / 2, paint);
        }

        // 绘制被选中的橘黄色音量矩形
        paint.setColor(getResources().getColor(R.color.orange));
        for (int i = 0; i < current; i++) {
            canvas.drawRect(leftMargin + i * rectLength, height / 2 - rectH / 2, leftMargin + i * rectLength + rectW,
                    height / 2 + rectH / 2, paint);
        }
    }


    private void drawVolIcon(Canvas canvas, Bitmap bitmap) {
        float scale = 1.0f;
        int size = Math.min(bitmap.getWidth(), bitmap.getHeight());
        scale = rectH * 1.0f / size;
        // 左测Margin是用于放一些图标
        leftMargin = scale * bitmap.getWidth() + 5;
        // 计算每个音量的长度
        rectLength = (width - leftMargin) / count;
        // 每个音量图，一半为矩形，一半为空隙
        rectW = rectLength / 2;

        matrix.setScale(scale, scale);
        matrix.postTranslate(0, getHeight() / 2 - rectH / 2);
        canvas.drawBitmap(bitmap, matrix, paint);
    }

• 触摸调节变化音量

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
        case MotionEvent.ACTION_UP:
        case MotionEvent.ACTION_MOVE:
            // 当触摸位置在音量矩形之内时，获取当前选中的音量矩形数量
            float x = event.getX();
            float y = event.getY();
            float fillValue = rectLength / 2;
            if ((x > leftMargin && x < count * rectLength + leftMargin)
                    && (y < (height + rectH) / 2 && y > (height - rectH) / 2)) {
                // current = (int) ((event.getX() - (leftMargin)) / (rectLength)) - 1;
                float offset = ((x - leftMargin) % rectLength - fillValue > 0) ? 1.0f : 0.0f;
                current = (int) ((x - leftMargin) / (rectLength) + offset);
                if (onChangeListener != null) {
                    onChangeListener.onChange(current);
                }
                Log.d(TAG, "current:" + current);
            }
            break;
        }
        // 通知界面刷新
        invalidate();
        // 拦截触摸事件
        return true;
    }

• 下载源码点这里