短视频开发app，自定义带进度条的视频播放按钮
具体的代码逻辑都有清楚的注释，可以直接查看代码
public class MusicProgress extends View {
private Context mContext;
private static final int DEFAULT_SIZE = 40;
private static final float HALF = 0.5f;
private static final float ONE_TENTH = 0.1f;
private static final float DEFAULT_START_ANGLE = -90;
private int defaultSize;
private int mWidth;
private int mHeight;
private Paint mBgPaint;
private Paint mProgressPaint;
// 背景颜色和进度条颜色
private int mBgColor;
private int mProgressColor;
// 背景圆
private int radius;
private int circlePoint;
// 播放暂停按钮
private Bitmap mPlayBm;
private Bitmap mPauseBm;
private Bitmap mBitmap;
private Rect mDstRect;
private int mBmOffset;
// 进度条
private RectF mProgressRectF;
private int mProgressWidth;
// 进度条开始结束角度
private float mStartAngle;
private float mSweepAngle;
public MusicProgress(Context context) {
this(context, null);
}
public MusicProgress(Context context,
@Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public MusicProgress(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.mContext = context;
init();
}
private void init() {
defaultSize = dp2px(DEFAULT_SIZE);
mProgressWidth = (int) (defaultSize * ONE_TENTH);
radius = (int) (defaultSize * HALF - mProgressWidth * HALF);
circlePoint = (int) (defaultSize * HALF);
mBgColor = ContextCompat.getColor(mContext, R.color.progress_bg_color);
mProgressColor = ContextCompat.getColor(mContext, R.color.progress_color);
// 暂停、播放按钮的绘制区域
mBmOffset = (int) (defaultSize * HALF * HALF);
mDstRect = new Rect(mBmOffset, mBmOffset,
defaultSize - mBmOffset, defaultSize - mBmOffset);
mPlayBm = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.play);
mPauseBm = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.pause);
// 默认是暂停状态
mBitmap = mPlayBm;
mBgPaint = new Paint();
mBgPaint.setAntiAlias(true);
mBgPaint.setColor(mBgColor);
mProgressPaint = new Paint();
mProgressPaint.setAntiAlias(true);
mProgressPaint.setColor(mProgressColor);
mProgressPaint.setStrokeWidth(mProgressWidth);
mProgressPaint.setStyle(Paint.Style.STROKE);
// 进度条
mProgressRectF = new RectF(0, 0, defaultSize, defaultSize);
this.mStartAngle = DEFAULT_START_ANGLE;
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
this.mWidth = w;
this.mHeight = h;
if (mWidth > 0) {
// 修改进度条宽度
mProgressWidth = (int) (mWidth * ONE_TENTH);
mProgressPaint.setStrokeWidth(mProgressWidth);
// 修改背景圆的半径
radius = (int) (mWidth * HALF - mProgressWidth * HALF);
// 修改圆心
circlePoint = (int) (mWidth * HALF);
// 暂停、播放按钮的绘制区域
mBmOffset = (int) (mWidth * HALF * HALF);
mDstRect = new Rect(mBmOffset, mBmOffset,
mWidth - mBmOffset, mWidth - mBmOffset);
float size = mWidth - mProgressWidth * HALF;
// 进度条
mProgressRectF = new RectF(mProgressWidth * HALF, mProgressWidth * HALF, size, size);
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(getSize(widthMeasureSpec), getSize(heightMeasureSpec));
}
/**
* 获取测量大小
*/
private int getSize(int measureSpec) {
int result;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
if (specMode == MeasureSpec.EXACTLY) {
//确切大小,所以将得到的尺寸给view
result = specSize;
} else if (specMode == MeasureSpec.AT_MOST) {
//默认值为40dp, 此处要结合父控件给子控件的最多大小(要不然会填充父控件),所以采用最小值
result = Math.min(defaultSize, specSize);
} else {
result = defaultSize;
}
return result;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 绘制背景圆
canvas.drawCircle(circlePoint, circlePoint, radius, mBgPaint);
// 绘制播放暂停按钮
canvas.drawBitmap(mBitmap, null, mDstRect, mBgPaint);
// 绘制进度条
canvas.drawArc(mProgressRectF, mStartAngle, mSweepAngle, false, mProgressPaint);
}
/**
* 刷新播放UI.
*/
public void play() {
mBitmap = mPauseBm;
invalidate();
}
/**
* 刷新暂停UI.
*/
public void pause() {
mBitmap = mPlayBm;
invalidate();
}
/**
* 更新进度.
*
* @param startAngle 开始角度
* @param sweepAngle 扫过角度
*/
public void updateProgress(@FloatRange(from = -360f, to = 360f) float startAngle,
@FloatRange(from = 0f, to = 360f) float sweepAngle) {
this.mStartAngle = startAngle;
this.mSweepAngle = sweepAngle;
invalidate();
}
/**
* 更新进度.
*
* @param sweepAngle 扫过角度
*/
public void updateProgress(@FloatRange(from = 0f, to = 360f) float sweepAngle) {
this.mSweepAngle = sweepAngle;
invalidate();
}
private int dp2px(final float dp) {
final float density = mContext.getResources().getDisplayMetrics().density;
return (int) (dp * density + 0.5f);
}
private int px2dp(final float px) {
float scale = mContext.getResources().getDisplayMetrics().scaledDensity;
return (int) (px / scale + 0.5f);
}
}
涉及的资源文件
<color name="progress_bg_color">#7A7A7A</color>
<color name="progress_color">#00F1B7</color>
以上就是短视频开发app，自定义带进度条的视频播放按钮， 更多内容欢迎关注之后的文章