平時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