哪個(gè)小可愛(ài)在偷偷的看我~~
偷瞄.gif
前言
以下只提供思路漏隐，其他方向也可適用铃将，我們?cè)诓シ牌鏖_(kāi)發(fā)中碧查，也許我們會(huì)遇到全屏直播時(shí)間移動(dòng)顯示功能，這時(shí)候就會(huì)遇到怎么樣能夠美觀顯示各個(gè)節(jié)目單長(zhǎng)度問(wèn)題邑遏，接下來(lái)講解一下如何計(jì)算，效果圖如下
直播.gif
說(shuō)明
比如cctv1頻道電視直播恰矩，它有已經(jīng)播放完的節(jié)目记盒，正在播放的，以后要播放的外傅，每個(gè)節(jié)目時(shí)間長(zhǎng)度不一樣纪吮，重點(diǎn)來(lái)了（每個(gè)節(jié)目單時(shí)間長(zhǎng)度不一樣，有的時(shí)間可能特別長(zhǎng)萎胰，有的時(shí)間很短）這時(shí)候我們需要把節(jié)目展示到手機(jī)上碾盟，一個(gè)橫向的列表，如果等比例根據(jù)時(shí)間長(zhǎng)度顯示進(jìn)度奥洼，這樣可能發(fā)生的情況是巷疼，一個(gè)屏幕全部展示一個(gè)節(jié)目，這樣就體驗(yàn)很差了，最好的方式是屏幕內(nèi)最多只能展示4個(gè)節(jié)目單嚼沿，長(zhǎng)的多展示點(diǎn)估盘，短的少展示點(diǎn)，差距不大的展示出來(lái)骡尽，如何實(shí)現(xiàn)遣妥，往下看
開(kāi)始一步一步實(shí)現(xiàn)
當(dāng)前已知條件
1、節(jié)目單集合 list
2攀细、我們當(dāng)前已知條件箫踩，每個(gè)節(jié)目單的播放時(shí)長(zhǎng)playTimeLength
3、屏幕長(zhǎng)度大小screenWidth
計(jì)算規(guī)則
我們?cè)O(shè)定屏幕最多展示4（這個(gè)數(shù)字根據(jù)自己的想法進(jìn)行改變）個(gè)節(jié)目單谭贪，只能<=,可以得出境钟，每個(gè)item的寬度最大為screenWidth * 1/4
即：itemWidth=screenWidth * 1/4
那有些節(jié)目時(shí)間長(zhǎng)，有些節(jié)目時(shí)間短俭识，這時(shí)候我們可以想到慨削，在基礎(chǔ)的屏幕1/4下進(jìn)行追加長(zhǎng)度 x
即：itemWidth=screenWidth * 1/4 + x
所以需要求出x的值
接下來(lái)是剖析x的計(jì)算規(guī)則
因?yàn)楣?jié)目單時(shí)間長(zhǎng)短不一，我們可以假設(shè)成套媚，最短的比例可以想象為x=0缚态，長(zhǎng)的遞增，這樣計(jì)算看是否成立
因?yàn)樯婕暗阶疃痰暮妥铋L(zhǎng)的堤瘤，所以需要最短的值和最長(zhǎng)的值
即：找出節(jié)目單集合中 最長(zhǎng)的時(shí)長(zhǎng)：maxTimeLength 最短的時(shí)長(zhǎng)：minTimeLength
因?yàn)閤為額外增加的值玫芦，所以需要一個(gè)比例來(lái)計(jì)算會(huì)更好，當(dāng)前有了最短時(shí)長(zhǎng)和最長(zhǎng)時(shí)間本辐，我們可以比較一下桥帆，當(dāng)前item的時(shí)長(zhǎng)playTimeLength-minTimeLength占maxTimeLength-minTimeLength的比例是多少呢？
即：設(shè)定最短時(shí)長(zhǎng)和最長(zhǎng)時(shí)長(zhǎng)差值為 a=maxTimeLength-minTimeLength
設(shè)定當(dāng)前item的時(shí)長(zhǎng)和最短時(shí)長(zhǎng)差值為b=playTimeLength-minTimeLength
當(dāng)前item所占比例為c=b/a
比例得出了师郑，那根據(jù)這個(gè)比例可以額外調(diào)整一下 x的大小
即：x=c*z
z的值其實(shí)可以隨便給值了环葵，我們可以看下界面效果給值，根據(jù)屏幕的大小找一個(gè)比例給會(huì)比較合適
即：z=screenWidth*5/12 (屏幕的5/12可以調(diào)整)
當(dāng)然宝冕，有些值都是可以根據(jù)實(shí)際情況動(dòng)態(tài)調(diào)整的张遭，如界面最多展示4份， 屏幕的5/12 地梨，根據(jù)實(shí)際情況進(jìn)行調(diào)整
總結(jié)
itemWidth = screenWidth * 1/4 + (playTimeLength-minTimeLength/maxTimeLength-minTimeLength) * screenWidth*5/12
進(jìn)度條整體長(zhǎng)度 = itemWidth1 + itemWidth2 + itemWidth3 + itemWidth4 + ...
如下圖所示
交互篇
介紹
界面目前包含時(shí)移的名稱菊卷，播放某個(gè)會(huì)自動(dòng)高亮，有進(jìn)度條宝剖，需要自動(dòng)對(duì)應(yīng)到對(duì)應(yīng)點(diǎn)
頁(yè)面交互有以下幾點(diǎn)
1洁闰、點(diǎn)擊時(shí)移名稱
------ ① 點(diǎn)擊時(shí)移節(jié)目
------ ② 點(diǎn)擊直播節(jié)目
2、滑動(dòng)進(jìn)度條
------ ① 滑動(dòng)時(shí)移節(jié)目
------ ② 滑動(dòng)到直播對(duì)應(yīng)點(diǎn)
3万细、自動(dòng)更新
------ ① 自動(dòng)更新時(shí)移節(jié)目
------ ② 自動(dòng)更新直播節(jié)目
前提條件扑眉，后續(xù)計(jì)算會(huì)更方便
1、已知每個(gè)itemBean的startTime，這個(gè)接口中已經(jīng)獲取
2腰素、我們可以在之前步驟提前給每個(gè)itemBean存一個(gè)startWidth聘裁，即開(kāi)始的這個(gè)點(diǎn)之前的itemWidth總和，和startTime一樣弓千，在后續(xù)的使用中直接取值即可衡便，即
startWidth2 = itemWidth1
startWidth3 = itemWidth1 + itemWidth2
startWidth100 = itemWidth1 + ...+ itemWidth99
...
3、獲取當(dāng)前直播的 itemBean
當(dāng)前直播 itemBean = startTime < currentTime < endTime
注：currentTime 為當(dāng)前時(shí)間
4洋访、已知每個(gè)itemBean的playLength镣陕，這個(gè)接口中已經(jīng)獲取
5、當(dāng)前直播總長(zhǎng)度liveLength姻政，進(jìn)度條滑動(dòng)不能超過(guò)此點(diǎn)
liveMaxLength = currentTime ?? ( itemWidth ÷ playLength )
分步驟講解以下幾點(diǎn)呆抑，一點(diǎn)時(shí)移名稱
一、點(diǎn)時(shí)移名稱
① 點(diǎn)擊時(shí)移節(jié)目
目前已知每個(gè) itemBean 的 startWidth
進(jìn)度條進(jìn)度 = startWidth
② 點(diǎn)擊直播節(jié)目
目前已知直播的 itemBean
點(diǎn)擊直播節(jié)目需要將進(jìn)度推到當(dāng)前直播的進(jìn)度
但是目前currentTime的距離還未知汁展，需要推算出比例理肺，再計(jì)算出進(jìn)度
進(jìn)度條進(jìn)度 = 當(dāng)前 (itemBean 的 playWidth ÷ 當(dāng)前 itemBean 的 playLength) ?? (currentTime - itemBean 的 startTime)
二、滑動(dòng)進(jìn)度條
① 滑動(dòng)時(shí)移節(jié)目
滑動(dòng)只知滑動(dòng)的進(jìn)度善镰，這時(shí)候需要通過(guò)距離來(lái)推算出滑動(dòng)到哪個(gè)時(shí)移節(jié)目之下，進(jìn)行高亮展示
我們假設(shè)滑動(dòng)距離為 x
當(dāng)前播放遍歷所有集合年枕，找到 itemBean = startWidth < x < endWidth
即為播放的節(jié)目
② 滑動(dòng)到直播對(duì)應(yīng)點(diǎn)
目前已知直播的 liveLength,最大播放點(diǎn)距離
滑動(dòng)進(jìn)度條不可超過(guò)此點(diǎn)
優(yōu)化炫欺，因?yàn)榛瑒?dòng)到直播這個(gè)點(diǎn)，手指滑動(dòng)可能會(huì)有偏差熏兄，看的滑動(dòng)到直播了品洛，但是px像素很微小，手指覆蓋面積很大摩桶，如果按照liveLength來(lái)算桥状，很難滑到最末尾，所以滑動(dòng)到liveLength可以給個(gè)誤差值硝清，體驗(yàn)會(huì)更好辅斟，可以假設(shè)為 liveLength - 10
三、自動(dòng)更新
① 自動(dòng)更新時(shí)移節(jié)目
當(dāng)我們切換到某個(gè)時(shí)移時(shí)芦拿，播放器播放需要一直更新進(jìn)度士飒，此時(shí)需要我們單獨(dú)起一個(gè)計(jì)時(shí)器，播放器起播蔗崎，既需要打開(kāi)酵幕，播放器停止計(jì)時(shí)器停止
計(jì)時(shí)器只進(jìn)行讀秒操作，每次讀秒缓苛，每一秒都需要換算成距離芳撒，進(jìn)行推動(dòng)進(jìn)度條進(jìn)行調(diào)整
進(jìn)度條的進(jìn)度 = 進(jìn)度條進(jìn)度+ itemBean 的 playWidth ÷ playLength ?? 1000
此時(shí)還需要檢測(cè) 播放器進(jìn)度是否大于 startWidth + playWidth
如果大于，則播放到了下一個(gè)時(shí)移節(jié)目
優(yōu)化，因?yàn)檫@個(gè)一直需要計(jì)算調(diào)整著笔刹，性能開(kāi)銷會(huì)比較大芥备，播放器時(shí)移只在全屏下展示，并且點(diǎn)擊屏幕會(huì)顯示5秒徘熔，5秒后會(huì)自動(dòng)關(guān)閉门躯，所以此計(jì)算展示只在展示之前調(diào)整好即可
② 自動(dòng)更新直播節(jié)目
直播節(jié)目更新需要注意點(diǎn)是，前后臺(tái)后酷师，需要還是定位到直播這一點(diǎn)讶凉，不能根據(jù)計(jì)時(shí)器值來(lái)計(jì)算，所以需要特殊標(biāo)注山孔，一直是直播的時(shí)長(zhǎng)
最終需要整合所有邏輯懂讯，遺漏的待補(bǔ)充
