iOS開發筆記6：圖片輪播及其無限迴圈效果，ios筆記

iOS開發筆記6：圖片輪播及其無限迴圈效果，ios筆記

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

    1.圖片輪播效果實現

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

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

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