滑動輪播 實現無限迴圈的ViewPager輪播

2021-10-14 22:10:38 字數 1642 閱讀 4570

我們在做廣告頁的時候偶爾會碰到這樣的需求,就是需要輪播直接無限滑動,那麼這個需求怎麼做呢?我在之前比較投機取巧,用使用的是handler定時去切換,當切換到最後一張就切換回第一張,但是這樣體驗並不是很好,今天我們就來實現一下無限迴圈的viewpager輪播廣告吧,先來看下普通的viewpager輪播怎麼實現,看下效果圖:

回顧一下viewpager的實現過程,實際上只要填充資料來源到介面卡,即可實現,那麼我們先來寫乙個介面卡吧:

smartpageradapter實現比較簡單,都是通用的方法,繼承pageradapter之後實現下列的方法,然後就是具體的**落實:

具體的實現,這裡預置了五張放在list中,並且通過addonpagechangelistener監聽了切換狀態來更新下標的顯示,總體而言viewpager是比較簡單明瞭的,那麼我們現在就要在這個基礎上去實現無限無限輪播了。

實際上和網上大多數的方法一樣,想要實現無限輪播,只要對adapter中的getcount下手就好了,先看我重新修改了的**:

這個介面卡中我一共修改了三個地方,首先就是getcount了,我不返回list的size了,我直接設定為int的最大值,也就是 integer.max_value = 2147483647 ,這樣他就可以無限滑動了,但是這只是我們的下標,我們不可能也建立這麼多view吧,所以我們的view要復用,使用取模的方式獲取真正的下標,就如instantiateitem和destroyitem中一樣,當前的position % size 就得到了真正的下標了,我們為了得到真正的下標,也在onpageselected中增加了取模,這裡就不寫出來了,執行看下效果:

這樣我們就實現了無限滑動了,但是在左滑的時候你就發現劃不過去,這是因為viewpager初始化值為0,那你的count從0開始肯定是不行的,那麼我們需要怎麼做呢?

構思的結果無非就是讓預設值改變,那改變到哪?改變到中間去,我們既然使用了integer.max_value,那麼用他除以2不就是一半了,但是獲得的值有時候不會是0下標,也就是不會為我們真實的第一張圖,那麼就需要我們進行一些改變了。

這裡的寫法就是補漏,假設一半的值處於第三張,那麼我用一半的值減去第三張,不就得到第一張了。這樣我們執行就沒什麼問題了。

好了,總結一下思路吧:

要想實現無限輪播,只需要修改getcount的返回值,並且在需要使用到position的地方進行取模,因為他們的下標已經變化了,為了優化左滑,則將預設index初始在資料來源的中間。

好了,你學會了嗎?

Scoller實現view的滑動

scoller實際上只是記錄了view要滑動到的位置 之後還是呼叫view的scollto或scollby方法進行實際上的view滾動mscroller new scroller context public void startmoveanim int starty,int dy,int dura...

迴圈下標 實現無限迴圈的ViewPager輪播

本文首發我的星球 hi android 閱讀大約五分鐘 我們在做廣告頁的時候偶爾會碰到這樣的需求,就是需要輪播直接無限滑動,那麼這個需求做呢?我在之前比較投機取巧,用使用的是handler定時去切換,當切換到最後一張就切換回第一張,但是這樣體驗並不是很好,今天我們就來實現一下無限迴圈的viewpag...

水平無限迴圈彈幕的實現

在專案實踐中應該有很多場景會用到彈幕,那麼如何實現乙個完美版本的彈幕呢?接下來我們原理加 帶你實現乙個完整的彈幕元件 react版本 水平彈幕的實現有兩種情況 1 當彈幕的個數加起來的寬度不足以覆蓋螢幕的視覺化區域 2 當彈幕的個數加起來的寬度超過螢幕的視覺化區域 針對第一種情況,實現原理很簡單,當...