? ? ?新的一周開始了，今天這篇筆記，是記錄我最近學到的用UICollectionView實現(xiàn)了無限圖片輪播器的方法。我們可以看到，現(xiàn)在市面上，很多iOS app都會用到圖片輪播的技術(shù)，實現(xiàn)出來的效果也是非常不錯，值得記錄下來跟大家分享交流。

? ? ?作為一個iOS開發(fā)者，我們要做一個iOS app，主要就是搞定兩個方面：對接數(shù)據(jù)、搭建界面。數(shù)據(jù)包含網(wǎng)絡(luò)數(shù)據(jù)和模型，通過搭建UI界面，把數(shù)據(jù)展現(xiàn)出來，實現(xiàn)效果。由于，這是我自己做的一個簡易的圖片輪播器，所以準備的數(shù)據(jù)都是本地圖片，如下所示：

01.jpg

02.jpg

03.jpg

? ? ? 隨意的找了3張圖片，分別命名為01、02、03。圖片準備好了，接下來開始搭建界面，如下代碼所示：創(chuàng)建一個新的demo，把3張圖片放到image文件夾中，創(chuàng)建一個繼承于UICollectionView 的 HomeLoopView。

創(chuàng)建一個繼承于UICollectionView的HomeLoopView

首先，在控制器中，加載本地圖片數(shù)據(jù)，如下代碼所示：

通過for循環(huán)加載本地圖片數(shù)據(jù)，保存在數(shù)組中

打印結(jié)果如下：

成功加載保存到數(shù)組中

? ? ? 緊接著，我們要把圖片數(shù)據(jù)對接到CollectionView上面去展示出來，那么我們就要在HomeLoopView創(chuàng)建一個init方法，來對接數(shù)據(jù)，如下代碼所示：

創(chuàng)建一個initWithUrl方法

? ? ? 我們把HomeLoopView添加到ViewController上面，讓它成為控制器的子視圖，如下代碼所示：

? ? ?緊接著，我們創(chuàng)建一個HomeLoopViewFlowlayout，繼承于UICollectionViewFlowLayout，實現(xiàn)一個CollectionView的效果，如下代碼所示：

? ? ? 然后，我們自定義一個UICollectionViewCell，取名為HomeLoopViewCell，由于數(shù)組中存的是二進制圖像，所以，我們需要將二進制圖像轉(zhuǎn)化為圖像，如下代碼所示：

collectionviewCell的frame是根據(jù)之前的layout已經(jīng)確定好的！

? ? ? 緊接著，我們在LoopView中引用Layout和Cell的頭文件名，同時注冊一個cellID,讓LoopView遵守CollectionView的數(shù)據(jù)源方法和代理方法。

讓HomeLoopView獨立的處理輪播器相關(guān)的所有代碼邏輯

ok，我們接下來來實現(xiàn)無限輪播效果。遵守代理和數(shù)據(jù)源方法，注冊cell。

默認位置為第二組的第一張圖片，安排任務(wù)在主線程上面執(zhí)行

我們假設(shè)numberOfItemsInSection 有2組：

一組有3張圖片，現(xiàn)在有2組，程序運行時，默認位置為第二組的第一張照片。

取模是為了防止數(shù)組越界

? ? ?以上的代碼寫完之后，運行程序，可以實現(xiàn)滾到第一組的第一張圖片，和第二組的最后一張圖片，還沒有達到我們無限的輪播的效果，所以，我們必須要通過代理方法，監(jiān)聽圖片的偏移量，如果偏移量為0，就讓它的偏移量為_imgUrls.count，否則就為_imgUrls.count-1，如下所示：

最終實現(xiàn)的效果：

補充：現(xiàn)在有一些圖片輪播器，左右滾動圖片的時候，滾著滾著就會出現(xiàn)卡頓現(xiàn)象，這樣的用戶體驗不太好，不妨可以試試，擴大數(shù)據(jù)源的數(shù)據(jù)，果斷搞個100組。