自定義圓形progressbar 加 音量控制自定義view
阿新 • • 發佈:2019-01-03
一、自定義一個漂亮的圓形progressbar
1、先分析圓環的組成,兩個重疊圓環、寬度、個數、間隔、顏色。
private void drawOval(Canvas canvas) {
int center = getWidth() / 2;
int radius = center - mCircleWidth / 2;
//mCount是圓環共多少塊,mSplitSize是每塊的間隔,itemSize是每塊對應的角度
float itemSize = (360 * 1.0f - mCount * mSplitSize) / mCount;
//圓的大小
RectF oval = new RectF(center - radius, center - radius, center + radius, center + radius);
mPaintFirst.setColor(mFirstColor);
//畫第一個灰色的圓環
for (int i = 0; i < mCount ; i++) {
canvas.drawArc(oval, (i) * (itemSize + mSplitSize) - 90 , itemSize, false, mPaintFirst);
}
//採用掃描漸變再選擇-90°
SweepGradient sweepGradient = new SweepGradient(center,center,colorArray,null);
matrix.setRotate(-90,center,center);
sweepGradient.setLocalMatrix(matrix);
mPaintSecond.setShader(sweepGradient);
mPaintSecond.setShadowLayer(10, 10, 10, Color.RED);
//畫第二個圓環
for (int i = 0; i < mCurrentCount; i++) {
canvas.drawArc(oval, (i) * (itemSize + mSplitSize) - 90 , itemSize, false, mPaintSecond);
}
}
2、畫文字
private void drawText(Canvas canvas) {
float textWidth = textPaint.measureText(mCurrentCount*100/mCount+"%");
int textHeight = (int) Math.ceil(textPaint.getFontMetrics().descent - textPaint.getFontMetrics().ascent+2);
canvas.drawText(mCurrentCount * 100 / mCount + "%", getWidth() / 2 - textWidth / 2, getHeight() / 2 + textHeight / 4, textPaint);
}
3、設定滑動增減音量,設定音量監聽
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
downY = (int) event.getY();
break;
case MotionEvent.ACTION_UP:
int upY = (int) event.getY();
if (downY > upY) {
up();
} else {
down();
}
break;
}
return true;
}
private void down() {
mCurrentCount--;
if (mCurrentCount < 0) {
mCurrentCount = 0;
}
changeVolume();
}
private void up() {
mCurrentCount++;
if (mCurrentCount > mCount - spaceCount) {
mCurrentCount = mCount - spaceCount;
}
changeVolume();
}
public void setProgress(int progress){
float f = mCount*1.0f/100;
mCurrentCount = (int) (f*progress);
invalidate();
}
private void changeVolume() {
if (listener != null) {
listener.volumeChange(mCurrentCount);
}
postInvalidate();
}
public interface OnVolumeChangeListener {
void volumeChange(int level);
}
private OnVolumeChangeListener listener;
public void setOnVolumeChangeListener(OnVolumeChangeListener listener) {
this.listener = listener;
}
二、自定義view音量控制
mPaint1.setStrokeCap(Paint.Cap.ROUND);//設定圓弧的圓角
private void drawOval(Canvas canvas, int center, int radius) {
float itemSize = (360 * 1.0f - mCount * mSplitSize) / mCount;
//spaceCount為下方預留幾段空白,計算出總共空白的弧度space
float space = itemSize * spaceCount + mSplitSize * (spaceCount + 1);
//圓的大小
RectF oval = new RectF(center - radius, center - radius, center + radius, center + radius);
mPaint1.setColor(mFirstColor);
//加space/2為了讓空白居中
for (int i = 0; i < mCount - spaceCount; i++) {
canvas.drawArc(oval, (i) * (itemSize + mSplitSize) + 90 + space / 2, itemSize, false, mPaint1);
}
mPaint.setColor(mSecondColor);
for (int i = 0; i < mCurrentCount; i++) {
canvas.drawArc(oval, (i) * (itemSize + mSplitSize) + 90 + space / 2, itemSize, false, mPaint);
}
}