今天公司里的實習生跑過來問我一般App上廣告的無限滾動是怎么實現的,剛好很久沒寫博客了,就決定寫下了,盡量幫助那些處于剛學iOS的程序猿.
做一個小demo,大概實現效果如下圖所示:
基本實現思路:
1. 在你需要放置無限滾動展示數據的地方把他的數據,在原本的基礎上把你要展示的數據擴大三倍.(當然擴大兩倍也是可以的,三倍的話,比較好演示)
// MARK: - 設置數據源func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {// print(self.arrayM.count)return self.arrayM.count * 3}2.當在定時器的作用下,或者在拖動情況存下滾動到第八個時候,設置此時的collectionView.contentOffset.x等于滾動到第三個cell的contentOffset.x
if collectionView.contentOffset.x == CGFloat(3 * self.arrayM.count - 1) * self.collectionView.bounds.width {self.collectionView.contentOffset.x = CGFloat(self.arrayM.count - 1) * self.collectionView.bounds.width}3.當拖動到第0個cell時,設置此時的collectionView.contentOffset.x等于第六個cell的contentOffset.x
if collectionView.contentOffset.x == 0 {self.collectionView.contentOffset.x = CGFloat(2 * self.arrayM.count - 1) * self.collectionView.bounds.width}代碼如下:
我在代碼中用到5張照片,所以應該一共有15個cell
import UIKitclass ViewController: UIViewController ,UICollectionViewDataSource, UICollectionViewDelegate {@IBOutlet weak var collectionView: UICollectionView!var timer : Timer?var arrayM : [BOModel] = [] {didSet {self.collectionView.reloadData()}}static let CellID = "cell"override func viewDidLoad() {super.viewDidLoad()self.collectionView.dataSource = selfself.collectionView.delegate = self// 加載數據loadData()self.collectionView.register(UINib.init(nibName: "BOCollectionViewCell", bundle: nil), forCellWithReuseIdentifier: ViewController.CellID)//設置collextionViewsetupCollectionView()// 開啟定時器starTimer()}/// 從polist中加載數據func loadData() {let stemp: NSArray = NSArray(contentsOfFile: Bundle.main.path(forResource: "shops.plist", ofType: nil)!)!for dict in stemp {let model = BOModel.init(dict: dict as! [String : Any])self.arrayM.append(model)}}/// 設置cellection的布局方式////// - Returns: 一個布局類型func setupCollectionFlowlayout() -> (UICollectionViewFlowLayout) {let flowLayout = UICollectionViewFlowLayout()flowLayout.itemSize = self.collectionView.bounds.sizeflowLayout.minimumLineSpacing = 0flowLayout.minimumInteritemSpacing = 0flowLayout.scrollDirection = .horizontalflowLayout.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0)return flowLayout}/// 設置collectionVIewfunc setupCollectionView() -> () {self.collectionView.collectionViewLayout = self.setupCollectionFlowlayout()self.collectionView.showsVerticalScrollIndicator = falseself.collectionView.showsHorizontalScrollIndicator = falseself.collectionView.isPagingEnabled = true}// MARK: - 設置數據源func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {// print(self.arrayM.count)return self.arrayM.count * 3}func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {let cell = self.collectionView.dequeueReusableCell(withReuseIdentifier: ViewController.CellID, for: indexPath) as! BOCollectionViewCellcell.model = self.arrayM[indexPath.row % self.arrayM.count]return cell}// MARK: - 實現代理方法func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {//contentOffset.x == 0 時,重新設置contentOffset.x的值if collectionView.contentOffset.x == 0 {self.collectionView.contentOffset.x = CGFloat(2 * self.arrayM.count - 1) * self.collectionView.bounds.width}//當到達最后一個cell時,重新設置contentOffset.x的值if collectionView.contentOffset.x == CGFloat(3 * self.arrayM.count - 1) * self.collectionView.bounds.width {self.collectionView.contentOffset.x = CGFloat(self.arrayM.count - 1) * self.collectionView.bounds.width}}/// 開啟定時器func starTimer () {let timer = Timer.init(timeInterval: 1, target: self, selector: #selector(ViewController.nextPage), userInfo: nil, repeats: true)// 這一句代碼涉及到runloop 和 主線程的知識,則在界面上不能執行其他的UI操作RunLoop.main.add(timer, forMode: RunLoopMode.commonModes)self.timer = timer}/// 在1秒后,自動跳轉到下一頁func nextPage() {// 如果到達最后一個,則變成第四個if collectionView.contentOffset.x == CGFloat(3 * self.arrayM.count - 1) * self.collectionView.bounds.width {self.collectionView.contentOffset.x = CGFloat(self.arrayM.count - 1) * self.collectionView.bounds.width}else {// 每過一秒,contentOffset.x增加一個cell的寬度self.collectionView.contentOffset.x += self.collectionView.bounds.size.width}}/// 當collectionView開始拖動的時候,取消定時器func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {self.timer?.invalidate()self.timer = nil}/// 當用戶停止拖動的時候,開啟定時器func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {starTimer()}}plist文件如下圖所示:
用到的字典轉模型因為比較簡單的轉換,就自己寫了個:
import UIKitclass BOCollectionViewCell: UICollectionViewCell {@IBOutlet weak var imageView: UIImageView!var model : BOModel? {didSet {guard let image = UIImage.init(named: (model?.name)!) else {return}self.imageView.image = image}}override func awakeFromNib() {super.awakeFromNib()}}自定義collectionViewCell類中的內容:
import UIKitclass BOCollectionViewCell: UICollectionViewCell {@IBOutlet weak var imageView: UIImageView!var model : BOModel? {didSet {guard let image = UIImage.init(named: (model?.name)!) else {return}self.imageView.image = image}}override func awakeFromNib() {super.awakeFromNib()}}附: 其實這種方法比較實現無限滾動,利用了一點小技巧,用電腦測試的時候可能有一點缺陷.
以上所述是小編給大家介紹的使用Swift實現iOScollectionView廣告無限滾動效果(DEMO)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VEVB武林網網站的支持！
新聞熱點
疑難解答
