最简单的自定义视频播放进度条

前言：之前有个需求是做一个播放的进度条，于是我在网上查找了一些文章，发现最终还是出入较大，没办法，还是自己写吧。

先贴2张效果图：

当然了，我们产品的要求可不是这么简单，得是进度条的左上角显示播放视频的名称，右上角显示播放的总时长。但实现到这一步了，其他那2个需求就太简单了。

难点嘛，你们看了设计图可能觉得没难点，但是当时对我来说就有一个难点，那就是绘制的字体在提示框的中间，查询了一些文章才做成最终效果。

绘制文字的代码如下：

 private void drawProgressText2(Canvas canvas){textRect.left = (int) moveDistance;textRect.top = paintWidth+progressMarginTop+triangleHeight;textRect.right = (int) (tipWidth + moveDistance);textRect.bottom = tipHeight+paintWidth+progressMarginTop+triangleHeight;Paint.FontMetricsInt fontMetrics = textPaint.getFontMetricsInt();int baseline = (textRect.bottom + textRect.top - fontMetrics.bottom - fontMetrics.top) / 2;//文字绘制到提示框的中心位置canvas.drawText(progressText, textRect.centerX(), baseline, textPaint);}

其中：moveDistance 表示提示框的最左边的值；paintWidth表示绘制进度条的宽度，progressMarginTop 表示整个提示框距离进度条的距离，triangleHeight表示绘制小三角指示的高度；tipWidth 表示提示框的宽度啦。还有一点设置绘制文字的piant d的setTextAlign(Paint.Align.CENTER)，这样文字就居中显示啦。

然后就是绘制小三角，代码如下：

 private void drawTriangle2(Canvas canvas) {path.moveTo(moveDistance + tipWidth / 2, paintWidth+progressMarginTop);path.lineTo(moveDistance + tipWidth / 2-triangleHeight/2, paintWidth+progressMarginTop+triangleHeight);path.lineTo(moveDistance + tipWidth / 2+triangleHeight/2, paintWidth+progressMarginTop+triangleHeight);canvas.drawPath(path, tipPaint);path.reset();}

这个就没啥好说的，就是先设定三角顶尖的位置，然后分别向左、右绘制一条直线，设置paint 的 style 为 Paint.Style.FILL就填满了小三角。

然后是绘制圆角矩形，有现成的api调用：

private void drawRoundRect2(Canvas canvas) {rectF.set(moveDistance, paintWidth+progressMarginTop+triangleHeight, tipWidth + moveDistance, paintWidth+progressMarginTop+triangleHeight+tipHeight);canvas.drawRoundRect(rectF, roundRectRadius, roundRectRadius, tipPaint);}

这个很简单就不BB了，最后是画进度条，先画一个背景，然后画进度。

 private void drawProgress2(Canvas canvas){canvas.drawLine(getPaddingLeft(), 0, getWidth(), 0, bgPaint);canvas.drawLine(getPaddingLeft(), 0, currentProgress, 0, progressPaint);}

然后就是模拟动画了：

private void  initAnimation(){progressAnimator = ValueAnimator.ofFloat(0, mProgress);progressAnimator.setDuration(10*1000);progressAnimator.setStartDelay(500);progressAnimator.setInterpolator(new LinearInterpolator());progressAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator valueAnimator) {float value = (float) valueAnimator.getAnimatedValue();
//                progressText = String.valueOf((int)value);progressText = getTime((int)value);//把当前百分比进度转化成view宽度对应的比例currentProgress = value * mViewWidth / mProgress;//移动进度提示框，只有当前进度到提示框中间位置之后开始移动，//当进度框移动到最右边的时候停止移动，但是进度条还可以继续移动//moveDis是tip框移动的距离if (currentProgress >= (tipWidth / 2) &&currentProgress <= (mViewWidth - tipWidth / 2)) {moveDistance = currentProgress - tipWidth / 2;}invalidate();}});progressAnimator.start();}

这里面都解释清楚了，最后记得设置 mProgress 这个变量额值：

/*** 设置最大进度* @param progress*/public void setProgress(int progress){mProgress = progress;initAnimation();}

好了，就说到这里了，有问题欢迎指正。

最简单的自定义视频播放进度条相关推荐

android自定义seekbar,Android自定义SeekBar实现视频播放进度条
本文实例为大家分享了Android实现视频播放进度条的具体代码,供大家参考,具体内容如下首先来看一下效果图,如下所示: 其中进度条如下: 接下来说一说我的思路,上面的进度拖动条有自定义的Thumb, ...
Android中用图片自定义一个进度条（实现蒙板效果）
问题概述对于进度条我相信大家不陌生,这里我就不再多说什么了.因为这个不是重点.我们要说的是如何去自定义一个不一样的进度条.这里用到两张图片(背景和前景),其实是三张(背景.前景和蒙图).当我们的蒙图 ...
Android 自定义View，自定义属性－－自定义圆形进度条（整理）
很多的时候,系统自带的View满足不了我们的功能需求,那么我们就需要自定义View来满足我们的需求自定义View时要先继承View,添加类的构造方法,重写父类View的一些方法,例如onDraw,为 ...
android自定义带进度条的圆形图片
前言:在项目听新闻的改版中需要实现环绕圆形新闻图片的进度条功能,作为技术预备工作我就去看了一些网上的相关的原理,做了一个自定义带进度条的圆形图片的demo,并将这个实现写成文章发布出来,谁需要了可以进 ...
Android自定义半圆进度条半圆渐变色进度条带指示半圆开口大小可自由修改
Android自定义半圆进度条半圆渐变色进度条带指示半圆开口大小可自由修改首先我们来看下效果图不同的开口大小只需要修改一个参数即可半圆1: 半圆2: 半圆3: 如果是你想要的效果,就直接滑动 ...
自定义圆形进度条自定义倒计时进度条
自定义圆形进度条自定义倒计时进度条版权声明:转载必须注明本文转自严振杰的博客: http://blog.csdn.net/yanzhenjie1003 此控件源码已开源到Github:https: ...
Unity实现类似于苹果视频播放器视频播放进度条及声音进度条拖拽功能
Unity实现类似于苹果视频播放器视频播放进度条及声音进度条拖拽功能前言我在之前的博客里介绍过关于VideoPlayer的简单使用流程,之前一直想研究下videoPlayer中的使用进度条控制视频 ...
QT自定义圆形进度条
以下是一个简单的示例,展示如何创建一个自定义的圆形进度条控件. 1.创建一个新的Qt控件类,继承QProgressBar类.在该类的头文件中添加以下代码: class CircularProg ...
android 环形时间显示_Android_Android实现自定义圆形进度条，今天无意中发现一个圆形进度 - phpStudy...
Android实现自定义圆形进度条今天无意中发现一个圆形进度,想想自己实现一个,如下图: 基本思路是这样的: 1.首先绘制一个实心圆 2.绘制一个白色实心的正方形,遮住实心圆 3.在圆的中心动态绘制 ...

最简单的自定义视频播放进度条

最简单的自定义视频播放进度条相关推荐

最新文章

热门文章