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

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

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

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

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

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

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

通過ScrollView的代理方法，在ScrollView滾動(dòng)結(jié)束的時(shí)候根據(jù)contentOffset更新頁(yè)碼。

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

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

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

這里有兩個(gè)問題：

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

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

解決辦法，小編先留個(gè)懸念，在下面的一篇文章中會(huì)進(jìn)行解答，不要錯(cuò)過。

最新評(píng)論