高效圖片輪播,兩個ImageView實現

發表於2016-04-22

導語

在不少專案中,都會有圖片輪播這個功能,現在網上關於圖片輪播的框架層出不窮,千奇百怪,筆者根據自己的思路,用兩個imageView也實現了圖片輪播,這裡說說筆者的主要思路以及大概步驟,具體程式碼請看這裡,如果覺得好用,請獻上你的star

該輪播框架的優勢

1.檔案少,程式碼簡潔
2.不依賴任何其他第三方庫,耦合度低
3.同時支援本地圖片及網路圖片
4.可修改分頁控制元件位置,顯示或隱藏
5.自定義分頁控制元件的圖片,就是這麼個性
6.自帶圖片快取,一次載入,永久使用
7.效能好,佔用記憶體少,輪播流暢

實際使用

我們先看demo,程式碼如下

執行效果

輪播實現步驟

接下來,筆者將從各方面逐一分析

層級結構

最底層是一個UIView,上面有一個UIScrollView以及UIPageControl,scrollView上有兩個UIImageView,imageView寬高 = scrollview寬高 = view寬高

輪播原理

假設輪播控制元件的寬度為x高度為y,我們設定scrollview的contentSize.width為3x,並讓scrollview的水平偏移量為x,既顯示最中間內容

將imageView新增到scrollview內容檢視的中間位置

接下來使用代理方法scrollViewDidScroll來監聽scrollview的滾動,定義一個列舉變數來記錄滾動的方向

使用KVO來監聽direction屬性值的改變

判斷滾動的方向,當偏移量大於x,表示左移,則將otherImageView加在右邊,偏移量小於x,表示右移,則將otherImageView加在左邊

通過代理方法scrollViewDidEndDecelerating來監聽滾動結束,結束後,會變成以下兩種情況

此時,scrollview的偏移量為0或者2x,我們通過程式碼再次將scrollview的偏移量設定為x,並將currImageView的圖片修改為otherImageView的圖片

那麼我們看到的還是currImageView,只不過展示的是下一張圖片,如圖,又變成了最初的效果

自動滾動

輪播的功能實現了,接下來新增定時器讓它自動滾動,相當簡單

注意

setContentOffset:animated:方法執行完畢後不會呼叫scrollview的scrollViewDidEndDecelerating方法,但是會呼叫scrollViewDidEndScrollingAnimation方法,因此我們要在該方法中呼叫pauseScroll

拖拽時停止自動滾動

當我們手動拖拽圖片時,需要停止自動滾動,此時我們只需要讓定時器失效就行了,當停止拖拽時,重新啟動定時器

載入圖片

實際開發中,我們很少會輪播本地圖片,大部分都是伺服器獲取的,也有可能既有本地圖片,也有網路圖片,那要如何來載入呢?

定義4個屬性
NSArray imageArray:暴露在.h檔案中,外界將要載入的圖片或路徑陣列賦值給該屬性
NSMutableArray images:用來存放圖片的陣列
NSMutableDictionary imageDic:用來快取圖片的字典,key為URL
NSMutableDictionary operationDic:用來儲存下載操作的字典,key為URL

判斷外界傳入的是圖片還是路徑,如果是圖片,直接加入圖片陣列中,如果是路徑,先新增一個佔點陣圖片,然後根據路徑去下載圖片

下載圖片,先從快取中取,如果有,則替換之前的佔點陣圖片,如果沒有,去沙盒中取,如果有,替換佔點陣圖片,並新增到快取中,如果沒有,開啟非同步執行緒下載

監聽圖片點選

當圖片被點選的時候,我們往往需要執行某些操作,因此需要監聽圖片的點選,思路如下

1.定義一個block屬性暴露給外界void(^imageClickBlock)(NSInteger index)
(不會block的可以用代理,或者看這裡
2.設定currImageView的userInteractionEnabled為YES
3.給currImageView新增一個點選的手勢
4.在手勢方法裡呼叫block,並傳入圖片索引

結束語

上面是筆者的主要思路以及部分程式碼,需要原始碼的請前往筆者的github下載,https://github.com/codingZero/XRCarouselView,記得獻上你的星星哦

相關文章