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