本文實例為大家分享了IOS圖片輪播效果的實現(xiàn)過程，供大家參考，具體內(nèi)容如下

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

1.圖片輪播效果實現(xiàn)

主要實現(xiàn)思路是：根據(jù)圖片總數(shù)及寬高設置好ScrollView的大小，每切換一張圖片相當于在ScrollView上進行一個圖片寬度的移動行為，并加入定時器，實現(xiàn)自動輪播。

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

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

加載圖片并將準備好的圖片在ScrollView里設置好位置，即將這些圖片一張緊挨著一張排列在ScrollView中。

通過ScrollView的代理方法，在ScrollView滾動結束的時候根據(jù)contentOffset更新頁碼。

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

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

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

這里有兩個問題：

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

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

解決辦法，小編先留個懸念，在下面的一篇文章中會進行解答，不要錯過。

最新評論