Infinite Scroll

輪播常常被應用在很多不同的地方,最常看到的就是熱門新聞、熱門商品之類的。但如果滑到底的時候怎麼辦?通常都會從第一個重新開始,那下面就開始介紹使用Scroll View設計出來的無限輪播。

在這邊我使用一個 UIView 包含著 UIScrollView,UIScrollView 包含著兩個UIImageView:

在這邊要注意的是 currentImage 所對應的 x、y 軸並不是 ScrollView 的 bounds,而是 ScrollView 的 contentSize。

現在我們有了兩個ImageView,接下來要做的是判斷滑動的方向,然後決定 nextImage 的位置與內容:

在 class 中新增 direction 的變數,並且在改變時決定 nextImage 的內容與位置,與 currentImage 一樣,x、y 軸並不是參考 scrollView 的 bounds ,而是 contentSize。

接下來要在滑動的時候改變 direction ,這時候要呼叫 UIScrollViewDelegate 中的 scrollViewDidScroll 來決定滑動的方向:

contentOffset是 ScrollView 顯示範圍原點相對於 ScrollView 滾動範圍原點的座標。

做到這邊應該就可以正常的滾動 ScrollView 去變換圖片,但是還不能夠無限輪播,因為 ScrollView 範圍只有三倍 View 的寬,滑到底之後就不能再往下一張進行,所以要在每一次滑動結束的時候重置 ScrollView 的位置及 currentImage 中的圖:

現在就能夠完整呈現無限輪播的功能

上面介紹的無限輪播只是一種比較簡單的方式,當然還有很多種不同的方式可以做出相同的功能,像是 collectionView 也有方法能夠做出來,這就要請各位多多研究,如果有錯誤或是問題,可以留言讓大家一起討論!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.