哪个小可爱在偷偷的看我~~
偷瞄.gif
前言
以下只提供思路，其他方向也可适用，我们在播放器开发中，也许我们会遇到全屏直播时间移动显示功能，这时候就会遇到怎么样能够美观显示各个节目单长度问题，接下来讲解一下如何计算，效果图如下
直播.gif
说明
比如cctv1频道电视直播，它有已经播放完的节目，正在播放的，以后要播放的，每个节目时间长度不一样，重点来了（每个节目单时间长度不一样，有的时间可能特别长，有的时间很短）这时候我们需要把节目展示到手机上，一个横向的列表，如果等比例根据时间长度显示进度，这样可能发生的情况是，一个屏幕全部展示一个节目，这样就体验很差了，最好的方式是屏幕内最多只能展示4个节目单，长的多展示点，短的少展示点，差距不大的展示出来，如何实现，往下看
开始一步一步实现
当前已知条件
1、节目单集合 list
2、我们当前已知条件，每个节目单的播放时长playTimeLength
3、屏幕长度大小screenWidth
计算规则
我们设定屏幕最多展示4（这个数字根据自己的想法进行改变）个节目单，只能<=,可以得出，每个item的宽度最大为screenWidth * 1/4
即：itemWidth=screenWidth * 1/4
那有些节目时间长，有些节目时间短，这时候我们可以想到，在基础的屏幕1/4下进行追加长度 x
即：itemWidth=screenWidth * 1/4 + x
所以需要求出x的值
接下来是剖析x的计算规则
因为节目单时间长短不一，我们可以假设成，最短的比例可以想象为x=0，长的递增，这样计算看是否成立
因为涉及到最短的和最长的，所以需要最短的值和最长的值
即：找出节目单集合中 最长的时长：maxTimeLength 最短的时长：minTimeLength
因为x为额外增加的值，所以需要一个比例来计算会更好，当前有了最短时长和最长时间，我们可以比较一下，当前item的时长playTimeLength-minTimeLength占maxTimeLength-minTimeLength的比例是多少呢？
即：设定最短时长和最长时长差值为 a=maxTimeLength-minTimeLength
设定当前item的时长和最短时长差值为b=playTimeLength-minTimeLength
当前item所占比例为c=b/a
比例得出了，那根据这个比例可以额外调整一下 x的大小
即：x=c*z
z的值其实可以随便给值了，我们可以看下界面效果给值，根据屏幕的大小找一个比例给会比较合适
即：z=screenWidth*5/12 (屏幕的5/12可以调整)
当然，有些值都是可以根据实际情况动态调整的，如界面最多展示4份， 屏幕的5/12 ，根据实际情况进行调整
总结
itemWidth = screenWidth * 1/4 + (playTimeLength-minTimeLength/maxTimeLength-minTimeLength) * screenWidth*5/12
进度条整体长度 = itemWidth1 + itemWidth2 + itemWidth3 + itemWidth4 + ...
如下图所示
itemWidth.jpg
交互篇
介绍
界面目前包含时移的名称，播放某个会自动高亮，有进度条，需要自动对应到对应点
页面交互有以下几点
1、点击时移名称
------ ① 点击时移节目
------ ② 点击直播节目
2、滑动进度条
------ ① 滑动时移节目
------ ② 滑动到直播对应点
3、自动更新
------ ① 自动更新时移节目
------ ② 自动更新直播节目
前提条件，后续计算会更方便
1、已知每个itemBean的startTime，这个接口中已经获取
2、我们可以在之前步骤提前给每个itemBean存一个startWidth，即开始的这个点之前的itemWidth总和，和startTime一样，在后续的使用中直接取值即可，即
startWidth2 = itemWidth1
startWidth3 = itemWidth1 + itemWidth2
startWidth100 = itemWidth1 + ...+ itemWidth99
...
3、获取当前直播的 itemBean
当前直播 itemBean = startTime < currentTime < endTime
注：currentTime 为当前时间
4、已知每个itemBean的playLength，这个接口中已经获取
5、当前直播总长度liveLength，进度条滑动不能超过此点
liveMaxLength = currentTime ✖️ ( itemWidth ÷ playLength )
分步骤讲解以下几点，一点时移名称
一、点时移名称
① 点击时移节目
目前已知每个 itemBean 的 startWidth
进度条进度 = startWidth
② 点击直播节目
目前已知直播的 itemBean
点击直播节目需要将进度推到当前直播的进度
但是目前currentTime的距离还未知，需要推算出比例，再计算出进度
进度条进度 = 当前 (itemBean 的 playWidth ÷ 当前 itemBean 的 playLength) ✖️ (currentTime - itemBean 的 startTime)
二、滑动进度条
① 滑动时移节目
滑动只知滑动的进度，这时候需要通过距离来推算出滑动到哪个时移节目之下，进行高亮展示
我们假设滑动距离为 x
当前播放遍历所有集合，找到 itemBean = startWidth < x < endWidth
即为播放的节目
② 滑动到直播对应点
目前已知直播的 liveLength,最大播放点距离
滑动进度条不可超过此点
优化，因为滑动到直播这个点，手指滑动可能会有偏差，看的滑动到直播了，但是px像素很微小，手指覆盖面积很大，如果按照liveLength来算，很难滑到最末尾，所以滑动到liveLength可以给个误差值，体验会更好，可以假设为 liveLength - 10
三、自动更新
① 自动更新时移节目
当我们切换到某个时移时，播放器播放需要一直更新进度，此时需要我们单独起一个计时器，播放器起播，既需要打开，播放器停止计时器停止
计时器只进行读秒操作，每次读秒，每一秒都需要换算成距离，进行推动进度条进行调整
进度条的进度 = 进度条进度+ itemBean 的 playWidth ÷ playLength ✖️ 1000
此时还需要检测 播放器进度是否大于 startWidth + playWidth
如果大于，则播放到了下一个时移节目
优化，因为这个一直需要计算调整着，性能开销会比较大，播放器时移只在全屏下展示，并且点击屏幕会显示5秒，5秒后会自动关闭，所以此计算展示只在展示之前调整好即可
② 自动更新直播节目
直播节目更新需要注意点是，前后台后，需要还是定位到直播这一点，不能根据计时器值来计算，所以需要特殊标注，一直是直播的时长
最终需要整合所有逻辑，遗漏的待补充
网友评论