最近閑來無事,就四處轉(zhuǎn)轉(zhuǎn)蛾找,這看看球,那看看腿晦雨,無意中看到星光直播個人主頁一個設(shè)計隘冲,這種需求我們在開發(fā)中很常見,我們自己圖片大都是手機(jī)拍的奥邮,分辨率自然就跟手機(jī)一樣罗珍,但是展示下來總不能把整個頁面都占據(jù)吧,但是背景的地就給那么大地方蘸朋,解決的方案無非就是等比例縮小扣唱,然后剪裁,其實體驗不是很好噪沙,我好好的一張圖就給我顯示那么點正歼,所以這個需求就出現(xiàn)了,我的圖是長圖局义,而且給顯示的地方就是一小條,我還要看全部贞奋,那就能讓她自動滾動了。先看一下效果圖:
(注:這個效果我也是醉了特愿,實際效果很順滑的勾缭,哎,估計是我錄屏和轉(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)呢
說的很清楚希坚,為更新child的mScrollX 、mScrollY个束,后面專門提到了Scroller聊疲,當(dāng)然了,這個回調(diào)里面還可以做很多其他的事情阱表,本篇文章只是就事論事。OK下面上代碼
新建一個類ScrollerLayout繼承自FrameLayout涉馁,實例化Scroller的時候爱致,傳入一個線性的加速器,保證勻速滑動帮坚,
這個這樣寫是保證只有一個child逢防,child多了跟需求就有悖了,
關(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)系的。
計算child的實際大小骄噪,然后按照寬作為參照幅垮,重新設(shè)置child的寬高尾组。
實現(xiàn)一個接口,控制scroll的啟動呵萨,這樣我們這個控件就寫完了,下面看一下應(yīng)用
我這里都是用的本地的圖片做的測試,如果是網(wǎng)絡(luò)圖片的話忱嘹,可能需要監(jiān)聽加載完成拘悦,其實這些都不是必要的,因為圖片下載完成分苇,加載的時候屁桑,還是會調(diào)用onMeasure,我之所以加這個接口靖秩,主要是考慮到業(yè)務(wù)擴(kuò)展竖瘾,可能它并不需要直接就滾動等等。
一個簡單的小實現(xiàn)准浴,有更好實現(xiàn)的可以在評論中探討一下!!!!