作業#52 無限輪播的圖片

目的：練習利用CollectionView製作出能夠無限輪播的分頁圖片

這次要練習製作出無限輪播的分頁圖片，試著用CollectionView來達成，因為CollectionView也包含了ScrollView且製作起來其實是比較好用的，所以一起來試試看作出能夠無限輪播的功能吧！

原理

我希望能夠做出滑動換頁的無限輪播功能，而不是直接切換的畫面，所以必須要有滑動動畫，但是有些滑動動畫在最後一頁要切換到第一頁的時候會有往前跑回去的動畫，這不是我想要的動畫感

所以製作的原理的是這樣，在最後一頁做出一個跟第一頁一模一樣的畫面來銜接第一頁，銜接的過程不要動畫然後無限的輪播下去

CollectionViewController

為了方便我先直接用CollectionViewController去製作，然後自訂一個類別

FlowLayout

先設定CollectionView的item在CollectionView的排版，我先讓他跟畫面等大且每個圖片中間沒有間隔，並且在viewDidLoad的時候使用這個function

CollectionViewDataSource

顯示在CollectionView上的資料用陣列去表示，資料內跟剛剛上述的原理一樣，在最後加上一個銜接第一頁一模一樣的假資料，變數都設定好後就可以告訴CollectionViewDataSource要顯示的東西

let numberArray = ["1","2","3","4","5","1"]

自動輪播

來到最重要的環節讓他自動輪播起來，每段固定時間讓他自動做某些事情我們可以使用Timer，讓他固定時間執行某段程式

1. 先聲明一個變數index去計數
2. 在一開始讓他+=1，這樣在剛開始時就不用1號畫面重複停頓比較久
3. 接著判斷index我們目前所在的畫面是否是最後一頁也就長得跟1號一模一樣的畫面，如果不是就正常滑動，我們可以用collectionView.scrollToItem讓他滑動到我們指定的item，而且還能設定是否需要動畫滑動
4. 最後如果滑動到最後一頁了，就直接不用動畫跳回1號畫面整個銜接起來，最後再呼叫一次本身這個function，這樣才能再馬上+=1讓他下一秒馬上顯示第二個畫面

畫面

參考連結：

Day29-使用CollectionView來實作廣告自動輪播 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

#127 無限循環和自動輸播分頁圖片

GitHub連結：

GitHub - PogaHuang/Homework52Banner