iOS開發筆記6:圖片輪播及其無限循環效果


     平時APP中的廣告位或者滾動的新聞圖片等用到的就是圖片輪播這種效果,實現方式主要有兩種,一種是ScrollView+ImageView,另一種則是通過CollectionView,今天總結的是ScrollView這種方式。

    1.圖片輪播效果實現

      主要實現思路是:根據圖片總數及寬高設置好ScrollView的大小,每切換一張圖片相當於在ScrollView上進行一個圖片寬度的移動行為,並加入定時器,實現自動輪播。

      如圖所示,設置好ScrollView及PageControl,ScrollView的contentSize根據圖片數量確定,注意啟用pagingEnabled這個屬性,確保整頁移動,同樣pageControl也是根據圖片數量來確定,每一頁代表一張圖片。

      圖片命名采用數字序號方式,方便使用,需要注意的是,pageControl是由0開始的,也就是0對應image1,1對應image2...依次類推

     加載圖片並將准備好的圖片在ScrollView里設置好位置,即將這些圖片一張緊挨着一張排列在ScrollView中。

     通過ScrollView的代理方法,在ScrollView滾動結束的時候根據contentOffset更新頁碼。

     定時器設置,這里設置為每隔2秒滾動更新一次,實際上就是每隔2秒更新一次頁碼,根據頁碼的變化,讓ScrollView跟着移動,每次移動一張圖片的距離

     這里還需要注意的是,由於加入定時器有自動輪播的效果了,會與手動拖拽ScrollView沖突,即手動拖拽ScrollView過程時ScrollView可能自動移動更新圖片了,顯然這種效果是不符合用戶習慣的,這時需要在ScrollView的代理事件中進行處理,即開始拖拽ScrollView時停止定時器,拖拽結束后再開啟定時器。

      那到這里是不是就結束了呢?我們看看效果圖:

      這里有兩個問題:

     (1)首先是移動到最后一張圖片時無法移動了,如果是制作APP的新特性頁面,這樣的滾動效果已經可以了,但如果在廣告位或者是滾動新聞這些場景下這種效果是不夠好的,一般滾動到最后一張圖片時,繼續拖拽都會移動到第一張圖片,實現一種滾動循環效果。

     (2)定時器自動輪播圖片時,確實圖片循環輪播了,但是仔細看會發現,ScrollView是由最后一種圖片位置生硬得拉回到第一張圖片的位置,效果也不夠理想。

      解決辦法下面接着說。

    2.圖片輪播無限循環效果實現

      剛剛說到第一個問題,ScrollView移動到最后一張圖片時無法移動了,這是因為ScrollView已經移動到最后,而圖片又是依次排列,自然也就無法移動。

      解決辦法是,我們換一個思路實現圖片輪播效果,ScrollView上只放三個ImageView,屏幕始終顯示中間的ImageView,左邊和右邊的ImageView分別代表前一張圖片和后一張圖片,屏幕移動的時候,中間的ImageView變化,同時左右兩邊的ImageView也隨之變化,兩種邊界情況:

      (1)當屏幕顯示最后一張圖片時,右邊的ImageView也即下一站圖片應該是最開始的第一張圖片;

      (2)當屏幕顯示最開始的第一張圖片時,左邊的ImageView也即上一張圖片應該是最后一張圖片。

      這樣三個ImageView不斷變化就造成一種圖片輪播無限循環的效果。 參考:http://www.cnblogs.com/kenshincui/p/3913885.html

      相對於之前的效果,有一些改變,主要有:

      (1)ScrollView只需要設置三個ImageView即可,並且默認顯示中間的ImageView

      (2)根據ScrollView的移動情況,迅速變化三個ImageView中圖片數據

 

       (3)ImageView更新完畢后,偷偷把ScrollView拉回到中間的ImageView位置,這樣視覺效果上就實現了無限循環的效果

 

      效果圖:

 

      但是,這里在加入定時器后實現圖片輪播自動循環時遇到了問題,主要是初始化顯示第一張圖片與根據定時器設置自動移動ScrollView有一些沖突,在code4App上找到其他人一個工程,采用的思路相同,單獨封裝了ScrollView進行處理,已經解決該問題。

可參考:http://code4app.com/ios/AdScrollerView/54955a78933bf0f2168b45b4

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM