iOScollectionView廣告無限滾動(Swift實現)

標籤：公司   art   ber   elf   定時   dem   bom   測試的   fit   

今天公司裡的實習生跑過來問我一般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 = self        self.collectionView.delegate = self        // 載入資料        loadData()        self.collectionView.register(UINib.init(nibName: "BOCollectionViewCell", bundle: nil), forCellWithReuseIdentifier: ViewController.CellID)                //設定collextionView        setupCollectionView()                // 開啟定時器        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.size        flowLayout.minimumLineSpacing = 0        flowLayout.minimumInteritemSpacing = 0        flowLayout.scrollDirection = .horizontal        flowLayout.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0)        return flowLayout    }        /// 設定collectionVIew    func setupCollectionView() -> () {                self.collectionView.collectionViewLayout = self.setupCollectionFlowlayout()        self.collectionView.showsVerticalScrollIndicator = false        self.collectionView.showsHorizontalScrollIndicator = false        self.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! BOCollectionViewCell                cell.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()     }}

 

附: 其實這種方法比較實現無限滾動,利用了一點小技巧,用電腦測試的時候可能有一點缺陷.

iOScollectionView廣告無限滾動(Swift實現)