iOScollectionView广告无限滚动实例(Swift实现)_IOS

今天公司里的实习生跑过来问我一般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 UIKit

class 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 UIKit

class 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 UIKit

class 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()

  }

}

附: 其实这种方法比较实现无限滚动,利用了一点小技巧,用电脑测试的时候可能有一点缺陷.

原文链接:http://www.cnblogs.com/muzichenyu/p/6071757.html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索collectionview
, 滚动
ios无限滚动
swift collectionview、collectionview 滚动、collectionview滚动条、swift tableview 滚动、swift scrollview滚动,以便于您获取更多的相关知识。

时间: 2025-01-19 14:53:42

iOScollectionView广告无限滚动实例(Swift实现)_IOS的相关文章

使用Swift实现iOScollectionView广告无限滚动效果(DEMO)_Swift

今天公司里的实习生跑过来问我一般App上广告的无限滚动是怎么实现的,刚好很久没写博客了,就决定写下了,尽量帮助那些处于刚学iOS的程序猿. 做一个小demo,大概实现效果如下图所示: 基本实现思路: 1. 在你需要放置无限滚动展示数据的地方把他的数据,在原本的基础上把你要展示的数据扩大三倍.(当然扩大两倍也是可以的,三倍的话,比较好演示) // MARK: - 设置数据源 func collectionView(_ collectionView: UICollectionView, number

IOS中无限滚动Scrollview效果_IOS

本文实例讲了IOS无限滚动效果,分享给大家供大家参考,具体内容如下 滑动到当前位置时候才去请求,本地有内容则直接显示(以来SDWebImage,UIView+Ext) HZScrollView.h #import <UIKit/UIKit.h> typedef void(^HZReturnBlock)(NSInteger index,CGFloat offset); typedef NS_ENUM(NSUInteger, HZScrollViewPageControllPosition) {

iOS利用UIScrollView实现无限滚动效果_IOS

前言 众所周知UIScrollView 的无限滚动主要应用在图片轮播器.欢迎界面等场景.它的原理是在要显示的图片前后各加一张图片即在第一张图片之前放最后一张图片,在最后一张图片之后放第一张图片,然后在滚动到边缘的时候,巧妙的过渡一下就可以"瞒天过海","以假乱真"的造成无限滚动的假象.网络上有很多只用三张或两张图片实现的方法,效率比这个方法高,但实现起来稍微麻烦一点,有兴趣的可以去深入研究. 实现步骤       1.根据需求准备几张图片,在网上找了5张图片,分别命

“无限滚动加载”适用于你的产品吗?

在家一天天宅着,倒仍然能对周六周日有清晰的概念,也真是个奇迹. 今天带来一篇关于无限滚动加载的简短译文.其实这事儿,以前在微博上也吐过一阵的槽,印象最深的就是有次在一个什么网站上想点页脚里的"关于我们",真心点不着,每每要点的时候上面自动加载的内容就顶下来,没完没了...当时就愤恨的琢磨着你们要这页脚有毛用啊?这次看到这篇文章,觉得里面有不少能引起自己共鸣的内容,所以拿过来做,希望也能给各位朋友带来些有用的东西吧.走着. 这里进入译文.怎样通过更友好的方式来呈现一系列的数据内容,包括文

【干货】设计高性能无限滚动加载,了解高效页面秘密

UX Planet论坛上有过这么一篇热门文章: Infinite Scrolling Best Practices,它从UX角度分析了无限滚动加载的设计实践. 无限滚动加载在互联网上到处都有应用: 豆瓣首页是一个,Facebook的Timeline是一个,Tweeter的话题列表也是一个.当你向下滚动,新的内容就神奇的"无中生有"了.这是一个得到广泛赞扬的用户体验. 无限滚动加载背后的技术挑战其实比想象中要多不少.尤其是要考虑页面性能,需要做到极致. 本文通过代码实例,来实现一个无限滚

Android代码实现AdapterViews和RecyclerView无限滚动_Android

应用的一个共同的特点就是当用户欢动时自动加载更多的内容,这是通过用户滑动触发一定的阈值时发送数据请求实现的. 相同的是:信息实现滑动的效果需要定义在列表中最后一个可见项,和某些类型的阈值以便于开始在最后一项到达之前开始抓取数据,实现无限的滚动. 实现无限滚动的现象的重要之处就在于在用户滑动到最低端之前就行数据的获取,所以需要加上一个阈值来帮助实现获取数据的预期. 使用ListView和GridView实现 每个AdapterView 例如ListView 和GridView 当用户开始进行滚动操

无限滚动加载”适用于你的产品吗?

编者按]本文作者http://www.aliyun.com/zixun/aggregation/16478.html">Danielle Arad,一名用户体验专家,译者@C7210.怎样通过更友好的方式来呈现一系列的数据内容,包括文章.链接.图片.搜索结果等等--对于设计师来说,这不是一件很轻松的事. 在这方面,页码导航(pagination)是一种经过时间验证的.还算值得信赖的解决方案. 不过最近几年,我们可以发现越来越多的网站开始使用无限滚动(infinite scrolling)的

网站用户体验:“无限滚动加载”适用于你的产品吗?

中介交易 SEO诊断 淘宝客 云主机 技术大厅 [编者按]本文作者Danielle Arad,一名用户体验专家,译者@C7210.怎样通过更友好的方式来呈现一系列的数据内容,包括文章.链接.图片.搜索结果等等--对于设计师来说,这不是一件很轻松的事. 在这方面,页码导航(pagination)是一种经过时间验证的.还算值得信赖的解决方案. 不过最近几年,我们可以发现越来越多的网站开始使用无限滚动(infinite scrolling)的方式来呈现内容了--当用户浏览到页面底部时,传统意义上的"下

Android代码实现AdapterViews和RecyclerView无限滚动

应用的一个共同的特点就是当用户欢动时自动加载更多的内容,这是通过用户滑动触发一定的阈值时发送数据请求实现的. 相同的是:信息实现滑动的效果需要定义在列表中最后一个可见项,和某些类型的阈值以便于开始在最后一项到达之前开始抓取数据,实现无限的滚动. 实现无限滚动的现象的重要之处就在于在用户滑动到最低端之前就行数据的获取,所以需要加上一个阈值来帮助实现获取数据的预期. 使用ListView和GridView实现 每个AdapterView 例如ListView 和GridView 当用户开始进行滚动操