iOS開發之無限輪播廣告圖的實現

前言

我們在開發中經常會有開發廣告輪播圖的需求,在這里講解一種實現方式,只需要使用3個UIImageView實現無限循環的功能。

Demo我放到GitHub上了,有需要的朋友可以參考,喜歡的話請給個星:https://github.com/coderZjc/BYCycleScrollView

效果展示:


效果圖.gif

原理說明

在這個方案中,我們會使用三個UIImageView用于承載Image,但每次滾動完成后都調整每個UIImageView的Image,然后調用以下方法去設置ScrollView的位置,使其回到最中間第二張UIImageView(通過設置animated:false)的方式在視覺上達到無限循環的效果。

func setContentOffset(_ contentOffset: CGPoint, animated: Bool)

大致原理就是這樣,具體實現請看下面的內容。
1、首先我們要創建一個自定義的類繼承自UIScrollView,首先分析一下,我們需要對外開放的接口有:供設置的圖片數組(或者圖片URL數組)、輪播的時間間隔、代理。

//MARK: 供外部賦值
weak var customDelegate: BYScrollViewDelegate?//代理
public var imageURLArray: [String]? //圖片URL數組
public var imagesArray: [UIImage] //圖片數組
public var timeInterval: TimeInterval = 5 //輪播時間間隔,默認是5秒

2、內部我們需要創建三個UIImageView連續放置,如下圖所示

//MARK: 內部私有
private var currentIndex: Int = 0 //當前下標值,默認是0
private var imageView1: UIImageView?
private var imageView2: UIImageView?
private var imageView3: UIImageView?
private var timer: Timer? //計時器,用于圖片輪播計時

4ED322FB-4145-4F81-BBFF-E3D703C43836.png

3、在我們對該類的對象賦值圖片數組后,我們要設置每個UIImageView的image,然后實現ScrollView的代理,當用戶滑動完成的時候需要記錄下當前的下標值并且重新設置圖片將圖片的順序做個調換,并將ScrollView滾動回最中間的位置(不使用動畫),這樣就達到了無限循環的效果。

4、提示:因為在自定義的ScrollView里我們需要設置計時器,為了對象能順利釋放,所以要復寫removeFromSuperview,在里面銷毀計時器

//MARK: 復寫removeFromSuperview方法,在這里銷毀計時器,不然無法釋放對象
override func removeFromSuperview()
{
super.removeFromSuperview()
//銷毀計時器
guard let myTimer=self.timer else
{
return
}
myTimer.invalidate()
}

具體的代碼實現請參照 Demo

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容