1.绘制20个方形组合的进度条

• 根据定点坐标和画笔属性绘制
• 根据进度大小来区别画笔颜色，用于显示当前声音进度
• 当前的进度数= 当前音量的2的倍数+当前音量的2的余数
  1.1 . 每个条目的左上的X坐标 = （当前条目数-1 ）*（长方形的宽度+进度条的间隔）+进度条的左边距
  1.2. 每个条目的左上的Y坐标 = 进度条的上边距
  1.3. 每个条目的右上的X坐标 = 每个条目的左上的X坐标 + 长方形的宽度
  1.4. 每个条目的右上的Y坐标 = 进度条的上边距 + 长方形的高度

protected void onDraw(Canvas canvas) {
   super.onDraw(canvas);
   for(int i =1; i <= mTotal; i++) {
      drawRect(i, canvas);
   }
}

private void drawRect(int i, Canvas canvas) {
   int color = i <= mPrecess ? mSelectColor : mBgColor;
   mPaint.setColor(color);
   int startX = getLeft(i);
   canvas.drawRect(getLeft(i), mTop, startX + mRectWidth, mBottom, mPaint);
}

private int getLeft(int i) {
   return (i - 1) * (mRectWidth + space) + mPaddingX;
}

2.监听坐标转化为进度条的条目数

• 监听坐标转化为进度条的条目数 = onTouchEvent监听获取的X坐标 / （长方形的宽度+进度条的间距）+1

private int getIndexByX(float x) {
    int index = (int) (x - mPaddingX);
    if(index <= 0) {
        return 0;
    }
    
    index = index / (space + mRectWidth) + 1;
    
    Log.i(TAG, "getIndexByX x= "+ x + "index = "+index);
    return index;
}

3.监听坐标转化为进度条的条目数

通过 OnProcessListener 接口将当前的进度条目数回调给客户端

public interface OnProcessListener {
    void onProcessChanged(int process);
}

private OnProcessListener mListener;
public void setOnProcessListener(OnProcessListener listener) {
    mListener = listener;
}

4.根据进度条条目数设置声音大小

当前的进度数= 当前音量的2的倍数+当前音量的2的余数

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mContext = getApplicationContext();
    mAudioManager = (AudioManager) mContext.getSystemService(Context.AUDIO_SERVICE);
    mCustomVolumeView = (CustomVolumeView) findViewById(R.id.customVolume);
    mCurrentValume = mAudioManager.getStreamVolume(AudioManager.STREAM_MUSIC);
    mCustomVolumeView.setProcess( mCurrentValume%2 + mCurrentValume/2);
    mCustomVolumeView.setOnProcessListener(listener);
}

private  OnProcessListener listener = new OnProcessListener() {

    @Override
    public void onProcessChanged(int process) {
        mAudioManager.setStreamVolume(AudioManager.STREAM_MUSIC, 2*process, 0);
    }
};

自定义详细代码 CustomVolumeView 类：

private static final int INVALID_X =-1234;
private static final String TAG = CustomVolumeView.class.getSimpleName();
private int mPressXIndex = INVALID_X;

private static final int DEFAULT_TOTAL = 20;
private int mTotal = DEFAULT_TOTAL;

private int mBgColor = 0x80ffffff;
private int mSelectColor = 0xffe13152;

private Rect mRect;
private int mRectWidth = 14;
private int mRectHeight = 30;
private int space = 2;
private int mPrecess = 7;
private int mTop = 10;
private int mBottom = mTop + mRectHeight;
private int mPaddingX = 10;

private Paint mPaint;

public CustomVolumeView(Context context) {
    super(context);
    init();
}

public CustomVolumeView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public CustomVolumeView(Context context, AttributeSet attrs,
        int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

private void init() {
    mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mPaint.setStyle(Style.FILL);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    for(int i =1; i <= mTotal; i++) {
        drawRect(i, canvas);
    }
}

/**
 * 
 * @param i
 * @param canvas
 */
private void drawRect(int i, Canvas canvas) {
    int color = i <= mPrecess ? mSelectColor : mBgColor;
    mPaint.setColor(color);
    int startX = getLeft(i);
    canvas.drawRect(getLeft(i), mTop, startX + mRectWidth, mBottom, mPaint);
}

private int getLeft(int i) {
    return (i - 1) * (mRectWidth + space) + mPaddingX;
}

public void setProcess(int process) {
    this.mPrecess = process;
    
    invalidate();
}

public void setTotal(int total) {
    this.mTotal = total;
    invalidate();
}

@Override
public boolean onTouchEvent(MotionEvent event) {
    int action = event.getAction();
    float x = event.getX();
     
    Log.i(TAG, "event.getX( = " + event.getX());
    switch(action) {
    case MotionEvent.ACTION_DOWN:
        Log.i(TAG,"ACTION_DOWN");
        handleX(x);
        break;
    case MotionEvent.ACTION_MOVE:
        Log.i(TAG,"ACTION_MOVE");
        handleX(x);
        break;
    case MotionEvent.ACTION_UP:
        Log.i(TAG,"ACTION_UP");
        handleX(x);
        break;
    }
    return true;
}

private void handleX(float x) {
    int index = getIndexByX(x);
    
    if (index != mPressXIndex) {
        mPressXIndex = index;
        
        mPrecess = mPressXIndex;
        if(mListener !=null) {
            mListener.onProcessChanged(mPressXIndex);
        }
    }
    invalidate();
}

public interface OnProcessListener {
    void onProcessChanged(int process);
}

private OnProcessListener mListener;
public void setOnProcessListener(OnProcessListener listener) {
    mListener = listener;
}

private int getIndexByX(float x) {
    int index = (int) (x - mPaddingX);
    if(index <= 0) {
        return 0;
    }
    
    index = index / (space + mRectWidth) + 1;
    
    Log.i(TAG, "getIndexByX x= "+ x + "index = "+index);
    return index;
}

效果图如下：

HBJSF{IPGPOB_V(108F@(5Q.png