繪製音量調節視圖

今天看到一篇自定義音量圖標的，覺得也不錯，自己改改就來用。

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

下面就是我這個繪製的處理

• 分化細節，定義成員

    // 畫筆
    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;
    }

• 下載源碼點這裏