Scroller實現(xiàn)長圖自動滾動播放媳握,仿星光直播個人主頁

最近閑來無事,就四處轉(zhuǎn)轉(zhuǎn)蛾找,這看看球,那看看腿晦雨,無意中看到星光直播個人主頁一個設(shè)計隘冲,這種需求我們在開發(fā)中很常見,我們自己圖片大都是手機(jī)拍的奥邮,分辨率自然就跟手機(jī)一樣罗珍,但是展示下來總不能把整個頁面都占據(jù)吧,但是背景的地就給那么大地方蘸朋,解決的方案無非就是等比例縮小扣唱,然后剪裁,其實體驗不是很好噪沙,我好好的一張圖就給我顯示那么點正歼,所以這個需求就出現(xiàn)了,我的圖是長圖局义,而且給顯示的地方就是一小條,我還要看全部贞奋,那就能讓她自動滾動了。先看一下效果圖:

ezgif.com-resize.gif

(注:這個效果我也是醉了特愿,實際效果很順滑的勾缭,哎,估計是我錄屏和轉(zhuǎn)GIF方式有瑕疵吧)

至于實現(xiàn)方式毒嫡,其實有很多種幻梯,想法不一樣,處理方式就不同咬摇,為了讓它看起來獨立一些煞躬,我封裝了一個控件。我先談一下其他的東西在扰。
這個效果給我的第一感覺就是自己會動的scrollview雷客,當(dāng)然這肯定不是,但是他的滑動原理可以借鑒一下佛纫。我們知道呈宇,scrollview局雄、recycleview、viewpager滑動都用到了一個Scroller的東西炬搭,Scroller是干什么用的呢,API上的意思是說它是一個封裝了滾動的類融虽,可以生成你想要的滾動動畫,那它是怎么實現(xiàn)的呢般又。

我們都知道巍佑,view里面scrollTo(),scrollBy()的方法,區(qū)別一個是移動到某個點堕义,一個是移動某段距離脆栋,其實Scroller也是利用了這兩個方法,Scroller里面封裝了一個算法,通過你設(shè)置的起點終點糖耸,以及時長丘薛,計算出當(dāng)前狀態(tài)移動到的位置,我們只需要在view中回調(diào)即可,然后直到你設(shè)置的時間結(jié)束舍扰,什么時候回調(diào)呢


image.png

說的很清楚希坚,為更新child的mScrollX 、mScrollY个束,后面專門提到了Scroller聊疲,當(dāng)然了,這個回調(diào)里面還可以做很多其他的事情阱表,本篇文章只是就事論事。OK下面上代碼


image.png

新建一個類ScrollerLayout繼承自FrameLayout涉馁,實例化Scroller的時候爱致,傳入一個線性的加速器,保證勻速滑動帮坚,


image.png

這個這樣寫是保證只有一個child逢防,child多了跟需求就有悖了,

image.png

關(guān)鍵部分,首先computeScroll回調(diào)方法是在draw的時候調(diào)用的灰署,所以一定要調(diào)用invalidate(),duration的計算可以根據(jù)實際情況調(diào)整溉箕。

其實上面這些都還是可以的悦昵,作者認(rèn)為關(guān)鍵還是在計算distance上,distance是上下浮動的最大距離但指,應(yīng)該是圖片的實際高度減去ScrollerLayout的高度,但是有可能圖片的實際寬度要小于或大于ScrollerLayout的寬度棋凳,所以還得需要做等比例放縮≌瓯酰考慮到網(wǎng)絡(luò)圖片的加載不是實時的所以加了一個標(biāo)志位控制是否需要滾動拍棕,其實不加也是沒有關(guān)系的。

image.png

計算child的實際大小骄噪,然后按照寬作為參照幅垮,重新設(shè)置child的寬高尾组。

image.png

實現(xiàn)一個接口,控制scroll的啟動呵萨,這樣我們這個控件就寫完了,下面看一下應(yīng)用

image.png

我這里都是用的本地的圖片做的測試,如果是網(wǎng)絡(luò)圖片的話忱嘹,可能需要監(jiān)聽加載完成拘悦,其實這些都不是必要的,因為圖片下載完成分苇,加載的時候屁桑,還是會調(diào)用onMeasure,我之所以加這個接口靖秩,主要是考慮到業(yè)務(wù)擴(kuò)展竖瘾,可能它并不需要直接就滾動等等。

一個簡單的小實現(xiàn)准浴,有更好實現(xiàn)的可以在評論中探討一下!!!!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末乐横,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子罐农,更是在濱河造成了極大的恐慌催什,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,839評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件气筋,死亡現(xiàn)場離奇詭異,居然都是意外死亡麸恍,警方通過查閱死者的電腦和手機(jī)搀矫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,543評論 2 382
  • 文/潘曉璐 我一進(jìn)店門瓤球,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人卦羡,你說我怎么就攤上這事∈判剑” “怎么了蝴罪?”我有些...
    開封第一講書人閱讀 153,116評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長虏肾。 經(jīng)常有香客問我欢搜,道長,這世上最難降的妖魔是什么吹埠? 我笑而不...
    開封第一講書人閱讀 55,371評論 1 279
  • 正文 為了忘掉前任缘琅,我火速辦了婚禮廓推,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘呻纹。我一直安慰自己,他們只是感情好雷酪,可當(dāng)我...
    茶點故事閱讀 64,384評論 5 374
  • 文/花漫 我一把揭開白布太闺。 她就那樣靜靜地躺著嘁圈,像睡著了一般。 火紅的嫁衣襯著肌膚如雪钞澳。 梳的紋絲不亂的頭發(fā)上涨缚,一...
    開封第一講書人閱讀 49,111評論 1 285
  • 那天,我揣著相機(jī)與錄音兰吟,去河邊找鬼茂翔。 笑死,一個胖子當(dāng)著我的面吹牛惭嚣,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播悔政,決...
    沈念sama閱讀 38,416評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼晚吞,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了谋国?” 一聲冷哼從身側(cè)響起槽地,我...
    開封第一講書人閱讀 37,053評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎芦瘾,沒想到半個月后捌蚊,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,558評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡旅急,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,007評論 2 325
  • 正文 我和宋清朗相戀三年逢勾,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片溺拱。...
    茶點故事閱讀 38,117評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡逃贝,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出迫摔,到底是詐尸還是另有隱情沐扳,我是刑警寧澤,帶...
    沈念sama閱讀 33,756評論 4 324
  • 正文 年R本政府宣布句占,位于F島的核電站沪摄,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏纱烘。R本人自食惡果不足惜杨拐,卻給世界環(huán)境...
    茶點故事閱讀 39,324評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望擂啥。 院中可真熱鬧哄陶,春花似錦、人聲如沸哺壶。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,315評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽山宾。三九已至至扰,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間资锰,已是汗流浹背敢课。 一陣腳步聲響...
    開封第一講書人閱讀 31,539評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留台妆,地道東北人翎猛。 一個月前我還...
    沈念sama閱讀 45,578評論 2 355
  • 正文 我出身青樓,卻偏偏與公主長得像接剩,于是被迫代替她去往敵國和親切厘。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,877評論 2 345

推薦閱讀更多精彩內(nèi)容