| 主要步骤 |
|---|
| 1.绘制20个方形组合的进度条 |
| 2.监听坐标转化为进度条的条目数 |
| 3.将条目数监听回调给客户端 |
| 4. 根据进度条条目数设置声音大小 |
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
