先看效果
play.gif
load.gif
网上开源的进度条很多，效果好，优化好，可是为了学习，还是自己写一个试试。
实习太忙，匆匆忙忙贴上代码，只为抛砖引玉。
在这里把代码分享出来，特别简单，入门自定义View的可以看看，如果有什么不好的请大家指正。
/**
* auther : LiuJiakuo
* e-mail :
* erp :
* date : 2018/8/29 18:49
* desc :
*/
public class SeekBar extends View {
private Context context;
private Paint nonePaint;//播放进度
private Paint progressPaint;//播放进度
private Paint bufferPaint;//缓冲进度
private Path path;
private Paint bubblepaint;//气泡
private int bufferColor;//缓冲颜色
private int progressColor;//播放进度颜色
private int noneColor;//未加载颜色
private int barWidth;//进度条粗
private Bitmap loadBitmap;
private Matrix matrix;
private Rect rect;//进度条可以点击的地方
private int playProgress;
private int bufferProgress;
private float r;//气泡半径
private float h;//三角高度
private float lineR;//圆点
private int loadImgDegrees = 0;
private boolean isSeek = false;//是否在加载
private ProgressListener listener;
public SeekBar(Context context) {
super(context);
init(context);
}
public SeekBar(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init(context);
}
public SeekBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
public void setListener(ProgressListener listener) {
this.listener = listener;
}
/**
* 设置播放进度
*
* @param playProgress 0-100
*/
public void setPlayProgress(int playProgress) {
if (playProgress < 0 || playProgress > 100 || this.playProgress == playProgress || isSeek)
return;
this.playProgress = playProgress;
invalidate();
}
/**
* 设置缓存进度
*
* @param bufferProgress 0-100
*/
public void setBufferProgress(int bufferProgress) {
if (bufferProgress < 0 || bufferProgress > 100 || this.bufferProgress == bufferProgress || isSeek)
return;
this.bufferProgress = bufferProgress;
invalidate();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int width = widthSize;
int height = heightSize;
if (widthMode == MeasureSpec.AT_MOST && heightMode == MeasureSpec.AT_MOST) {
width = getWidth();
height = (int) (lineR * 2 + r + h + 4 + 1);
} else if (widthMode == MeasureSpec.AT_MOST) {
width = getWidth();
height = heightSize;
} else if (heightMode == MeasureSpec.AT_MOST) {
width = widthSize;
height = (int) (lineR * 2 + r + h + 4 + 1);
}
setMeasuredDimension(width, height);
}
private void init(Context context) {
this.context = context;
defaultSize();
path = new Path();
bufferPaint = new Paint();
progressPaint = new Paint();
nonePaint = new Paint();
bubblepaint = new Paint();
bufferPaint.setStyle(Paint.Style.FILL);
bufferPaint.setStrokeCap(Paint.Cap.ROUND);
progressPaint.setStyle(Paint.Style.FILL);
progressPaint.setStrokeCap(Paint.Cap.ROUND);
nonePaint.setStyle(Paint.Style.FILL);
nonePaint.setStrokeCap(Paint.Cap.ROUND);
bubblepaint.setStyle(Paint.Style.FILL);
bufferPaint.setAntiAlias(true);
progressPaint.setAntiAlias(true);
nonePaint.setAntiAlias(true);
bubblepaint.setAntiAlias(true);
bufferPaint.setStrokeWidth(barWidth);
progressPaint.setStrokeWidth(barWidth);
nonePaint.setStrokeWidth(barWidth);
bufferPaint.setColor(bufferColor);
progressPaint.setColor(progressColor);
nonePaint.setColor(noneColor);
bubblepaint.setColor(Color.parseColor("#3A7EEC"));
}
public void setBufferColor(@ColorInt int bufferColor) {
this.bufferColor = bufferColor;
}
public void setProgressColor(@ColorInt int progressColor) {
this.progressColor = progressColor;
}
public void setNoneColor(@ColorInt int noneColor) {
this.noneColor = noneColor;
}
private void defaultSize() {
barWidth = 3;
r = 14;
h = 20;
lineR = 8;
noneColor = Color.parseColor("#999999");
bufferColor = Color.parseColor("#CCCCCC");
progressColor = Color.parseColor("#00EE00");
matrix = new Matrix();
loadBitmap = BitmapFactory.decodeResource(context.getResources(), R.mipmap.ic_load);
matrix.setRotate(loadImgDegrees, loadBitmap.getWidth() >> 1, loadBitmap.getHeight() >> 1);
post(new Runnable() {
@Override
public void run() {
rect = new Rect(0, (int) (r + h), getMeasuredWidth(), (int) (r + h + lineR * 2 + 4));
}
});
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Log.d("TAGTAG", "onDraw: " + bufferProgress);
Log.d("TAGTAG", "onDraw: " + playProgress);
int width = getMeasuredWidth();
float startY = r + h + 4 + lineR;
canvas.drawLine(0, startY, width, startY, nonePaint);
canvas.drawLine(0, startY, width * bufferProgress / 100, startY, bufferPaint);
canvas.drawLine(0, startY, width * playProgress / 100, startY, progressPaint);
bubblepaint.setColor(Color.parseColor("#993A7EEC"));
canvas.drawCircle(width * playProgress / 100, startY, lineR, bubblepaint);
drawBubble(canvas);
}
private void drawBubble(Canvas canvas) {
bubblepaint.setColor(Color.parseColor("#CC3A7EEC"));
int width = getMeasuredWidth();
float startY = r + h;//-3比线高
float pro = width * playProgress / 100;
float sqrt = r / ((float) Math.sqrt(2));
RectF rect = new RectF((pro - r), (startY - h - r), (pro + r), (startY - h + r));
path.reset();
path.moveTo(pro, startY);
path.lineTo(pro + sqrt, sqrt + r);
path.addArc(rect, 45, -270);
path.lineTo(pro - sqrt, sqrt + r);
path.lineTo(pro, startY);
canvas.drawPath(path, bubblepaint);
bubblepaint.setTextSize(14);
bubblepaint.setColor(Color.WHITE);
Paint.FontMetricsInt fontMetricsInt = bubblepaint.getFontMetricsInt();
bubblepaint.setTextAlign(Paint.Align.CENTER);
int baseline = (int) ((rect.bottom + rect.top - fontMetricsInt.bottom - fontMetricsInt.top) / 2);//文字居中，基线算法
if (bufferProgress != 0 && bufferProgress <= playProgress && !isSeek) {
//todo 内存抖动风险
Bitmap bitmap = Bitmap.createBitmap(loadBitmap, 0, 0, loadBitmap.getWidth(), loadBitmap.getHeight(), matrix, true);
canvas.drawBitmap(bitmap, null, rect, nonePaint);
loadImgDegrees += 20;
matrix.setRotate(loadImgDegrees, loadBitmap.getWidth() >> 1, loadBitmap.getHeight() >> 1);
postInvalidateDelayed(160, (int) rect.left, (int) rect.top, (int) rect.right, (int) rect.bottom);
} else {
canvas.drawText(playProgress + "%", rect.centerX(), baseline, bubblepaint);
}
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
if (isPointInRect(new PointF(event.getX(), event.getY()), rect)) {
int x = (int) (event.getX() * 100 / getMeasuredWidth());
seekTo(x);
if (listener != null && !isSeek) {
listener.onPause();
}
isSeek = true;
}
break;
case MotionEvent.ACTION_UP:
if (isSeek) {
isSeek = false;
if (listener != null)
listener.onResume();
}
break;
case MotionEvent.ACTION_MOVE:
if (isSeek) {
int x = (int) (event.getX() * 100 / getMeasuredWidth());
seekTo(x);
}
break;
}
return true;
}
/**
* @param x 0~100
*/
private void seekTo(int x) {
playProgress = x;
invalidate();
if (listener != null)
listener.seekTo(x);
}
public interface ProgressListener {
//0-100
void seekTo(int seek);
void onPause();
void onResume();
}
/**
* 判断这个点有没有在矩形内
*
* @param pointF
* @param targetRect
* @return
*/
private boolean isPointInRect(PointF pointF, Rect targetRect) {
if (pointF.x < targetRect.left) {
return false;
}
if (pointF.x > targetRect.right) {
return false;
}
if (pointF.y < targetRect.top) {
return false;
}
if (pointF.y > targetRect.bottom) {
return false;
}
return true;
}
}